From a608672fee1717eb6a7fe27bda576d1d542969e2 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Mon, 30 Nov 2020 15:00:12 +0100
Subject: [PATCH] [Lens] (Accessibility) Improve landmarks in Lens

---
 .../editor_frame/frame_layout.scss            |  5 +-
 .../editor_frame/frame_layout.tsx             | 47 +++++++++++++++----
 .../workspace_panel_wrapper.tsx               |  2 +-
 3 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
index ac52190dc7b0d6..3599254a285b77 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
@@ -12,15 +12,18 @@
 }
 
 .lnsFrameLayout__pageContent {
-  display: flex;
   overflow: hidden;
   flex-grow: 1;
+  flex-direction: row;
 }
 
 .lnsFrameLayout__pageBody {
   @include euiScrollBar;
   min-width: $lnsPanelMinWidth + $euiSizeXL;
   overflow: hidden auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100%;
   // Leave out bottom padding so the suggestions scrollbar stays flush to window edge
   // Leave out left padding so the left sidebar's focus states are visible outside of content bounds
   // This also means needing to add same amount of margin to page content and suggestion items
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx
index 6a0b2c33011190..8e19ceb898b551 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx
@@ -7,7 +7,8 @@
 import './frame_layout.scss';
 
 import React from 'react';
-import { EuiPage, EuiPageSideBar, EuiPageBody } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiScreenReaderOnly } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 export interface FrameLayoutProps {
   dataPanel: React.ReactNode;
@@ -19,16 +20,46 @@ export interface FrameLayoutProps {
 export function FrameLayout(props: FrameLayoutProps) {
   return (
     <EuiPage className="lnsFrameLayout">
-      <div className="lnsFrameLayout__pageContent">
-        <EuiPageSideBar className="lnsFrameLayout__sidebar">{props.dataPanel}</EuiPageSideBar>
-        <EuiPageBody className="lnsFrameLayout__pageBody" restrictWidth={false}>
+      <EuiPageBody
+        restrictWidth={false}
+        className="lnsFrameLayout__pageContent"
+        aria-labelledby="lns_ChartTitle"
+      >
+        <section className="lnsFrameLayout__sidebar" aria-labelledby="dataPanelId">
+          <EuiScreenReaderOnly>
+            <h2 id="dataPanelId">
+              {i18n.translate('xpack.lens.section.dataPanelLabel', {
+                defaultMessage: 'Data panel',
+              })}
+            </h2>
+          </EuiScreenReaderOnly>
+          {props.dataPanel}
+        </section>
+        <section className="lnsFrameLayout__pageBody" aria-labelledby="workspaceId">
+          <EuiScreenReaderOnly>
+            <h2 id="workspaceId">
+              {i18n.translate('xpack.lens.section.workspaceLabel', {
+                defaultMessage: 'Visualization workspace',
+              })}
+            </h2>
+          </EuiScreenReaderOnly>
           {props.workspacePanel}
           {props.suggestionsPanel}
-        </EuiPageBody>
-        <EuiPageSideBar className="lnsFrameLayout__sidebar lnsFrameLayout__sidebar--right">
+        </section>
+        <section
+          className="lnsFrameLayout__sidebar lnsFrameLayout__sidebar--right"
+          aria-labelledby="configPanel"
+        >
+          <EuiScreenReaderOnly>
+            <h2 id="configPanel">
+              {i18n.translate('xpack.lens.section.configPanelLabel', {
+                defaultMessage: 'Config panel',
+              })}
+            </h2>
+          </EuiScreenReaderOnly>
           {props.configPanel}
-        </EuiPageSideBar>
-      </div>
+        </section>
+      </EuiPageBody>
     </EuiPage>
   );
 }
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
index 33ddc23312a966..d9fbaa22a03889 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
@@ -102,7 +102,7 @@ export function WorkspacePanelWrapper({
       </div>
       <EuiPageContent className="lnsWorkspacePanelWrapper">
         <EuiScreenReaderOnly>
-          <h1 data-test-subj="lns_ChartTitle">
+          <h1 id="lns_ChartTitle" data-test-subj="lns_ChartTitle">
             {title ||
               i18n.translate('xpack.lens.chartTitle.unsaved', { defaultMessage: 'Unsaved' })}
           </h1>