Fixed EuiBetaBadge a11y #2559
Merged
Fixed EuiBetaBadge a11y #2559
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
added 2 commits
November 21, 2019 11:53
Fix for a11y by making the span focusable and adds focus ring for visual indicator
19 tasks
chandlerprall
approved these changes
Nov 25, 2019
myasonik
approved these changes
Nov 25, 2019
There was a problem hiding this comment.
I thought on this PR for a long while... Probably longer than I needed to...
Just adding a tabIndex to a non-interactive element doesn't sit right but I couldn't figure out a smarter solution and it largely works, so, ultimately a 👍 from me. It definitely improves on the current state!
Ignoring the semantics of it, the one practical issue I came across is when navigating the page with a screen reader (not jumping around with TAB), the description isn't read out and nothing tells me that this element is something special so I should focus on it.
elizabetdev
approved these changes
Nov 26, 2019
|
@myasonik Yeah it's more of a limitation of our basic tooltip behavior than specific to EuiBetaBadge that we should address at some point. Thanks! |
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.
Summary
Since EuiBetaBadge's don't actually have any clickability to them, they were ignored from the tab order and therefore, the description which only shows on hover could never be read by a screenreader. This PR basically just adds
tab-index=0to the element putting it into the focus order of the DOM. We handle this the same way for EuiIconTip.This also then required moving the DOM order of the beta badge in EuiCard so that it didn't come before the title of the card.
Checklist
[ ] Checked in dark mode[ ] Checked in mobile[ ] Props have proper autodocs[ ] Added documentation examples[ ] Added or updated jest tests[ ] Checked for breaking changes and labeled appropriately