AppLayout drawer-vs-navbar DOM order issue when using navbar for 2nd level navigation #6303
Description
What is the problem?
When the AppLayout's navbar (i.e. header bar) contains 2nd level navigation, while the drawer contains top level navigation, the DOM order, and thus the order in which screen readers traverse the layout, is not optimal, as the navbar's contents come before the drawer.
Not sure what the best solution here would be. Some ideas:
- Move the drawer to the top of the AppLayout's DOM when it's set as the "primary section" – this way the DOM order corresponds to the layout's visual order. (Might be a problem when the drawer is hidden, but that could probably be solved by ensuring that it's also hidden from screen readers.)
- Recommend to not use navbar for 2nd level navigation if drawer is used for top-level navigation – recommend to instead place 2nd level navigation in the AppLayout's content area.
Browsers
- Chrome
- Firefox
- Safari
- Safari on iOS
- Edge
Screen Readers
- None
- NVDA
- JAWS
- VoiceOver on MacOS
- VoiceOver on iOS