From ab758fcd1e54285da46ff86a19b5578f6dcd3bd0 Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Wed, 29 Jan 2025 09:18:27 -0500 Subject: [PATCH] Accessibility updates to form generation and datepicker (CFM-446) (#273) --- app/templates/ApiUsers/fields-generate.inc | 2 + app/templates/ApiUsers/fields.inc | 5 +- app/templates/CoSettings/fields.inc | 1 + app/templates/EnrollmentFlows/columns.inc | 4 +- app/templates/Groups/fields.inc | 4 +- app/templates/Jobs/fields.inc | 92 +++++++++++++++---- app/templates/Servers/fields.inc | 10 +- app/templates/element/form/nameDiv.php | 5 +- app/templates/element/javascript.php | 9 ++ app/templates/element/menuTop.php | 26 +++--- app/webroot/css/co-base.css | 1 + .../js/comanage/components/common/modal.js | 4 +- 12 files changed, 117 insertions(+), 46 deletions(-) diff --git a/app/templates/ApiUsers/fields-generate.inc b/app/templates/ApiUsers/fields-generate.inc index 1656cc4d7..b33f1ed3e 100644 --- a/app/templates/ApiUsers/fields-generate.inc +++ b/app/templates/ApiUsers/fields-generate.inc @@ -31,6 +31,7 @@ print $this->element('form/listItem', [ 'arguments' => [ 'fieldName' => 'username', 'status' => $vv_obj->username, + 'labelIsTextOnly' => true ] ]); @@ -38,5 +39,6 @@ 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 index e8cba5cac..1e23c9b87 100644 --- 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,8 +53,6 @@ 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', [ @@ -63,7 +60,7 @@ if($vv_action == 'add' || $vv_action == 'edit') { '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 index d94aa9049..562030eec 100644 --- 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 index c11bb4537..5ea6b3a24 100644 --- 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 index fb408df14..36c105db9 100644 --- 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 index f18d6e7ff..20b6eeca1 100644 --- 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 index 0e27460e0..76054295d 100644 --- 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 index db9774612..c05ce6b2f 100644 --- a/app/templates/element/form/nameDiv.php +++ b/app/templates/element/form/nameDiv.php @@ -76,9 +76,8 @@
- Field->getFieldType($fieldName) !== 'boolean' ): ?> @@ -99,7 +98,7 @@ ]); } ?> -
+
diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php index c4a5ce451..0e89b15de 100644 --- 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 index 40ddfa9da..611543fa7 100644 --- a/app/templates/element/menuTop.php +++ b/app/templates/element/menuTop.php @@ -85,7 +85,7 @@ class="dropdown-toggle top-menu-button" data-stateattr="" data-webroot="request->getAttribute('webroot') ?>" data-username="" - data-personid="" + data-personid="">
@@ -93,18 +93,18 @@ class="dropdown-toggle top-menu-button"
- -
- " - class="form-check-input" - > - -
+ +
+ " + class="form-check-input" + > + +
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index fdcf0c924..46306fd1e 100644 --- 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 index 86545eb01..207ea6a50 100644 --- 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"> + :aria-label="this.txt['operation.close']"> + +