Tabs cannot be accessed via arrowing with NVDA/Firefox

[selfthinker]

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)

• Operating system: Windows 10 Pro
• Browser: Firefox
• Browser version: 127 (latest), although it's in older versions as well and in older Chrome versions
• Screen reader: NVDA
• Screen reader version: 2024.2
• GOV.UK Frontend Version: latest (the one that's deployed on the GOV.UK Design System website)