Fix accessibility: make copy-to-clipboard icons "keyboard-operable" in HTML displays#34429
Open
DeaMariaLeon wants to merge 9 commits into
Open
Fix accessibility: make copy-to-clipboard icons "keyboard-operable" in HTML displays#34429DeaMariaLeon wants to merge 9 commits into
DeaMariaLeon wants to merge 9 commits into
Conversation
Member
Author
|
To reviewers: WAVE report with the 207 alerts cleared Goal of this PR: |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Reference Issues/PRs
Towards #34366
What does this implement/fix? Explain your changes.
This PR fixes accessibility issue "Device dependent event handler" found using WAVE.
These warnings show up with "mouse-only" handlers placed on elements that lack links or controls -- because they can't be reached with a keyboard.
For more information: Operable user interface and navigation
The copy-to-clipboard icon in the HTML displays can only be activated with a mouse.
(There are many other elements in the displays that are reached only with hover.)
Changed the
<i>to<button>since buttons are "keyboard-operable" by default.Also added
aria-label- to add an accessible name to the button.From the mdn docs:
An accessible name is the name of a user interface element; it is the text associated with an HTML element that provides users of assistive technology with a label for the element.
First time contributor introduction
AI usage disclosure
I used AI assistance for:
Any other comments?
Not ready for review
This PR seems to fix the issues I mentioned above: