Describe the bug

Ensure the main regions of Storybook are landmarks:

Desktop layout

• [Sidebar] Overall sidebar as header/banner
• [Sidebar] Search as search
• [Sidebar] Navigation as nav
• [Sidebar] Testing module as region
• [Main] Toolbar as region
• [Main] Preview as main
• [Main] Addon panel as aside

Mobile layout

• Toolbar as region
• Preview as main
• MobileNavigation as header/banner

Feedback from Eric

• Consider adding a visually-hidden h1 called "Storybook" and place it right before the logo.
• Consider adding a visually-hidden h2 before the nav on the lefthand side.
• Consider reworking the landmarks:
  • Remove the current main as a parent landmark to flatten it out.
  • Update the main preview area to use main and not region.
  • Update the addon panel to use aside and not region.

Ensure we have a logical heading structure:

• h1 in the header around the brand image / SB instance title
• h2 as headings for the other main landmarks

Consider adopting react-aria's useLandmark hook

• This would give us F6/Shift+F6 kb nav even without using ATs
• Handle quirk with Search blocking F6 keyboard handler
• Handle preview area blocking F6 keyboard handler
• Handle preview area not showing focus outline
• Peer with MA to decide on focus outline treatment for initial focus of landmarks
• Test HCM output for landmark focus styles

This will enable quick nav through both headings and landmarks, which will greatly improve UX for screenreader users.

Reproduction link

yarn storybook:ui

Reproduction steps

No response

System

n/a, 9.2.0 alpha

Additional context

No response