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

[a11y] Fix dropdown aria-label and ID #307

Merged
merged 2 commits into from
Aug 13, 2020
Merged

Conversation

ipc103
Copy link
Contributor

@ipc103 ipc103 commented Aug 13, 2020

After upgrading to the WCAG 2.1 standard in our Cypress test, there was an issue raised with the dropdown component's aria-label. The 2.1 standard includes a rule that the text of an element should be contained within the aria-label https://dequeuniversity.com/rules/axe/3.5/label-content-name-mismatch?application=axeAPI The aria-label I was using on the component was too generic. I tested this using a screen reader and actually found that it worked well without the aria-label, because the role and haspopup attributes made it reasonably clear the intention. More user testing would be required to be sure, but for now I'd rather have less aria information than incorrect information.

In addition, I removed the id from the Dropdown. There are some places where we render multiple Dropdown components, which leads to the id not being unique.

Copy link
Contributor

@michaeljaltamirano michaeljaltamirano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@ipc103 ipc103 merged commit b622a3d into master Aug 13, 2020
@ipc103 ipc103 deleted the a11y/update-dropdown-info branch August 13, 2020 21:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants