Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#1905] Fixed a11y issue with narration of checkboxes. #2010

Merged
merged 1 commit into from Nov 26, 2019

Conversation

tonyanziano
Copy link
Contributor

#1905

===

Made minor changes to the <Checkbox /> component DOM structure.

The previous structure wrapped the <input> in a <label> element, and also attached an aria-label attribute to the input. This caused screen readers to narrate both the aria-label and the text within the label element.

I have changed the outer element to be a <div> with a role or "presentation" so that the screen reader ignores it, and I've wrapped the inner label text in a <label> tag so that the component follows the standard semantic structure of a labelled checkbox input. I've also removed the aria-label attribute from the <input> element, because the screen reader should know that the <label> tag describes the <input>.

I've tested this on both Windows, and Mac, and they read correctly.

Before:

checks-before

After:

checks-after

@coveralls
Copy link

Coverage Status

Coverage increased (+0.009%) to 68.67% when pulling 105720d on toanzian/acc-#1905 into 87af526 on master.

@tonyanziano tonyanziano merged commit cb08d7d into master Nov 26, 2019
@tonyanziano tonyanziano deleted the toanzian/acc-#1905 branch November 26, 2019 00:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants