[Bug]: HTML markup accessibility issues with mobile navigation button

[Sidnioulz]

Follow-up of #31076 and its associated PR #31250.

The current mobile navigation button HTML markup is insufficient. We would need

• an aria-label instead of title
• an aria-expanded and/or aria-controls markup to indicate the button opens a menu, with the accompanying changes to the menu's markup (e.g. listbox or dialog role, to be verified); or the new popover API could maybe be used (e.g. https://mdn.github.io/dom-examples/popover-api/nested-popovers/) The exact markup to use must be evidence-based (e.g. a11ysupport analysis, copying an APG, following guidelines from a reputable source or providing a screenreader outcome)
• the keyboard focus order to be fixed and a focus trap to be installed on the menu

We should also probably change the current HTML markup, so that we have the nav element rendered in the DOM but invisible until focused / until the button is triggered. This would help with screenreader keyboard shortcuts that navigate through nav elements or HTML landmarks.

Some references used to write this review:

• https://mdn.github.io/dom-examples/popover-api/nested-popovers
• https://accessibleweb.dev/navigation
• https://theadminbar.com/accessibility-weekly/mobile-nav-and-hamburger-menus/
• https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/