Accessibility updates to form generation and datepicker (CFM-446) (#273)

COmanage · Jan 29, 2025 · ab758fc · ab758fc
1 parent 3b17742
commit ab758fc
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 46 deletions.
diff --git a/app/templates/ApiUsers/fields-generate.inc b/app/templates/ApiUsers/fields-generate.inc
@@ -31,12 +31,14 @@ print $this->element('form/listItem', [
   'arguments' => [
     'fieldName' => 'username',
     'status' => $vv_obj->username,
+    'labelIsTextOnly' => true
   ]
 ]);
 
 print $this->element('form/listItem', [
   'arguments' => [
     'fieldName' => 'api_key',
     'status' => $vv_api_key,
+    'labelIsTextOnly' => true
   ]
 ]);
diff --git a/app/templates/ApiUsers/fields.inc b/app/templates/ApiUsers/fields.inc
@@ -41,7 +41,6 @@ if($vv_action == 'add' || $vv_action == 'edit') {
 
   // We link to the "Generate" button on edit only
   $generateLink = [];
-  $labelIsTextOnly = false;
 
   if(!empty($vv_obj->id)) {
     $generateLink = [
@@ -54,16 +53,14 @@ if($vv_action == 'add' || $vv_action == 'edit') {
      'class' => 'provisionbutton nospin btn btn-primary btn-sm',
      'confirm' => __d('operation', 'api.key.generate.confirm')
     ];
-
-    $labelIsTextOnly = true;
   }
 
   print $this->element('form/listItem', [
     'arguments' => [
       'fieldName' => 'api_key',
       'status' => !empty($vv_obj->api_key) ? __d('enumeration', 'SetBooleanEnum.1') : __d('enumeration', 'SetBooleanEnum.0'),
       'link' => $generateLink,
-      'labelIsTextOnly' => $labelIsTextOnly
+      'labelIsTextOnly' => true
     ]
   ]);
 

diff --git a/app/templates/CoSettings/fields.inc b/app/templates/CoSettings/fields.inc
@@ -100,6 +100,7 @@ if($vv_action == 'edit') {
     print $this->element('form/listItem', [
     'arguments' => [
       'fieldName' => 'person_picker_display_fields',
+      'labelIsTextOnly' => true,
       'groupedControls' =>  [
         // each key is the fieldName of the control we are going to create
         'person_picker_email_address_type_id' => [

diff --git a/app/templates/EnrollmentFlows/columns.inc b/app/templates/EnrollmentFlows/columns.inc
@@ -41,8 +41,8 @@ $indexColumns = [
     'sortable' => true
   ],
   'description' => [
-    'sortable' => true,
-    'type' => 'echo'
+    'type' => 'echo',
+    'sortable' => true
   ]
 ];
 

diff --git a/app/templates/Groups/fields.inc b/app/templates/Groups/fields.inc
@@ -68,6 +68,7 @@ if($vv_action != 'add') {
           'fieldName' => 'owners_group_id',
           'status' => $vv_obj->owners_for_group->name,
           'link' => ['url' => ['controller' => 'groups', 'action' => 'edit', $vv_obj->owners_for_group->id]],
+          'labelIsTextOnly' => true
         ]
       ]);
     }
@@ -77,7 +78,8 @@ if($vv_action != 'add') {
       'arguments' => [
         'fieldName' => 'owners_group_id',
         'status' => $vv_obj->owners_group->name ?? '',
-        'link' => ['url' => ['controller' => 'groups', 'action' => 'edit', $vv_obj->owners_group_id]]
+        'link' => ['url' => ['controller' => 'groups', 'action' => 'edit', $vv_obj->owners_group_id]],
+        'labelIsTextOnly' => true
       ]
     ]);
   }

diff --git a/app/templates/Jobs/fields.inc b/app/templates/Jobs/fields.inc
@@ -65,26 +65,78 @@ if($vv_action == 'add') {
       'check' => true
     ]
   ]);
-
-  foreach([
-            'register_time',
-            'register_summary',
-            'assigned_host',
-            'assigned_pid',
-            'start_after_time',
-            'start_time',
-            'start_summary',
-            'finish_time',
-            'finish_summary',
-            'requeue_interval',
-            'retry_interval',
-          ] as $field) {
-    print $this->element('form/listItem', [
-      'arguments' => [
-        'fieldName' => $field,
-      ]
-    ]);
-  }
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'register_time'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'register_summary'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'register_time'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'assigned_host'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'assigned_pid'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'start_after_time'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'start_time'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'start_summary'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'finish_time'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'finish_summary'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'requeue_interval'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'retry_interval'
+    ]
+  ]);
 
   if(!empty($vv_obj->requeued_from_job->id)) {
     $link = [

diff --git a/app/templates/Servers/fields.inc b/app/templates/Servers/fields.inc
@@ -29,13 +29,19 @@
 // This view does not support read-only
 if($vv_action == 'add' || $vv_action == 'edit') {
   foreach (['description',
-             'status',
-             'plugin'
+             'status'
            ] as $field) {
     print $this->element('form/listItem', [
       'arguments' => [
         'fieldName' => $field
       ]]);
   }
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'plugin',
+      'labelIsTextOnly' => true
+    ]
+  ]);
 
 }
diff --git a/app/templates/element/form/nameDiv.php b/app/templates/element/form/nameDiv.php
@@ -76,9 +76,8 @@
 
 <div class="field-name <?= $classes ?>">
   <div class="field-title">
-    <!-- Will this work for accessibility? -->
     <?php if(
-             (isset($vv_field_arguments['labelIsTextOnly']) && !$vv_field_arguments['labelIsTextOnly'])
+             !isset($vv_field_arguments['labelIsTextOnly'])
              && $this->Field->getFieldType($fieldName) !== 'boolean'
            ):
       ?>
@@ -99,7 +98,7 @@
       ]);
     }
     ?>
-    </div>
+  </div>
   <?php if(isset($desc)): ?>
   <div class="field-desc">
     <?= $desc ?>

diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
@@ -112,6 +112,15 @@
     Array.prototype.slice.call(dateWidgetInputs).forEach( (el) => {
       el.parentNode.removeChild(el);
     });
+    // Also convert the mobile duet datepicker labels to spans (to avoid orphaned labels)
+    let duetMobileLabels = document.getElementsByClassName('duet-date__mobile-heading');
+    Array.prototype.slice.call(duetMobileLabels).forEach( (el) => {
+      let duetMobileLabelReplacement = document.createElement('span');
+      duetMobileLabelReplacement.classList.add('duet-date__mobile-heading');
+      duetMobileLabelReplacement.innerHTML = el.innerHTML;
+      el.replaceWith(duetMobileLabelReplacement);
+    });
+
 
     // TOP FILTER FORM
     // Send only non-empty fields in the form

diff --git a/app/templates/element/menuTop.php b/app/templates/element/menuTop.php
@@ -85,26 +85,26 @@ class="dropdown-toggle top-menu-button"
                     data-stateattr="<?= ApplicationStateEnum::ProfileDarkMode?>"
                     data-webroot="<?= $this->request->getAttribute('webroot') ?>"
                     data-username="<?= $vv_user['username'] ?? '' ?>"
-                    data-personid="<?= $vv_person_id ?? '' ?>"
+                    data-personid="<?= $vv_person_id ?? '' ?>">
                 <fieldset>
                   <legend>
                     <span class="material-symbols" aria-hidden="true">dark_mode</span>
                     <?= __d('menu','menu.darkmode'); ?>
                   </legend>
                   <div class="menu-grouping-group">
                     <?php foreach(DarkModesEnum::getConstHumanized() as $mode): ?>
-                    <?php $modeToLower = strtolower($mode); ?>
-                    <div class="form-check">
-                      <input type="radio"
-                             id="setting-darkmode-<?= $modeToLower ?>"
-                             name="setting-dark-mode"
-                             data-mode="<?= __d('menu', "menu.darkmode.{$modeToLower}") ?>"
-                             class="form-check-input"
-                        <?= $darkModeState === $modeToLower ? 'checked' : '' ?>>
-                      <label class="form-check-label" for="setting-darkmode-<?= $modeToLower ?>">
-                        <?= __d('menu', "menu.darkmode.{$modeToLower}") ?>
-                      </label>
-                    </div>
+                      <?php $modeToLower = strtolower($mode); ?>
+                      <div class="form-check">
+                        <input type="radio"
+                               id="setting-darkmode-<?= $modeToLower ?>"
+                               name="setting-dark-mode"
+                               data-mode="<?= __d('menu', "menu.darkmode.{$modeToLower}") ?>"
+                               class="form-check-input"
+                          <?= $darkModeState === $modeToLower ? 'checked' : '' ?>>
+                        <label class="form-check-label" for="setting-darkmode-<?= $modeToLower ?>">
+                          <?= __d('menu', "menu.darkmode.{$modeToLower}") ?>
+                        </label>
+                      </div>
                     <?php endforeach; ?>
                   </div>
                 </fieldset>

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -2461,6 +2461,7 @@ html.dark-mode .btn-default:active {
 }
 /*Bootstrap badge*/
 .badge {
+  font-size: 0.8em; /* as small as we can go and maintain WCAG */
   font-weight: normal;
   height: min-content;
   margin-top: auto;

diff --git a/app/webroot/js/comanage/components/common/modal.js b/app/webroot/js/comanage/components/common/modal.js
@@ -52,7 +52,9 @@ export default {
                     @click="reload"
                     className="btn-close nospin"
                     data-bs-dismiss="modal"
-                    :aria-label="txt.close"></button>
+                    :aria-label="this.txt['operation.close']">
+              <span class="visually-hidden">{{ this.txt['operation.close'] }}</span>
+            </button>
           </div>
           <div id="modal-text" className="modal-body">
             <slot name="body"/>