[Lens] (Accessibility) Improve landmarks in Lens

elastic · Nov 30, 2020 · a608672 · a608672
1 parent a2b71f8
commit a608672
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 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
@@ -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
@@ -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/...lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/...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>