[Lens] (Accessibility) Improve landmarks in Lens

[myasonik]

Ignoring global areas of Kibana, there are 3 main sections to Lens: the left sidebar, the center graph area, and the right sidebar.

Today, the center graph area is a main and the two other sections are nothing.

The fix

• All 3 sections should be wrapped in a <main>.

  • Make sure to remove the main from where it is now (only 1 main is allowed on the page at a time).
  • Add aria-labelledby={idOfH1} to pave over some browser inconsistencies with how regions are named.
  • Improve the content in the <h1> for the unsaved state: right now, it just puts the heading at Unsaved but doesn't really tell you what page you're on or what's unsaved. Maybe Unsaved Lens Visualization is a better <h1> though feel free to suggest whatever you think might be most descriptive.

• The 3 sections should be wrapped in <section> tags

  • Each section should have an <h2> with what that section is (can be visually hidden). Maybe "Fields list", "Visualization workspace", and "Layer controls" but y'all know your app best.
  • Add aria-labelledby={idOfChildH2} to the <section>

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)