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

Add expanded semantics to radioSelect buttons

Browse Source 
All buttons that open or close a region of the
component should have aria-expanded attributes to
show:
- they have that control
- the state of the region
This commit is contained in:
Tom Byers
2021-01-19 14:09:51 +00:00
parent 81b576acad
commit e7291ffd51
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/radioSelect.js
View File

@@ -17,7 +17,7 @@
{{/showNowAsDefault}}
<div class="radio-select__column">
{{#categories}}
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--category' value='{{.}}' />
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--category' aria-expanded="false" value='{{.}}' />
{{/categories}}
</div>
`),
@@ -37,7 +37,7 @@
<label for="{{id}}">{{label}}</label>
</div>
{{/choices}}
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--done' value='Done' />
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--done' aria-expanded='true' value='Done' />
</div>
`),
'chosen': Hogan.compile(`
@@ -58,7 +58,7 @@
{{/choices}}
</div>
<div class="radio-select__column">
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--reset' value='Choose a different time' />
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--reset' aria-expanded='false' value='Choose a different time' />
</div>
`)
};

9
tests/javascripts/radioSelect.test.js
View File

@@ -179,6 +179,14 @@ describe('RadioSelect', () => {
});
test("each button's semantics should show it controls another region and that region is collapsed", () => {
categoryButtons.forEach(btn => {
expect(btn.getAttribute('aria-expanded')).toEqual('false');
});
});
});
});
@@ -241,6 +249,7 @@ describe('RadioSelect', () => {
expect(button).not.toBeNull();
expect(button.getAttribute('value')).toEqual('Done');
expect(button.getAttribute('aria-expanded')).toEqual('true');
});