Aria improvements for assistive technology (CFM-270)

app/resources/locales/en_US/menu.po

@@ -135,6 +135,9 @@ msgstr "All Groups"
 msgid "co.switch"
 msgstr "Switch CO"
 
+msgid "menu.user"
+msgstr "User Menu"
+
 msgid "related.configurations"
 msgstr "Related Configurations"
 

app/src/View/Helper/FieldHelper.php

@@ -413,7 +413,8 @@ protected function formNameDiv(string $fieldName, string $labelText=null, string
          : $label) 
       . ($this->editable
            && in_array($fn, $this->reqFields)
-         ? ' <span class="required">*</span>' 
+         ? ' <span class="required" aria-hidden="true">*</span>'
+         . '<span class="visually-hidden">' . __d('field','required') . '</span>' 
          : '') . '
       </div>
       ' . ($desc ? '<span class="field-desc">' . $desc . '</span>' : "") .'

app/templates/element/filter.php

@@ -90,7 +90,7 @@
 <div id="<?= $modelName . ucfirst($this->request->getParam('action')); ?>Search" class="top-filters">
   <fieldset>
     <legend id="top-filters-toggle">
-      <em class="material-icons">search</em>
+      <em class="material-icons" aria-hidden="true">search</em>
       <?= __d('operation', 'filter'); ?>
 
       <?php if(!empty($search_params)):?>
@@ -115,7 +115,7 @@
               (is_array($search_params[$key]) ? 'Range' : $search_params[$key]);
           ?>
           <button class="top-filters-active-filter deletebutton spin btn btn-default btn-sm" data-identifier="<?= $data_identifier ?>" type="button" aria-controls="<?php print $aria_controls; ?>" title="<?= __d('operation', 'clear.filters',[2]); ?>">
-             <em class="material-icons">cancel</em>
+             <em class="material-icons" aria-hidden="true">cancel</em>
              <span class="top-filters-active-filter-title">
                <?= $vv_searchable_attributes[$key]['label'] ?>
              </span>

app/templates/element/menuAction.php

@@ -47,7 +47,7 @@ class="<?= $actionsMenuClass; ?>">
     'title' => __d('field', 'action')
   );
   print $this->Html->link(
-    '<span class="material-icons">' . $actionsIcon . '</span> ' . $actionsTitle,
+    '<span class="material-icons" aria-hidden="true">' . $actionsIcon . '</span> ' . $actionsTitle,
     'javascript:void(0);',
     $linkparams
   );
@@ -75,9 +75,9 @@ class="<?= $actionsMenuClass; ?>">
           <a class="<?= $actionCssClass; ?>" href="<?= $action['url']; ?>"<?= !(empty($actionDataAttrs)) ? $actionDataAttrs : '' ?>>
             <?php if(!empty($action['icon'])): ?>
               <?php if(!empty($action['iconClass'])): ?>
-                <em class="<?= $action['iconClass']; ?>"><?= $action['icon']; ?></em>
+                <em class="<?= $action['iconClass']; ?>" aria-hidden="true"><?= $action['icon']; ?></em>
               <?php else: ?>
-                <em class="material-icons"><?= $action['icon']; ?></em>
+                <em class="material-icons" aria-hidden="true"><?= $action['icon']; ?></em>
               <?php endif; ?>
             <?php endif; ?>
             <span class="action-link-text"><?= $action['label']; ?></span>
@@ -102,7 +102,7 @@ class="<?= $actionsMenuClass; ?>">
               <?php if(!empty($action['icon_class'])): ?>
                 <em class="<?= $action['icon_class']; ?>"><?= $action['icon']; ?></em>
               <?php else: ?>
-                <em class="material-icons"><?= $action['icon']; ?></em>
+                <em class="material-icons" aria-hidden="true"><?= $action['icon']; ?></em>
               <?php endif; ?>
             <?php endif; ?>
             <?= $action['label']; ?>

app/templates/element/menuMain.php

@@ -102,7 +102,7 @@
     </ul>
   </nav>
   <button id="co-menu-collapse">
-    <em class="material-icons-outlined co-menu-collapse-icon">
+    <em class="material-icons-outlined co-menu-collapse-icon" aria-hidden="true">
       expand_circle_down
     </em>
     <div class="co-menu-collapse-text">close</div>

app/templates/element/menuPanel.php

@@ -43,7 +43,7 @@
           );
           ?>
           <a href="<?= $menuUrl ?>" class="menu-panel-primary-link">
-            <div class="material-icons-outlined">person</div>
+            <div class="material-icons-outlined" aria-hidden="true">person</div>
             <div class="menu-panel-primary-link-text">
               <h3><?= __d('menu','co.people.population') ?></h3>
               <div class="menu-panel-link-desc"><?= __d('menu','co.people.population.desc') ?></div>
@@ -64,7 +64,7 @@
             );
           ?>
           <a href="<?= $menuUrl ?>" class="menu-panel-primary-link">
-            <div class="material-icons-outlined">pending_actions</div>
+            <div class="material-icons-outlined" aria-hidden="true">pending_actions</div>
             <div class="menu-panel-primary-link-text">
               <h3><?= __d('menu','co.people.enrollments.pending') ?></h3>
               <div class="menu-panel-link-desc"><?= __d('menu','co.people.enrollments.pending.desc') ?></div>
@@ -115,7 +115,7 @@
             );
           ?>
           <a href="<?= $menuUrl ?>" class="menu-panel-primary-link">
-            <div class="material-icons-outlined">groups</div>
+            <div class="material-icons-outlined" aria-hidden="true">groups</div>
             <div class="menu-panel-primary-link-text">
               <h3><?= __d('controller', 'Cous', [99]) ?></h3>
               <div class="menu-panel-link-desc"><?= __d('menu','co.structure.cous.desc') ?></div>
@@ -134,7 +134,7 @@
             );
           ?>
           <a href="<?= $menuUrl ?>" class="menu-panel-primary-link">
-            <div class="material-icons-outlined">people_outline</div>
+            <div class="material-icons-outlined" aria-hidden="true">people_outline</div>
             <div class="menu-panel-primary-link-text">
               <h3><?= __d('controller', 'Groups', [99]) ?></h3>
               <div class="menu-panel-link-desc"><?= __d('menu','co.structure.groups.desc') ?></div>
@@ -199,7 +199,7 @@
             );
           ?>
           <a href="<?= $menuUrl ?>" class="menu-panel-primary-link">
-            <div class="material-icons-outlined">assignment</div>
+            <div class="material-icons-outlined" aria-hidden="true">assignment</div>
             <div class="menu-panel-primary-link-text">
               <h3><?= __d('controller', 'Jobs', [99]) ?></h3>
               <div class="menu-panel-link-desc"><?= __d('menu','co.operations.jobs.desc') ?></div>
@@ -217,7 +217,7 @@
             );
           ?>
           <a href="<?= $menuUrl ?>" class="menu-panel-primary-link">
-            <div class="material-icons-outlined">summarize</div>
+            <div class="material-icons-outlined" aria-hidden="true">summarize</div>
             <div class="menu-panel-primary-link-text">
               <h3><?= __d('controller', 'Reports', [99]) ?></h3>
               <div class="menu-panel-link-desc"><?= __d('menu','co.operations.reports.desc') ?></div>

app/templates/element/menuTop.php

@@ -29,11 +29,17 @@
 <?php if(!empty($vv_user)): ?>
   <ul>
     <li id="top-menu-user">
-      <button type="button" class="dropdown-toggle top-menu-button" id="user-panel-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" 
+              class="dropdown-toggle top-menu-button" 
+              id="user-panel-toggle" 
+              data-bs-toggle="dropdown" 
+              aria-haspopup="true" 
+              aria-expanded="false"
+              aria-label="<?= __d('menu','menu.user') ?>">
         <span class="top-menu-link-text">
           <?= $vv_user['username']; ?>
         </span>
-        <em class="material-icons icon-adjust">person</em>
+        <em class="material-icons icon-adjust" aria-hidden="true">person</em>
       </button>
       <!-- Account Dropdown -->
       <div id="user-panel"  class="dropdown-menu <?= (count($vv_available_cos) > 1) ? ' with-co-switcher' : ''; ?>" aria-labelledby="user-panel-toggle">
@@ -46,7 +52,7 @@
           ?>
         </div>
         <div id="user-panel-user-info">
-          <em class="material-icons">person</em>
+          <em class="material-icons" aria-hidden="true">person</em>
           <div id="user-panel-cn"><?= $vv_user['username']; ?></div>
           <div id="user-panel-id"><!-- XXX identifier goes here --></div>
         </div>
@@ -56,11 +62,11 @@
             Settings
           </a>
           <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="#"><span class="material-icons">dark_mode</span> Dark mode</a></li>
+            <li><a class="dropdown-item" href="#"><span class="material-icons" aria-hidden="true">dark_mode</span> Dark mode</a></li>
             <li><hr class="dropdown-divider"></li>
-            <li><a class="dropdown-item" href="#"><span class="material-icons">density_small</span>Density small</a></li>
-            <li><a class="dropdown-item" href="#"><span class="material-icons">density_medium</span>Density medium</a></li>
-            <li><a class="dropdown-item" href="#"><span class="material-icons">density_large</span>Density large</a></li>
+            <li><a class="dropdown-item" href="#"><span class="material-icons" aria-hidden="true">density_small</span>Density small</a></li>
+            <li><a class="dropdown-item" href="#"><span class="material-icons" aria-hidden="true">density_medium</span>Density medium</a></li>
+            <li><a class="dropdown-item" href="#"><span class="material-icons" aria-hidden="true">density_large</span>Density large</a></li>
           </ul>
         </div>
         <?php if(count($vv_available_cos) > 1): // More than one CO is available, so present the switch button ?>

app/templates/element/searchGlobal.php

@@ -38,11 +38,11 @@
 ?>
 
 <button id="global-search-toggle" class="dropdown-toggle top-menu-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-  <em class="material-icons">search</em>
+  <em class="material-icons" aria-hidden="true">search</em>
   <span class="visually-hidden"><?= __d('operation','search') ?></span>
 </button>
 
-<div id="global-search" class="dropdown-menu" aria-labelledby="global-search-toggle">
+<div id="global-search" class="dropdown-menu">
   <?php
     print $this->Form->create(null, $options);
     print $this->Form->hidden('co_id', ['default' => $vv_cur_co->id]);
@@ -64,7 +64,7 @@
       ]
     );
     print $this->Form->button(
-      '<span class="material-icons">close</span>',
+      '<span class="material-icons" aria-hidden="true">close</span>',
       [
         'type' => 'button', 
         'escapeTitle' => false, 
@@ -74,7 +74,7 @@
       ]
     );
     print $this->Form->button(
-      '<em class="material-icons">search</em>',
+      '<em class="material-icons" aria-hidden="true">search</em>',
       [
         'type' => 'submit', 
         'escapeTitle' => false,