The new site editor Browse Mode breaks ARIA landmark and navigateRegions

[afercia]

Description

The new site editor Browse Mode introduced in #44770 breaks ARIA landmark and navigateRegions.

It's a two-fold issue:

1. Native semantics
As also stated in the Accessibility readme, It is a best practice to include ALL content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content. However, the new navigation sidebar isn't an ARIA landmark. Only the <nav> element within it is a native landmark but that's not enough. The whole sidebar should be a landmark otherwise there's some content that lives outside any landmark. This is important and it's not just about semantics: native screen reader features allow users to jump through landmarks as a convenient navigation mechanism. Leaving some content outside landmarks is less than ideal and violates the best practice established in this project documentation.

2. Navigating regions with keyboard shortcut doesn't work.
navigateRegions allows all keyboard users to navigate through the main editor sections. Ideally, these sections should be the landmarks themselves so that the editor provides all keyboard users with an interaction that is equivalent to the screen readers landmark navigation. In the previous implementation, the header (the top bar) and the drawer (the navigation) were placed within the InterfaceSkeleton component, which provides the navigate regions functionality.
Instead, in the new implementation:

• The navigation is placed outside InterfaceSkeleton. Therefore, navigateRegions doesn't work for this section of the editor.
• When the site editor is in 'Edit mode', the top bar slides in from the top with an animation. This top bar is placed outside InterfaceSkeleton. Therefore, navigateRegions doesn't work for this section of the editor.

Note:
There's one more issue with navigateRegions which pre-dates to #44770. When a block is selected, the spacing sizes control is available in the block settings sidebar. This control has a fieldset with a role=region that conflicts with useNavigateRegions. This role should be removed. See #42173 (comment)

Step-by-step reproduction instructions

• Open the site editor.
• The initial state of the editor shows the navigation sidebar opened.
• Press the Tab key once to move focus to the 'Go back to the dashboard' link (the WP logo).
• Press Control+backtick (on macOS) or Control+Option+N (see the keyboard shortcuts help for the Windows equivalent keys) to navigate tot he next editor section.
• Observe that nothing happens.
• Click the 'Edit' button in the navigation sidebar.
• The editor switches to 'Edit mode'.
• Try again Control+backtick or Control+Option+N (on macOS).
• Observe that nothing happens.
• Click on an editable part of the editor.
• Make sure the settings sidebar switched to the 'Block' tab.
• Try again to navigate through the regions and observe that it partially works but it hangs on the settings sidebar.
• Switch the settings sidebar to 'Template' tab.
• Try again and observe navigating the regions works and cycles through the regions but the top bar is always excluded.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

It is also worth noting that ARIA landmarks shouldn't be 'dynamic'. as in: they should not appear and disappear. Instead, they should always be rendered on the page. They are meant to be structural elements to semantically mark the main regions of the interface. Making them render dynamically is completely unexpected and confusing for screen reader users.

[annezazu]

Thanks for testing this recent feature and opening such a detailed issue!