darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 03:13:42 -05:00
Code Issues Packages Projects Releases Wiki Activity

Make all control buttons aria-expanded=false

Browse Source 
Suggested by the Digital Accessibility Centre in
their report. Giving these buttons
aria-expanded=false indicates:
- they control a section on the page
- that section is collapsed (and so clicking the
  button will open it)
This commit is contained in:
Tom Byers
2020-09-20 21:20:51 +01:00
parent 3182fc7668
commit 099b42b31e
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/templateFolderForm.js
View File

@@ -260,8 +260,10 @@
this.nothingSelectedButtons = $(`
<div id="nothing_selected">
<div class="js-stick-at-bottom-when-scrolling">
<button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="add-new-template">New template</button>
<button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="add-new-folder">New folder</button>
<button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="add-new-template" aria-expanded="false">
New template
</button>
<button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="add-new-folder" aria-expanded="false">New folder</button>
<div class="template-list-selected-counter">
<span class="template-list-selected-counter__count" aria-hidden="true">
${this.selectionStatus.default}
@@ -274,10 +276,10 @@
this.itemsSelectedButtons = $(`
<div id="items_selected">
<div class="js-stick-at-bottom-when-scrolling">
<button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="move-to-existing-folder">
<button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="move-to-existing-folder" aria-expanded="false">
Move<span class="govuk-visually-hidden"> selection to folder</span>
</button>
<button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="move-to-new-folder">Add to new folder</button>
<button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
<div class="template-list-selected-counter" aria-hidden="true">
<span class="template-list-selected-counter__count" aria-hidden="true">
${this.selectionStatus.selected(1)}

4
tests/javascripts/templateFolderForm.test.js
View File

@@ -261,6 +261,8 @@ describe('TemplateFolderForm', () => {
expect(document.querySelector('button[value=add-new-template]')).not.toBeNull();
expect(document.querySelector('button[value=add-new-folder]')).not.toBeNull();
expect(document.querySelector('button[value=add-new-template]').getAttribute('aria-expanded')).toEqual('false');
expect(document.querySelector('button[value=add-new-folder]').getAttribute('aria-expanded')).toEqual('false');
expect(visibleCounter).not.toBeNull();
});
@@ -544,6 +546,8 @@ describe('TemplateFolderForm', () => {
expect(formControls.querySelector('button[value=move-to-new-folder]')).not.toBeNull();
expect(formControls.querySelector('button[value=move-to-existing-folder]')).not.toBeNull();
expect(formControls.querySelector('button[value=move-to-new-folder]').getAttribute('aria-expanded')).toEqual('false');
expect(formControls.querySelector('button[value=move-to-existing-folder]').getAttribute('aria-expanded')).toEqual('false');
});