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

[raeburn]

raeburn		Sun Jan  4 19:08:16 2026 EDT

  Modified files:              
    /loncom/interface	lonmeta.pm 
  Log:
  - WCAG compliance
    - Support "Skip to main content" when tabbing in page.
    - Replace use of <table> with <div> for layout.
  
  
Index: loncom/interface/lonmeta.pm
diff -u loncom/interface/lonmeta.pm:1.259 loncom/interface/lonmeta.pm:1.260
--- loncom/interface/lonmeta.pm:1.259	Sat Aug  9 00:44:33 2025
+++ loncom/interface/lonmeta.pm	Sun Jan  4 19:08:16 2026
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # Metadata display handler
 #
-# $Id: lonmeta.pm,v 1.259 2025/08/09 00:44:33 raeburn Exp $
+# $Id: lonmeta.pm,v 1.260 2026/01/04 19:08:16 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -170,21 +170,22 @@
         return '';
     }
     my $val=int($value*10.+0.5)-10;
-    my $output='<table border="0" cellpadding="0" cellspacing="0"><tr>';
+    my $output = '<div style="display:inline;">'.
+                 '<div class="LC_floatleft" style="display:inline-block; margin: 3px 0 0 0; width: 44px; border:1px solid #000000; height:15px;" aria-hidden="true">';
     if ($val>=20) {
-	$output.='<td width="20" bgcolor="#555555">'.(' ' x2).'</td>';
+        $output .= '<div class="LC_floatleft" style="display:inline-block; background-color: #555555; width:20px; height:15px; margin:0px;" aria-hidden="true"></div>';
     } else {
-        $output.='<td width="'.($val).'" bgcolor="#555555"> </td>'.
-                 '<td width="'.(20-$val).'" bgcolor="#FF3333"> </td>';
+        $output .= '<div class="LC_floatleft" style="display:inline-block; background-color: #555555; width:'.$val.'px; height:15px; margin:0px;" aria-hidden="true"></div>'.
+                   '<div class="LC_floatleft" style="display:inline-block; background-color: #FF3333; width:'.(20-$val).'px; height:15px; margin:0px;" aria-hidden="true"></div>';
     }
-    $output.='<td bgcolor="#FFFF33"> </td>';
+    $output .= '<div class="LC_floatleft" style="display:inline-block; background-color: #FFFF33; width: 4px; height:15px; margin:0px;" aria-hidden="true"></div>';
     if ($val>20) {
-	$output.='<td width="'.($val-20).'" bgcolor="#33FF33"> </td>'.
-                 '<td width="'.(40-$val).'" bgcolor="#555555"> </td>';
+        $output .= '<div class="LC_floatleft" style="display:inline-block; background-color:#33FF33; width:'.($val-20).'px; height:15px; margin:0px;" aria-hidden="true"></div>'.
+                   '<div class="LC_floatleft" style="display:inline-block; background-color:#555555; width:'.(40-$val).'px; height:15px; margin:0px;" aria-hidden="true"></div>';
     } else {
-        $output.='<td width="20" bgcolor="#555555">'.(' ' x2).'</td>';
+        $output .= '<div class="LC_floatleft" style="display:inline-block; background-color:#555555; width:20px; height:15px; margin:0px;" aria-hidden="true"></div>';
     }
-    $output.='<td> ('.sprintf("%5.2f",$value).') </td></tr></table>';
+    $output .= '</div><div class="LC_floatleft" style="display:inline;padding: 0; margin: 2px 0 0 2px;"> ('.sprintf("%3.2f",$value).') </div></div><div style="padding:0;clear:both;margin:0;border:0"></div>';
     return $output;
 }
 
@@ -196,15 +197,16 @@
     my $val=int(40.0*$value+0.5);
     my @colors=('#FF9933','#EEAA33','#DDBB33','#CCCC33',
                 '#BBDD33','#CCCC33','#DDBB33','#EEAA33');
-    my $output='<table border="0" cellpadding="0" cellspacing="0"><tr>';
+    my $output = '<div style="display:inline;">'.
+                 '<div class="LC_floatleft" style="display:inline-block; margin: 3px 0 0 0; width: 40px; border:1px solid #000000; height:15px;" aria-hidden="true">';
     for (my $i=0;$i<8;$i++) {
+        my $bgcolor = '#555555';
 	if ($val>$i*5) {
-            $output.='<td width="5" bgcolor="'.$colors[$i].'"> </td>';
-        } else {
-	    $output.='<td width="5" bgcolor="#555555"> </td>';
-	}
+            $bgcolor = $colors[$i];
+        }
+        $output .= '<div class="LC_floatleft" style="display:inline-block; background-color:'.$bgcolor.'; width:5px; height:15px; margin:0px;" aria-hidden="true"></div>';
     }
-    $output.='<td> ('.sprintf("%3.2f",$value).') </td></tr></table>';
+    $output .= '</div><div class="LC_floatleft" style="display:inline; padding: 0; margin: 2px 0 0 2px;">  ('.sprintf("%3.2f",$value).') </div></div><div style="padding:0;clear:both;margin:0;border:0"></div>';
     return $output;
 }
 
@@ -885,6 +887,7 @@
                 undef,
                 {'domain' => $resdomain,
                 'only_body' => 1,})
+           .'<div class="LC_landmark" role="main" id="LC_main_content">'
            .'<h1>'.&mt('Metadata').'</h1>'
         );
         if ($env{'form.modal'}) {
@@ -903,7 +906,7 @@
             $r->print('</div>');
         }
     }
-    $r->print(&Apache::loncommon::end_page());
+    $r->print('</div>'.&Apache::loncommon::end_page());
     return OK;
 }