[LON-CAPA-cvs] cvs: rat / lonratedt.pm

[raeburn]

raeburn		Wed May 13 17:55:25 2026 EDT

  Modified files:              
    /rat	lonratedt.pm 
  Log:
  - WCAG 2 compliance
    - Include labels for form elements.
    - Replace use of <table> for layout with <div>.
  
  
Index: rat/lonratedt.pm
diff -u rat/lonratedt.pm:1.113 rat/lonratedt.pm:1.114
--- rat/lonratedt.pm:1.113	Wed May 13 16:50:00 2026
+++ rat/lonratedt.pm	Wed May 13 17:55:25 2026
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # Edit Handler for RAT Maps
 #
-# $Id: lonratedt.pm,v 1.113 2026/05/13 16:50:00 raeburn Exp $
+# $Id: lonratedt.pm,v 1.114 2026/05/13 17:55:25 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -561,9 +561,12 @@
                                       'wl' => 'Import from Stored Links',
 				      'vi' => 'View',
 				      'lm' => 'Load Map',
+                                      'ex' => 'Path to an existing map to load',
 				      'ds' => 'Discard Selected',
 				      'ca' => 'Clear All',
 				      'ta' => 'Temporary Assembly Workspace',
+                                      'st' => 'Selectable resources will be listed here',
+                                      'sv' => 'Resources to be saved will be listed here',
 				      'rv' => 'Revert to Last Saved',
                                       'sa' => 'Save',
                                       'mu' => 'Move Up',
@@ -643,25 +646,28 @@
 <input type="hidden" name="renameres" value="0" />
 <input type="hidden" name="renametitle" value="" />
 <input type="hidden" name="renameidx" value="0" />
-<table>
-    <tr><th width="40%">$lt{'ta'}</th>
-<th> </th>
-<th width="40%">$filetext</th></tr>
-<tr><td bgcolor="#FFFFCC">
+<div class="LC_grid" role="grid">
+<div class="LC_grid_row" role="row">
+<div class="LC_grid_cell" role="gridcell" style="width: 40%; text-align: center; font-weight: bold;">$lt{'ta'}</div>
+<div class="LC_grid_cell" role="gridcell"> </div>
+<div class="LC_grid_cell" role="gridcell" style="width: 40%; text-align: center; font-weight: bold;">$filetext</div>
+</div>
+<div class="LC_grid_row" role="row">
+<div class="LC_grid_cell" role="gridcell" style="background-color: #FFFFCC;">
 <input type="button" onclick="javascript:groupsearch()" value="$lt{'se'}" />
 <input type="button" onclick="javascript:groupimport();" value="$lt{'im'}" />
 $lt{'as'}
 <hr />
-<input type="text" size="20" name="importmap" />
+<input type="text" size="20" name="importmap" aria-label="$lt{'ex'}" />
 <input type="button" 
 onclick="javascript:openbrowser('simpleedit','importmap','sequence,page','')"
 value="$lt{'sm'}" /><input type="submit" name="loadmap" value="$lt{'lm'}" /><hr />
 <input type="submit" name="discard" value="$lt{'ds'}" />
 <input type="submit" name="clear" value="$lt{'ca'}" />
 <input type="button" onclick="javascript:viewimport()" value="$lt{'vi'}" />
-
-    </td><td> </td><td bgcolor="#FFFFCC">
-
+</div>
+<div class="LC_grid_cell" role="gridcell"> </div>
+<div class="LC_grid_cell" role="gridcell" style="background-color: #FFFFCC;">
 <input type="button" onclick=
 "javascript:impfortarget.value=1;groupsearch()" value="$lt{'se'}" />
 <input type="button" onclick=
@@ -679,13 +685,15 @@
 <input type="submit" name="revert" value="$lt{'rv'}" />
 <input type="submit" name="save" value="$lt{'sa'}" />
 <input type="button" onclick="javascript:viewtarget()" value="$lt{'vi'}" />
-</td></tr>
-
-<tr><td bgcolor="#FFFFCC"><select name="importsel" size="10" multiple="multiple">
+</div>
+</div>
+<div class="LC_grid_row" role="row">
+<div class="LC_grid_cell" role="gridcell" style="background-color: #FFFFCC;">
+<select name="importsel" size="10" multiple="multiple" aria-label="$lt{'st'}">
 $importwindow
 </select>
-</td>
-<td bgcolor="#FFFFAA" align="center">
+</div>
+<div class="LC_grid_cell" role="gridcell" style="background-color: #FFFFAA; text-align: center; vertical-align: middle;">
 $lt{'cs'}<br />
 <input type="submit" name="cut" value="<<<" />
 <hr />
@@ -694,12 +702,12 @@
 <hr />
 $lt{'pas'}<br />
 <input type="submit" name="paste" value="-->" />
-</td>
-<td bgcolor="#FFFFCC"><select name="target" size="10" multiple="multiple">
+</div>
+<div class="LC_grid_cell" role="gridcell" style="background-color: #FFFFCC;">
+<select name="target" size="10" multiple="multiple" aria-label="$lt{'sv'}">
 $targetwindow
 </select>
-</td></tr>
-</table>
+</div></div></div>
 <input type="hidden" name="importdetail" value="" />
 <input type="hidden" name="curimpdetail" value="$importdetail" />
 <input type="hidden" name="targetdetail" value="$targetdetail" />