Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JAWS tablist functionality does not work with tab component #4735

Open
abbott567 opened this issue Mar 21, 2022 · 2 comments
Open

JAWS tablist functionality does not work with tab component #4735

abbott567 opened this issue Mar 21, 2022 · 2 comments
Labels
accessibility concern Bug, feature request or question about the accessibility of a portion of a product (not a WCAG fail) 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) tabs

Comments

@abbott567
Copy link

Description of the issue

There is a bug with the tab component when you use the tablist feature of JAWS.

The tablist feature allows JAWS users to pull all of the tabs on the page in one list and activate them from there, rather than navigating to them on the page itself via the TAB and arrow keys.

When you view the tabs in the tablist, and you choose one, the tabslist closes and the focus is moved to the tab you chose from the list. At this point the tab is not activated the way it would be if you click on it or use the arrow keys to get to it. It has keyboard focus, but it has not been activated. JAWS then incorrectly announces that you can press SPACE to activate the tab, but you cannot, which is super confusing.

We've tried testing in other screen readers, such as Voiceover using the rotor feature, it behaves similarly in that it moves the focus but does not activate the tab. However, with Voiceover, it tells you specifically to use CONTROL + OPTION + SPACE rather than just SPACE, which does actually work.

It appears JAWS has certain expectations from a link, even when it's using role="tab", and that is that you can activate it using SPACE, but the links on the GDS tab component do not activate this way like regular links.

We tested the Inclusive components - tabbed interfaces example and found the same issues, so we can only assume the GDS component has inherited these problems when using it as inspiration. By using the tablist you can actually break the original component to show multiple tab sections at once as it seems to bypass the expected Javascript event triggers which is highlighted in the following screenshot. The GDS component does not seem to have inherited this issue though, thankfully.

Example of multiple tab sections being open at once. Both section 1 and section 4 are open and their tabs highlighted.

We also tested the example of tabs with automatic activation by W3C, and this one seems to behave correctly. When JAWS says you can use SPACE, you can, and it just works.

Steps to reproduce the issue

  1. Press JAWS + F3 to bring up the rotor.
  2. Navigate to tabslist.
  3. Choose a tab from the list
  4. Press SPACE when JAWS tells you to

Actual vs expected behaviour

When JAWS says press SPACE to activate the tab, we expect to be able to press SPACE to activate it. But you cannot. When you press SPACE nothing happens.

Environment (where applicable)

  • Operating system: Windows 10
  • Browser: Microsoft Edge
  • Browser version: 96.0.1
  • JAWS Version: 2021
@abbott567 abbott567 added awaiting triage Needs triaging by team 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) labels Mar 21, 2022
@querkmachine querkmachine added tabs accessibility concern Bug, feature request or question about the accessibility of a portion of a product (not a WCAG fail) and removed awaiting triage Needs triaging by team labels Apr 26, 2023
@36degrees 36degrees transferred this issue from alphagov/govuk-design-system Feb 5, 2024
@querkmachine
Copy link
Member

I've given this a re-test in updated versions of Edge and JAWS (Edge 127, JAWS 2023.2303.144) and could no longer reproduce this issue as described. Focusing a tab via the VirtualHTMLFeatures menu and pressing the space bar changed the active tab as intended.

Likewise, I could not reproduce the issue described on the Inclusive Components tabs component.

As we haven't done anything to the component to resolve this, my assumption is that past versions of JAWS handled this in a weird way which has since been resolved.

It'd be good to have this looked at by someone else to verify if this is the case.

@querkmachine
Copy link
Member

@selfthinker Sorry for the ping, but you might be best placed to check if this bug still exists.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility concern Bug, feature request or question about the accessibility of a portion of a product (not a WCAG fail) 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) tabs
Projects
None yet
Development

No branches or pull requests

2 participants