A11y: Tabs select when navigating with VoiceOver

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

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:

1. Turn on VoiceOver
2. Open a page with the Tabs component
3. Swipe right through the content to get to the tabs
4. Swipe right through the tabs

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

• Public source code: https://github.com/facebook/docusaurus/blob/main/website/docs/guides/markdown-features/markdown-features-tabs.mdx
• Public site URL: https://docusaurus.io/docs/markdown-features/tabs
• Docusaurus version used: 2.1.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Safari 15.6.1
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): iOS 15.6.1 and macOS 12.5.1

Self-service

• I’d be willing to fix this bug myself.

[noobyogi0010]

@Josh-Cena I’ve worked on a similar issue. Let me try resolving it. Thanks

[slorber]

Good first issue

This issue should be relatively easy to solve so I’m willing to delegate it to an external contributor looking to contribute.

Disclaimer

We, project maintainers, have limited time and need to protect it.

We kindly ask you to invest your time, trying to be autonomous and proactive instead of expecting us to guide you step-by-step.

• Don’t expect us to teach you the basics of Docusaurus: if you want to contribute, you have to get familiar with the project first, reading the official doc
• Don’t claim the issue and then ghost us (like it often happens)
• Please at least submit a PR, and only then we assign the issue to you
• Don’t ask for advice even before giving it a try and submitting a failing PR
• Maybe it’s not a good issue for you, and you should simply move on