Service Navigation's mobile menu button is listed on Voice Over rotor's Form control when hidden

[romaricpascal]

Description of the issue

On a desktop viewport, VoiceOver's rotor shows the <button> used to toggle the Service Navigation mobile menu despite the element having a hidden attribute.

Steps to reproduce the issue

• In Safari, with a viewport wider than 769px (our desktop breakpoint), open one of the examples for the Service Navigation in the review app (eg. the default example)
• Open Voice Over with Cmd+F5
• Access Voice Over rotor with Ctrl+Alt+u
• Use the left and right arrow on your keyboard to navigate to the Form Controls list

Actual vs expected behaviour

The Form Controls list shows a "button" entry corresponding to the hidden <button> used to toggle the Service Navigation's visibility on mobile. The list should not show that button.

Environment (where applicable)

• Operating system: MacOS
• Browser: Safari
• Browser version: Version 18.6 (20621.3.11.11.3)
• GOV.UK Frontend Version: 5.12

[romaricpascal]

Note:

• The issue seems to also lead the button to be focusable by Voice Over on iPad
• This issue also affects the toggles for each mobile menu section on the Design System site, for which a fix has been developed.

[selfthinker]

As Romaric mentioned, the same issue is behind VoiceOver on iPadOS and iOS being able to access the 'Menu' button. This is the case for the Service Navigation component and the (old and deprecated) menu option within the Header component.
When activating the button in desktop view with VoiceOver nothing happens. That means it's not as bad as the same behaviour in the GOV.UK Design System website's sub navigation.

Here are screenshots that show the issue for both components: