-
-
Notifications
You must be signed in to change notification settings - Fork 9.9k
A11y: Tabs select when navigating with VoiceOver #8063
Copy link
Copy link
Closed
Labels
bugAn error in the Docusaurus core causing instability or issues with its executionAn error in the Docusaurus core causing instability or issues with its executiondomain: a11yRelated to accessibility concerns of the default themeRelated to accessibility concerns of the default themegood first issueIf you are just getting started with Docusaurus, this issue should be a good place to begin.If you are just getting started with Docusaurus, this issue should be a good place to begin.hacktoberfeststatus: accepting prThis issue has been accepted, and we are looking for community contributors to implement thisThis issue has been accepted, and we are looking for community contributors to implement this
Description
Metadata
Metadata
Assignees
Labels
bugAn error in the Docusaurus core causing instability or issues with its executionAn error in the Docusaurus core causing instability or issues with its executiondomain: a11yRelated to accessibility concerns of the default themeRelated to accessibility concerns of the default themegood first issueIf you are just getting started with Docusaurus, this issue should be a good place to begin.If you are just getting started with Docusaurus, this issue should be a good place to begin.hacktoberfeststatus: accepting prThis issue has been accepted, and we are looking for community contributors to implement thisThis issue has been accepted, and we are looking for community contributors to implement this
Type
Fields
Give feedbackNo fields configured for issues without a type.
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clearoryarn clearcommand.rm -rf node_modules yarn.lock package-lock.jsonand re-installing packages.Description
When using VoiceOver on either iOS or macOS, navigating forward activates the next tab. This makes it difficult to access the actual tab panel content of a given tab.
Reproducible demo
https://docusaurus.io/docs/markdown-features/tabs
Steps to reproduce
For iOS VoiceOver:
macOS VoiceOver has the same steps, but replace "Swipe right" with "Press VO (control + option) + right arrow"
Expected behavior
User can navigate through the tabs to read through the tabs to activate or navigate forward to the tab panel content. The tab has to be activated by the user before it switches. This behavior works as expected on the ARIA authoring practices guide example for automatic tabs.
Actual behavior
When navigating with VoiceOver on, the tab switches automatically when reading through the tabs. Navigating with VoiceOver will move focus when it moves to a focusable element. But, because the Tabs code triggers a tab change on tab focus, this results in the tab also activating when reading the new tab.
Example of behavior on the ARIA example site, where I'm navigating around and the tab panel doesn't change until I select it:
Example of behavior on the Docusaurus site, where navigating around also selects the tab and updates the tab panel:
Your environment
Self-service