Fix accessibility issues #516
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The Lookbook UI had a few accessibility issues flagged by [axe], an accessibility testing tool: Problem: Buttons must have discernible text Element: Button that opens the debug menu in the app header Ref: https://dequeuniversity.com/rules/axe/4.6/button-name Solution: Provide a tooltip, which is used as the button’s accessible name Problem: IDs of active elements must be unique Element: The two ‘show drawer’ buttons Ref: https://dequeuniversity.com/rules/axe/4.6/duplicate-id-active Solution: Give each button a unique ID Problem: Zooming and scaling must not be disabled Ref: https://dequeuniversity.com/rules/axe/4.6/meta-viewport Solution: Remove `maximum-scale=1.0` and `user-scalable=0` from the `viewport` metadata [axe]: https://www.deque.com/axe
✅ Deploy Preview for lookbook-docs canceled.
|
|
Hey @tysongach, many thanks for this and so sorry for the embarassingly slow reply. I know Lookbook's accessibility is pretty poor in places so I really appreciate PRs like this one. I'll merge it in now and the changes will be included in the next release. Thanks again! |
|
No problem at all, @allmarkedup! Thanks for merging. I’m happy to help with a11y issues - feel free to open an Issue with any that you’re aware of, ping me, and I’ll take a look. Thanks for all your work on this project! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The Lookbook UI had a few accessibility issues flagged by axe, an accessibility testing tool:
Problem: Buttons must have discernible text
Element: Button that opens the debug menu in the app header
Ref: https://dequeuniversity.com/rules/axe/4.6/button-name
Solution: Provide a tooltip, which is used as the button’s accessible name
Problem: IDs of active elements must be unique
Element: The two ‘show drawer’ buttons
Ref: https://dequeuniversity.com/rules/axe/4.6/duplicate-id-active
Solution: Give each button a unique ID
Problem: Zooming and scaling must not be disabled
Ref: https://dequeuniversity.com/rules/axe/4.6/meta-viewport
Solution: Remove
maximum-scale=1.0anduser-scalable=0from theviewportmetadata