[LON-CAPA-cvs] cvs: loncom /interface lonextresedit.pm

[raeburn]

raeburn		Fri Dec 19 22:38:42 2025 EDT

  Modified files:              
    /loncom/interface	lonextresedit.pm 
  Log:
  - WCAG 2 compliance. Include "Skip to main content" as first item shown
    when tabbing in page and include labels for form elements.
  
  
Index: loncom/interface/lonextresedit.pm
diff -u loncom/interface/lonextresedit.pm:1.37 loncom/interface/lonextresedit.pm:1.38
--- loncom/interface/lonextresedit.pm:1.37	Sat Jun 14 02:50:25 2025
+++ loncom/interface/lonextresedit.pm	Fri Dec 19 22:38:42 2025
@@ -1,7 +1,7 @@
 # The LearningOnline Network
 # Documents
 #
-# $Id: lonextresedit.pm,v 1.37 2025/06/14 02:50:25 raeburn Exp $
+# $Id: lonextresedit.pm,v 1.38 2025/12/19 22:38:42 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -119,7 +119,7 @@
         $description = 'External Tool Editor'; 
     }
     $r->print(&Apache::loncommon::start_page($description,$js).
-              '<div class="LC_left_float">'.
+              '<div class="LC_left_float" role="main" id="LC_main_content">'.
               $output.
               $errormsg.
               &extedit_form($supplementalflag,$residx,$url,$title,$pathitem,undef,
@@ -767,8 +767,8 @@
                     '</div>'."\n".
                     '<div style="padding:0;clear:both;margin:0;border:0"></div>'.
                     '<div id="'.$toolattr{'crsappenddiv'}.'" style="'.$appendstyle.'">'.
-                    '<span class="'.$class.'">'.&mt('Append to LTI login URL').':</span><br />'.
-                    '<input type="text" id="'.$toolattr{'crsappend'}.'" size="30" name="exttoolappend" value="'.$crsappend.'"'.$disabled.' /></span>'.
+                    '<label><span class="'.$class.'">'.&mt('Append to LTI login URL').':</span><br />'.
+                    '<input type="text" id="'.$toolattr{'crsappend'}.'" size="30" name="exttoolappend" value="'.$crsappend.'"'.$disabled.' /></label>'.
                     '</div>'."\n".
                     '<div style="padding:0;clear:both;margin:0;border:0"></div>'.
                     '<div id="'.$toolattr{'desturldiv'}.'" style="'.$desturlstyle.'">'.
@@ -780,7 +780,7 @@
                     '</span><br />'."\n".
                     '<div id="'.$toolattr{'desturlinfodiv'}.'" style="'.$desturlinfostyle.'">'.
                     '<span class="'.$class.'">'.
-                    '<input type="text" size="'.$size.'" name="exttooldesturl" value="'.$desturl.'"'.$disabled.' /></label></span><br />'.
+                    '<input type="text" size="'.$size.'" name="exttooldesturl" value="'.$desturl.'"'.$disabled.' aria-label="'.&mt('post-login destination url').'" /></span><br />'.
                     '<span class="'.$class.'"><label>'.&mt('Delay between login and redirect').
                     ':<input type="text" size="3" name="exttooldelay" value="'.$delay.'"'.$disabled.' /> s'.
                     '</label></span></div></div>'."\n".
@@ -802,26 +802,26 @@
                     '<label><input type="radio" name="exttooltarget" value="window" '.$chkstate{'window'}.'onclick="updateTooldim(this.form,'.
                     "'$toolattr{dimendiv}','$toolattr{windiv}','$toolattr{dimenwidth}','$toolattr{dimenheight}',
                     '$toolattr{linktext}','$toolattr{explanation}'".');"'.$disabled.' />'.&mt('window').'</label></span>'.
-                    '<div id="'.$toolattr{'dimendiv'}.'" style="'.$dimendivstyle.'"><span class="'.$class.'">'.
-                    &mt('Width').': <input type="text" size="4" id="'.$toolattr{'dimenwidth'}.'" name="exttoolwidth" value="'.$width.'"'.$disabled.' />'.(' 'x2).
-                    &mt('Height').': <input type="text" size="4" id="'.$toolattr{'dimenheight'}.'" name="exttoolheight" value="'.$height.'"'.$disabled.' /></span>'."\n".
+                    '<div id="'.$toolattr{'dimendiv'}.'" style="'.$dimendivstyle.'"><span class="'.$class.'"><label>'.
+                    &mt('Width').': <input type="text" size="4" id="'.$toolattr{'dimenwidth'}.'" name="exttoolwidth" value="'.$width.'"'.$disabled.' /></label>'.(' 'x2).'<label>'.
+                    &mt('Height').': <input type="text" size="4" id="'.$toolattr{'dimenheight'}.'" name="exttoolheight" value="'.$height.'"'.$disabled.' /></label></span>'."\n".
                     '</div></div>'.
                     '<div id="'.$toolattr{'windiv'}.'" style="'.$windivstyle.'">'.
                     '<div id="'.$toolattr{'linktextdiv'}.'" class="LC_left_float" style="'.$linktextstyle.'">'.
-                    '<span class="'.$class.'">'.&mt('Link Text').'</span><br /><input type="text" size="25" id="'.$toolattr{'linktext'}.
-                    '" name="exttoollinktext" value="'.$linktext.'"'.$disabled.' />'.
+                    '<label><span class="'.$class.'">'.&mt('Link Text').'</span><br /><input type="text" size="25" id="'.$toolattr{'linktext'}.
+                    '" name="exttoollinktext" value="'.$linktext.'"'.$disabled.' /></label>'.
                     '</div><div id="'.$toolattr{'explanationdiv'}.'" class="LC_left_float" style="'.$explanationstyle.'">'.
-                    '<span class="'.$class.'">'.&mt('Explanation').'</span><br />'.
+                    '<label><span class="'.$class.'">'.&mt('Explanation').'</span><br />'.
                     '<textarea rows="'.$rows.'" cols="'.$cols.'" id="'.$toolattr{'explanation'}.'" name="exttoolexplanation" '.$disabled.'>'.
-                    $explanation.'</textarea></div><div style="padding:0;clear:both;margin:0;border:0"></div>'.
+                    $explanation.'</textarea></label></div><div style="padding:0;clear:both;margin:0;border:0"></div>'.
                     '</div>'.
                     '<div id="'.$toolattr{'crslabeldiv'}.'" style="'.$labelstyle.'">'.
-                    '<span class="'.$class.'">'.&mt('Course label:').' '.
-                    '<input type="text" id="'.$toolattr{'crslabel'}.'" name="exttoollabel" value="'.$crslabel.'"'.$disabled.' /></span><br />'.
+                    '<span class="'.$class.'"><label>'.&mt('Course label:').' '.
+                    '<input type="text" id="'.$toolattr{'crslabel'}.'" name="exttoollabel" value="'.$crslabel.'"'.$disabled.' /></label></span><br />'.
                     '</div>'."\n".
                     '<div id="'.$toolattr{'crstitlediv'}.'" style="'.$titlestyle.'">'.
-                    '<span class="'.$class.'">'.&mt('Course title:').' '.
-                    '<input type="text" id="'.$toolattr{'crstitle'}.'" name="exttooltitle" value="'.$crstitle.'"'.$disabled.' /></span><br />'.
+                    '<span class="'.$class.'"><label>'.&mt('Course title:').' '.
+                    '<input type="text" id="'.$toolattr{'crstitle'}.'" name="exttooltitle" value="'.$crstitle.'"'.$disabled.' /></label></span><br />'.
                     '</div>'."\n".
                     '<div id="'.$toolattr{'gradablediv'}.'" style="'.$gradablestyle.'">'.
                     '<span class="'.$class.'">'.&mt('Gradable').' '.
@@ -837,7 +837,7 @@
                     &mt('Yes, default URL').'</label>'.(' 'x2).
                     '<label><input type="radio" name="exttoolreturnurl" value="custom"'.$chkreturncust.$disabled.$onclickreturl.' />'.
                     &mt('Yes, specify URL').'</label></span><br />'."\n".
-                    '<input type="'.$customreturn.'" id="'.$toolattr{'customreturnurl'}.'" size="35" name="exttoolbacktourl" value="'.$backtourl.'"'.$disabled.' />'.
+                    '<input type="'.$customreturn.'" id="'.$toolattr{'customreturnurl'}.'" size="35" name="exttoolbacktourl" value="'.$backtourl.'"'.$disabled.' aria-label="'.&mt('custom return URL').'" />'.
                     '</div>'."\n";
     }
     my $chooser = $toolelem;
@@ -955,7 +955,7 @@
         $description = 'External Tool Editor';
     }
     return &Apache::loncommon::start_page($description,$js,$args).
-           '<div class="LC_left_float">'.
+           '<div class="LC_left_float" role="main" id="LC_main_content">'.
            &extedit_form($supplementalflag,$residx,$url,$title,$pathitem,undef,'direct',
                          $symb,$type,$cdom,$cnum,\%ltitools).
            '</div>'.