darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-01 14:41:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix aria on collapsed checkboxes fieldset

Browse Source 
The fieldset that wraps the collapsible checkboxes
has an aria-describedby to make the summary its
accessible description.

This needs to point to the id of the summary but
the summary didn't have one.

These changes add the id and fix a fixture in the
tests for this module.
This commit is contained in:
Tom Byers
2021-02-25 14:00:16 +00:00
parent 82318387de
commit 7b67fc5f32
2 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/collapsibleCheckboxes.js
View File

@@ -20,12 +20,14 @@
}[field] || `No ${field}s`)
};
Summary.prototype.addContent = function() {
const $hint = this.module.$formGroup.find('.govuk-hint');
this.$text = $(`<p class="selection-summary__text" />`);
if (this.fieldLabel === 'folder') { this.$text.addClass('selection-summary__text--folders'); }
this.$el.attr('id', $hint.attr('id'));
this.$el.append(this.$text);
this.module.$formGroup.find('.govuk-hint').remove();
$hint.remove();
};
Summary.prototype.update = function(selection) {
let template;

23
tests/javascripts/collapsibleCheckboxes.test.js
View File

@@ -42,10 +42,10 @@ describe('Collapsible fieldset', () => {
document.body.innerHTML =
`<div class="selection-wrapper" data-module="collapsible-checkboxes" data-field-label="folder">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" id="folder_permissions">
<fieldset class="govuk-fieldset" id="folder_permissions" aria-describedby="users_with_permission-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
Folders this team member can see
<span class="govuk-hint">
<span class="govuk-hint" id="users_with_permission-hint">
<div class="selection-summary" role="region" aria-live="polite"></div>
</span>
</legend>
@@ -144,12 +144,29 @@ describe('Collapsible fieldset', () => {
});
test("removes the hint", () => {
test("the hint is removed", () => {
expect(document.querySelector('.govuk-hint')).toBeNull();
});
describe("the live region that was inside the hint", () => {
test("is moved above the fieldset", () => {
expect(fieldset.previousElementSibling.matches('.selection-summary')).toBe(true);
});
test("has an id matching the aria-describedby on the fieldset", () => {
const fieldsetDescribedby = fieldset.getAttribute('aria-describedby');
expect(fieldset.previousElementSibling.getAttribute('id')).toEqual(fieldsetDescribedby);
});
});
});
test('has the right summary text when started with no checkboxes selected', () => {