Hidden menu buttons reachable with VoiceOver on iPadOS

[selfthinker]

What

When using VoiceOver on iPadOS the hidden menu buttons in the header and service nav are all still reachable and can be activated in desktop view. That's the general "Menu" button as well as the buttons after each of the main navigation items. When you activate the main nav buttons they even visibly open the sub menu that shouldn't be reachable in the desktop view. Those buttons can also be explored by touch.

I don't have a recent enough iOS version but a user confirmed it's happening on iOS as well. And I can confirm it does not happen with TalkBack on Android or NVDA.

Screenshot of the hidden "Colour" button being highlighted and activated with the Colour sub menu open underneath the service nav:

This also happens with the navigation on the Design System website and with the navigation with in the Service Navigation component and Header component in GOV.UK Frontend, so was inherited from that.
The two relevant issues in the other repos:

• Hidden menu buttons reachable with VoiceOver on iPadOS govuk-design-system#4879
• Service Navigation's mobile menu button is listed on Voice Over rotor's Form control when hidden govuk-frontend#6294

The fix is known (add aria-hidden to where hidden is used) but we need to wait for the fix in GOV.UK Frontend and might want to wait for the fix for the DS website.

Why

Hidden things shouldn't be reachable.
It's confusing when there are multiple ways how the navigation works.

Who needs to work on this

Developers

Who needs to review this

Accessibility specialist

Done when

• [ ]

[selfthinker]

I have now created an equivalent issue for the GOV.UK Design System website as well. As part of that I tested in a few more screen readers, none of which had that same issue.

I think we can ignore this issue for this cycle. We should preferably work on fixing it on the DS website first and then apply the fix here later.

[selfthinker]

@romaricpascal found a fix for this (in alphagov/govuk-design-system#4892):
Simply add aria-hidden="true" to every instance of hidden.

[selfthinker]

Because in Romaric's fix he mentioned that the code for this issue is in two different repos, he had created the equivalent issue for GOV.UK Frontend. I've just left a comment in there adding a few more details about VoiceOver behaviour.

I will update the description of this issue to point to both upstream issues.