Skip to content

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

Merged
merged 1 commit into from
Jan 29, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app/templates/ApiUsers/fields-generate.inc
Original file line number Diff line number Diff line change
Expand Up @@ -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
]
]);
5 changes: 1 addition & 4 deletions app/templates/ApiUsers/fields.inc
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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
]
]);

Expand Down
1 change: 1 addition & 0 deletions app/templates/CoSettings/fields.inc
Original file line number Diff line number Diff line change
Expand Up @@ -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' => [
Expand Down
4 changes: 2 additions & 2 deletions app/templates/EnrollmentFlows/columns.inc
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ $indexColumns = [
'sortable' => true
],
'description' => [
'sortable' => true,
'type' => 'echo'
'type' => 'echo',
'sortable' => true
]
];

Expand Down
4 changes: 3 additions & 1 deletion app/templates/Groups/fields.inc
Original file line number Diff line number Diff line change
Expand Up @@ -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
]
]);
}
Expand All @@ -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
]
]);
}
Expand Down
92 changes: 72 additions & 20 deletions app/templates/Jobs/fields.inc
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
10 changes: 8 additions & 2 deletions app/templates/Servers/fields.inc
Original file line number Diff line number Diff line change
Expand Up @@ -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
]
]);

}
5 changes: 2 additions & 3 deletions app/templates/element/form/nameDiv.php
Original file line number Diff line number Diff line change
Expand Up @@ -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'
):
?>
Expand All @@ -99,7 +98,7 @@
]);
}
?>
</div>
</div>
<?php if(isset($desc)): ?>
<div class="field-desc">
<?= $desc ?>
Expand Down
9 changes: 9 additions & 0 deletions app/templates/element/javascript.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
26 changes: 13 additions & 13 deletions app/templates/element/menuTop.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 ?? '' ?>">
Ioannis marked this conversation as resolved.
Show resolved Hide resolved
<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>
Expand Down
1 change: 1 addition & 0 deletions app/webroot/css/co-base.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 3 additions & 1 deletion app/webroot/js/comanage/components/common/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down