Skip to content

Commit

Permalink
[Lens] (Accessibility) Improve landmarks in Lens
Browse files Browse the repository at this point in the history
  • Loading branch information
mbondyra committed Nov 30, 2020
1 parent a2b71f8 commit a608672
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit a608672

Please sign in to comment.