[KEYBOARD]: Top Nav must set focus correctly when users press Edit or Save button

[1Copenut]

Description
Our Top Nav should be setting focus on the containing <nav> DOM element when users press the Edit button to toggle to edit mode or the Save button to return to view mode. This helps keyboard and screen reader users who are expecting focus order to be managed so that they don't have to traverse backwards to hear or access the menu options.

This issue will not be fixable without an EUI update, captured in elastic/eui#5248

Steps to reproduce

1. Open a Kibana instance and add a sample data set
2. Use the TAB key to navigate to the Edit button, then press ENTER
3. Press the TAB key a few more times, and verify focus is not set on the Options button first

---

kibana-dashboard-options-menu.mov

Actual Result

• Focus is set on the body tag when I press Enter

Expected Result

• Focus will be set on the nav element so I can press the TAB key once and focus the Options button

Related Issue

• [EuiHeaderLinks][KEYBOARD]: HeaderLinks component needs optional ref and tabindex props to facilitate keyboard focus eui#5248

Kibana Version:
v8.0.0

OS:
MacOS Big Sur

Browser:
Chrome latest

Relevant WCAG Criteria: [Understanding Success Criterion 2.4.3: Focus Order

• Level A(https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[elasticmachine]

Pinging @elastic/kibana-design (Team:Kibana-Design)

[1Copenut]

I'm opting to close this issue for now. The current behavior in v8.8.0 is to move focus to a screen reader H1 just beneath the global navigation header on Edit | View change. This tests well with screen readers, so I feel we've got a good, defensible solution in place.