[Obs Create Dashboard][KEYBOARD]: Focus must be set on the EuiScreenReaderOnly component that comes first in DOM on initial render

[1Copenut]

Point of contact

@petrklapka

Description

The Obs Create Dashboard has a screen reader only H1 that is taking keyboard focus on first render. This is an older pattern that has been updated with an EuiScreenReaderOnly that is the first item in the DOM and should receive focus on render. This makes for a more consistent UX for keyboard users and announces the page consistently for screen reader users while retaining teh H1 as "the big idea". Screenshot attached below.

Steps to recreate

1. Open the Obs Serverless Dashboard view
2. Start the screen reader of your choice
3. Tab and click the Create dashboard button
4. Verify you hear "Dashboards - Editing New Dashboard. Heading level one." This is the SR-only H1 taking focus.
5. Press Tab and verify you never see the "Skip to main content" link

Environment

• MacOS Ventura
• Safari latest
• VoiceOver

Screenshots or Trace Logs

Proposed solution

Focus should be consistent with all other views, going to the first EuiScreenReaderOnly component in the DOM. The H1 can stay in the DOM and should for screen readers, even if it's visually hidden.

Acceptance criteria

• Correct focus order is honored in the Create Dashboard view
• Pressing Tab once highlights the skip to content link on first render
• The H1 is still available for screen reader users
• No axe-core errors are thrown with code change

WCAG or Vendor Guidance (optional)

• Understanding SC 2.4.3 Focus Order (Level A)

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[Heenawter]

We're confused on the ownership of this one @elastic/appex-sharedux - do you know if this header belongs to the Serverless navigation or the Dashboard plugin? 🙇

[petrklapka]

Removing from our project, this is part of Dashboard app.