search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

Tabs cannot be accessed via arrowing with NVDA/Firefox #5154

Open selfthinker opened 4 months ago

selfthinker commented 4 months ago

Description of the issue

When using NVDA with Firefox, the individual tabs in the Tabs component cannot be accessed via arrowing. (They cannot be accessed via tabbing either, but the that is expected behaviour.)

This is the same issue we encountered with the navigation component. It's due to a vendor bug and can be fixed by not using display: inline-block on the tabs.

This issue also happens with older versions of Chrome. It was fixed in Chrome version 125.

This can be overcome by using the tab key or switching to focus/forms mode to get to the individual tabs.

Steps to reproduce the issue

  1. Use Firefox and NVDA
  2. Open https://design-system.service.gov.uk/components/tabs/default/
  3. Use the down arrow key to get to the first tab
  4. Use the down arrow key again

Actual vs expected behaviour

Actual behaviour

When using the down arrow key (as per step 3 above), it reads out all of the tabs:

Tab selected past day, tab past day, tab past month, tab past year

And when using it again (as per step 4), it skips all the other tabs straight to the heading and reads out:

Heading level 2, past day

Expected behaviour

When using NVDA with Chrome (from version 125 onwards) or JAWS with Firefox or Chrome it shows the expected behaviour.

When using the down arrow key (as per step 3), it reads out only the first tab:

Tab selected past day

And when using it again (as per step 4), it reads out the next tab:

Tab past week

Environment (where applicable)