darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-26 17:24:23 -04: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}} {{/showNowAsDefault}}
<div class="radio-select__column"> <div class="radio-select__column">
{{#categories}} {{#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}} {{/categories}}
</div> </div>
`), `),
@@ -37,7 +37,7 @@
<label for="{{id}}">{{label}}</label> <label for="{{id}}">{{label}}</label>
</div> </div>
{{/choices}} {{/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> </div>
`), `),
'chosen': Hogan.compile(` 'chosen': Hogan.compile(`
@@ -58,7 +58,7 @@
{{/choices}} {{/choices}}
</div> </div>
<div class="radio-select__column"> <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> </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).not.toBeNull();
expect(button.getAttribute('value')).toEqual('Done'); expect(button.getAttribute('value')).toEqual('Done');
expect(button.getAttribute('aria-expanded')).toEqual('true');
}); });