Improve accessibility (CFM-491)

app/resources/locales/en_US/information.po

@@ -30,6 +30,24 @@ msgstr "API Users created in the COmanage CO are given full privileges to all Re
 msgid "api.key"
 msgstr "This newly generated API Key cannot be recovered. If it is lost a new key must be generated."
 
+msgid "aria.label.actions"
+msgstr "Actions menu"
+
+msgid "aria.label.lightbox"
+msgstr "Registry lightbox"
+
+msgid "aria.label.lightbox.main"
+msgstr "Registry lightbox content"
+
+msgid "aria.label.search"
+msgstr "Search and user menu"
+
+msgid "aria.label.subnavigation"
+msgstr "Subnavigation"
+
+msgid "aria.label.subnavigation.links"
+msgstr "Subnavigation secondary links"
+
 msgid "changelog"
 msgstr "Changelog"
 

app/src/View/Helper/VueHelper.php

@@ -62,6 +62,7 @@ class VueHelper extends Helper {
       'unverified',
     ],
     'information' => [
+      'aria.label.lightbox',
       'global.attributes.none',
       'global.value.none',
       'global.visit.link',

app/templates/Dashboards/search.php

@@ -72,7 +72,7 @@
 
 <div id="search-results">
   <?php if($resultsCount): ?>
-    <nav id="cm-searchresults-subnav-tabs" class="cm-subnav-tabs">
+    <nav id="cm-searchresults-subnav-tabs" class="cm-subnav-tabs" aria-label="<?= __d('information','aria.label.subnavigation') ?>">
       <ul class="nav nav-tabs" role="tablist">
         <?php $isFirstTab = true; ?>
         <?php foreach(['People', 'Groups'] as $i=>$pm): ?>

app/templates/element/bulk/checkbox.php

@@ -48,8 +48,8 @@
          id="<?= $id ?>"
          <?php if(!empty($entity)):?>
          data-entity="<?= htmlspecialchars(json_encode($entity), ENT_QUOTES, 'UTF-8') ?>"
-         data-entity-id="<?= $entity->id ?>">
-         <?php endif ?>
+         data-entity-id="<?= $entity->id ?>"
+         <?php endif ?>>
   <label class="form-check-label" for="<?= $id ?>">
     <?= $label ?>
   </label>

app/templates/element/menuAction.php

@@ -49,7 +49,7 @@ class="<?= $actionsMenuClass; ?>">
     'data-bs-toggle' => 'dropdown',
     'aria-haspopup' => 'true',
     'aria-expanded' => 'false',
-    'title' => __d('field', 'action')
+    'aria-label' => __d('information', 'aria.label.actions')
   );
   print $this->Html->link(
     '<span class="' . $actionsIconClass . '" aria-hidden="true">' . $actionsIcon . '</span> ' . $actionsTitle,

app/templates/element/mveaModal.php

@@ -105,7 +105,7 @@
     template: `
       <Modal id="mvea":title="this.modal.title">
         <template v-slot:body="body">
-          <iframe :src="this.modal.url"/>
+          <iframe :src="this.modal.url" :aria-label="this.txt['information.aria.label.lightbox']"/>
         </template>
       </Modal>
     `

app/templates/element/peopleAutocomplete.php

@@ -74,7 +74,6 @@
       'value' => '',
       'type' => 'text',
       'class' => 'visually-hidden',
-      'label' => false,
     ]
   );
 ?>

app/templates/element/searchGlobal.php

@@ -42,7 +42,7 @@
   <span class="visually-hidden"><?= __d('operation','search') ?></span>
 </button>
 
-<div id="global-search" class="dropdown-menu">
+<div id="global-search" class="dropdown-menu" role="search">
   <?php
     print $this->Form->create(null, $options);
     print $this->Form->hidden('co_id', ['default' => $vv_cur_co->id]);
@@ -60,7 +60,8 @@
       [
         'id' => 'q', 
         'class' => $globalSearchInputClass, 
-        'placeholder' => __d('field','search.placeholder')
+        'placeholder' => __d('field','search.placeholder'),
+        'type' => 'search'
       ]
     );
     print $this->Form->button(

app/templates/element/subnavigation/navBar.php

@@ -56,7 +56,8 @@
   </div>
 
   <!-- Top-Level Subnavigation Tabs -->  
-  <nav id="cm-<?= $fullModelsName ?>-subnav-tabs" class="cm-subnav-tabs">
+  <nav id="cm-<?= $fullModelsName ?>-subnav-tabs" class="cm-subnav-tabs" 
+    aria-label="<?= __d('information','aria.label.subnavigation') ?>">
     <ul class="nav nav-tabs">
       <?= $this->element('subnavigation/tabList')?>
     </ul>
@@ -68,7 +69,8 @@
     // Check the nested elements if they allow navigation for this action
     && in_array($vv_action, $subNavAttributes['nested']['action'][$fullModelsName] ?? [], true)
   ): ?>
-  <nav id="cm-<?= $fullModelsName ?>-subnav-links" class="cm-subnav-links">
+  <nav id="cm-<?= $fullModelsName ?>-subnav-links" class="cm-subnav-links" 
+    aria-label="<?= __d('information','aria.label.subnavigation.links') ?>">
     <ul class="list-inline">
       <?= $this->element('subnavigation/inlineList')?>
     </ul>

app/templates/layout/default.php

@@ -184,7 +184,7 @@
       </header>
 
       <?php if(!$isActivePetition): ?>
-        <div id="top-bar">
+        <div id="top-bar" role="region" aria-label="<?= __d('information','aria.label.search') ?>">
           <?php if(!empty($vv_user) && !empty($vv_cur_co) && !$isCoSelectView): ?>
             <div id="top-controls">
               <div id="co-hamburger"><em class="material-symbols">menu</em></div>
@@ -217,7 +217,7 @@
           <?= $this->element('menuMain') ?>
         <?php endif ?>
 
-        <main id="main">
+        <main id="main" aria-label="main content">
           <div id="content">
             <div id="content-inner">
               <?php if(!$isActivePetition): ?>
@@ -242,7 +242,7 @@
     </div>
 
     <!-- loading animation -->
-    <div id="co-loading"><span></span><span></span><span></span></div>
+    <div id="co-loading" aria-hidden="true"><span></span><span></span><span></span></div>
 
     <!-- modal dialog boxes -->
     <?= $this->element('dialog') // used for confirmations ?>

app/templates/layout/iframe.php

@@ -114,7 +114,7 @@
   <body class="<?= $bodyClasses ?>" onload="jsOnLoadCallHooks()">
     <!-- Iframe layout -->
     <div id="comanage-iframe-wrapper">
-      <main id="main">
+      <main id="main" aria-label="<?= __d('information','aria.label.lightbox.main') ?>'">
         <div id="content">
           <!-- insert the page internal content -->
           <?= $this->fetch('content') ?>
@@ -123,7 +123,7 @@
     </div>
 
     <!-- loading animation -->
-    <div id="co-loading"><span></span><span></span><span></span></div>
+    <div id="co-loading" aria-hidden="true"><span></span><span></span><span></span></div>
 
     <!-- modal dialog box -->
     <?= $this->element('dialog') ?>

app/webroot/css/co-base.css

@@ -1154,8 +1154,7 @@ body.bulk-mode #bulk-actions {
   background-color: var(--cmg-color-bg-003);
   border: 1px solid var(--cmg-color-bg-005);
 }
-body.bulk-mode #bulk-actions legend {
-  width: auto;
+body.bulk-mode #bulk-actions label {
   font-size: 1.2em;
 }
 #bulk-action-select {
@@ -1983,6 +1982,19 @@ li[data-pc-section="emptymessage"] {
   margin-right: 0.5em;
   font-size: 1.4em;
 }
+#cm-people-picker .input.text label,
+.fields-people-autocomplete .field-info .input.text label {
+  /* This is to hide the field label - same as .visually-hidden in bootstrap */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 /* Vue transitions */
 .v-enter-active,
 .v-leave-active {

app/webroot/js/comanage/components/bulk/bulk-actions.js

@@ -180,7 +180,7 @@ export default {
     }
   },
   template: `
-    <legend>{{ this.legend }}</legend>
+    <label for="bulk-action-select">{{ this.legend }}</label>
     <select id="bulk-action-select" v-model="selected">
       <template v-if="bulkactions.length > 0">
         <option value="" disabled selected>{{ selectprompt }}</option>