Tabs: Improved accessibility #23
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
|
✔️ Deploy Preview for css-ui ready! 🔨 Explore the source changes: 209f7fc 🔍 Inspect the deploy log: https://app.netlify.com/sites/css-ui/deploys/6186c8260553080008b4e2ed 😎 Browse the preview: https://deploy-preview-23--css-ui.netlify.app |
|
It seems like a big step forward. Thank you again, great job. Really appreciated your attention to details. As for the accordion, do you think there's something we could specify in the documentation about accessibility? 👍 |
zetareticoli
approved these changes
Nov 8, 2021
zetareticoli
added a commit
that referenced
this pull request
Nov 11, 2021
* Fix: Accordion focus on closed panel child element (#14) * Fix: Accordion focus on closed tab child element * Updated accordion documentation * Added generated file Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com> * Feature/#10 modal focus trap (#17) * Added role and aria-modal attributes, adde x icon to close #10 * Added aria-labelledby #10 * Added tabindex to close button #10 * Added more documentation about Focus Trap and Page Scroll #10 * Change modal template #10 * Changed blockquote style #10 * Better doc #10 * Fixed aria-labelledby attribute #10 * Changed styel * Feature/#7 components docs (#18) * Added more content to Tabs doc #7 * Changed lead color #7 * Added support for :focus event on tooltips #7 * Changed Tooltips docs #7 * Show ring on focused tab panel's label (#20) Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com> * Removed container parent maintaining accessibility (#24) Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com> * Added focus ring on focused accordion item's label (#25) Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com> * Improved tabs accessibility (#23) Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com> * Removed accordion container from HTML preview #24 * Added information to CHANGELOG * Added upcoming release info * Added accessibility info for tabs * Bumped lib version for npm package * Fixed tabs accessibility doc Co-authored-by: Omar Muscatello <7016897+omaxel@users.noreply.github.com> Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com>
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.
#22
I have aligned the tabs implementation to the one specified in this (MDN) and this (WAI-ARIA) pages.
We need JavaScript to be totally compliant, but I think we have good results here. I have tested the component using ChromeVox and NVDA screen reader and I got the expected results.
Inspecting the page with the Accessibility feature of Chrome DevTools, the elements are presented as expected.
Also, using the axe DevTools I executed a scan and I got just one warning with low user impact. You can find more details here. It's complaining about using
role=tabon aradioelement. We don't have any choice without using JavaScript since we don't have "memory" in CSS. That's the same reason for which I didn't use thebuttonelement to open a tab as suggested by the documentation.