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

tonyanziano commented Nov 25, 2019

#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

This comment has been minimized.

Copy link

coveralls commented Nov 26, 2019

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
2 checks passed
2 checks passed
Emulator-CI-PR #92341 succeeded
Details
license/cla All CLA requirements met.
Details
@tonyanziano tonyanziano deleted the toanzian/acc-#1905 branch Nov 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.