darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-08 18:34:24 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add ARIA attributes from Design System component

Browse Source 
This commit copies the same ARIA attributes that are added to the
character count component[1] in the GOV.UK Design System.

This means that screen reader users will hear the count message when
they stop typing.

1. https://design-system.service.gov.uk/components/character-count/
This commit is contained in:
Chris Hill-Scott
2021-01-07 14:30:48 +00:00
parent 3fdaa29f35
commit c3b6c03411
5 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
tests/javascripts/updateStatus.test.js
View File

@@ -44,7 +44,8 @@ describe('Update content', () => {
document.body.innerHTML = `
<form>
<input type="hidden" name="csrf_token" value="abc123" />
<textarea name="template_content" id="template_content">Content of message</textarea>
<label for="template_content" id="template-content-label">Template content<label>
<textarea name="template_content" id="template_content" aria-described-by="template-content-label">Content of message</textarea>
</form>
<div data-module="update-status" data-updates-url="${updatesURL}" data-target="template_content">
Initial content
@@ -65,6 +66,24 @@ describe('Update content', () => {
});
test("It should add attributes to the elements", () => {
window.GOVUK.modules.start();
expect(
document.querySelectorAll('[data-module=update-status]')[0].id
).toEqual(
"update-status"
);
expect(
document.getElementById('template_content').getAttribute('aria-described-by')
).toEqual(
"template-content-label update-status"
);
});
test("It should make requests to the URL specified in the data-updates-url attribute", () => {
window.GOVUK.modules.start();