Describe example textbox by hint not label

The `<textarea>` should have its existing `aria-describedby` point to a
hint. Pointing to the label is bad practice as it would duplicate the
accessible name into the accessible description. It’s good not to have
that in the tests in case anyone copies the code elsewhere.
This commit is contained in:
Chris Hill-Scott
2021-01-08 12:53:06 +00:00
parent 55c0e566a2
commit 6f514ef019

View File

@@ -45,7 +45,8 @@ describe('Update content', () => {
<form>
<input type="hidden" name="csrf_token" value="abc123" />
<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>
<span id="example-hint-text">Example hint text</span>
<textarea name="template_content" id="template_content" aria-described-by="example-hint-text">Content of message</textarea>
</form>
<div data-module="update-status" data-updates-url="${updatesURL}" data-target="template_content">
Initial content
@@ -79,7 +80,7 @@ describe('Update content', () => {
expect(
document.getElementById('template_content').getAttribute('aria-described-by')
).toEqual(
"template-content-label update-status"
"example-hint-text update-status"
);
});