Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[8.15] [Discover] [Unified Doc Viewer] Fix doc viewer not receiving focus on open (#191039) #194780

Merged
merged 3 commits into from
Oct 4, 2024
Merged

[8.15] [Discover] [Unified Doc Viewer] Fix doc viewer not receiving focus on open (#191039) #194780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c642b2a
[Discover] [Unified Doc Viewer] Fix doc viewer not receiving focus on…
davismcphee Oct 3, 2024
6686961
Merge branch '8.15' into backport/8.15/pr-191039
davismcphee Oct 3, 2024
5834c14
Fix broken test
davismcphee Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions src/plugins/unified_doc_viewer/public/components/doc_viewer_flyout/doc_viewer_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import React, { useMemo, useCallback, type ComponentType } from 'react';
import { get } from 'lodash';
import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';
import type { DataView } from '@kbn/data-views-plugin/public';
Expand All @@ -34,6 +33,7 @@ import useLocalStorage from 'react-use/lib/useLocalStorage';
import type { ToastsStart } from '@kbn/core-notifications-browser';
import type { DocViewFilterFn, DocViewRenderProps } from '@kbn/unified-doc-viewer/types';
import { UnifiedDocViewer } from '../lazy_doc_viewer';
import { useFlyoutA11y } from './use_flyout_a11y';

export interface UnifiedDocViewerFlyoutProps {
'data-test-subj'?: string;
Expand Down Expand Up @@ -71,6 +71,7 @@ function getIndexByDocId(hits: DataTableRecord[], id: string) {
}

export const FLYOUT_WIDTH_KEY = 'unifiedDocViewer:flyoutWidth';

/**
* Flyout displaying an expanded row details
*/
Expand Down Expand Up @@ -129,24 +130,29 @@ export function UnifiedDocViewerFlyout({

const onKeyDown = useCallback(
(ev: React.KeyboardEvent) => {
const nodeClasses = get(ev, 'target.className', '');
if (typeof nodeClasses === 'string' && nodeClasses.includes('euiDataGrid')) {
if (ev.target instanceof HTMLElement && ev.target.closest('.euiDataGrid__content')) {
// ignore events triggered from the data grid
return;
}

const nodeName = get(ev, 'target.nodeName', null);
if (typeof nodeName === 'string' && nodeName.toLowerCase() === 'input') {
if (ev.key === keys.ESCAPE) {
ev.preventDefault();
ev.stopPropagation();
onClose();
}

if (ev.target instanceof HTMLInputElement) {
// ignore events triggered from the search input
return;
}

if (ev.key === keys.ARROW_LEFT || ev.key === keys.ARROW_RIGHT) {
ev.preventDefault();
ev.stopPropagation();
setPage(activePage + (ev.key === keys.ARROW_RIGHT ? 1 : -1));
}
},
[activePage, setPage]
[activePage, onClose, setPage]
);

const addColumn = useCallback(
Expand Down Expand Up @@ -231,6 +237,7 @@ export function UnifiedDocViewerFlyout({
defaultMessage: 'Document',
});
const currentFlyoutTitle = flyoutTitle ?? defaultFlyoutTitle;
const { a11yProps, screenReaderDescription } = useFlyoutA11y({ isXlScreen });

return (
<EuiPortal>
Expand All @@ -250,7 +257,9 @@ export function UnifiedDocViewerFlyout({
maxWidth: `${isXlScreen ? `calc(100vw - ${DEFAULT_WIDTH}px)` : '90vw'} !important`,
}}
paddingSize="m"
{...a11yProps}
>
{screenReaderDescription}
<EuiFlyoutHeader hasBorder>
<EuiFlexGroup
direction="row"
Expand Down
53 changes: 53 additions & 0 deletions src/plugins/unified_doc_viewer/public/components/doc_viewer_flyout/use_flyout_a11y.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { EuiScreenReaderOnly, useGeneratedHtmlId } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useEffect, useState } from 'react';
import useUnmount from 'react-use/lib/useUnmount';

export const useFlyoutA11y = ({ isXlScreen }: { isXlScreen: boolean }) => {
const descriptionId = useGeneratedHtmlId();
const [triggerEl] = useState(document.activeElement);
const [flyoutEl, setFlyoutEl] = useState<HTMLElement>();

// Auto-focus push flyout on open or when switching to XL screen
useEffect(() => {
if (isXlScreen && flyoutEl && document.contains(flyoutEl)) {
// Wait a tick before focusing or focus will be stolen by the trigger element when
// switching from an overlay flyout to a push flyout (due to EUI focus lock)
setTimeout(() => flyoutEl.focus());
}
}, [flyoutEl, isXlScreen]);

// Return focus to the trigger element when the flyout is closed
useUnmount(() => {
if (triggerEl instanceof HTMLElement && document.contains(triggerEl)) {
triggerEl.focus();
}
});

return {
a11yProps: {
ref: setFlyoutEl,
role: isXlScreen ? 'dialog' : undefined,
tabindex: isXlScreen ? 0 : undefined,
'aria-describedby': isXlScreen ? descriptionId : undefined,
'data-no-focus-lock': isXlScreen || undefined,
},
screenReaderDescription: isXlScreen && (
<EuiScreenReaderOnly>
<p id={descriptionId} data-test-subj="unifiedDocViewerScreenReaderDescription">
{i18n.translate('unifiedDocViewer.flyout.screenReaderDescription', {
defaultMessage: 'You are in a non-modal dialog. To close the dialog, press Escape.',
})}
</p>
</EuiScreenReaderOnly>
),
};
};
4 changes: 2 additions & 2 deletions test/functional/apps/discover/group2_data_grid1/_data_grid_doc_table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,9 +185,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
it('should allow paginating docs in the flyout by clicking in the doc table', async function () {
await retry.try(async function () {
await dataGrid.clickRowToggle({ rowIndex: rowToInspect - 1 });
await testSubjects.exists(`docViewerFlyoutNavigationPage0`);
await testSubjects.existOrFail('docViewerFlyoutNavigationPage-0');
await dataGrid.clickRowToggle({ rowIndex: rowToInspect });
await testSubjects.exists(`docViewerFlyoutNavigationPage1`);
await testSubjects.existOrFail('docViewerFlyoutNavigationPage-1');
await dataGrid.closeFlyout();
});
});
Expand Down
212 changes: 212 additions & 0 deletions test/functional/apps/discover/group3/_doc_viewer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* Side Public License, v 1.
*/

import expect from '@kbn/expect';
import { FtrProviderContext } from '../ftr_provider_context';

export default function ({ getService, getPageObjects }: FtrProviderContext) {
Expand All @@ -16,6 +17,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
const find = getService('find');
const retry = getService('retry');
const dataGrid = getService('dataGrid');
const browser = getService('browser');

describe('discover doc viewer', function describeIndexTests() {
before(async function () {
Expand Down Expand Up @@ -97,5 +99,215 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
});
});
});

describe('flyout', () => {
let originalScreenSize = { width: 0, height: 0 };

const reduceScreenWidth = async () => {
await browser.setWindowSize(800, originalScreenSize.height);
};

const restoreScreenWidth = async () => {
await browser.setWindowSize(originalScreenSize.width, originalScreenSize.height);
};

before(async () => {
originalScreenSize = await browser.getWindowSize();
});

beforeEach(async () => {
// open the flyout once initially to ensure table is the default tab
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
await dataGrid.closeFlyout();
});

afterEach(async () => {
await restoreScreenWidth();
});

describe('keyboard navigation', () => {
it('should navigate between documents with arrow keys', async () => {
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-0`);
await browser.pressKeys(browser.keys.ARROW_RIGHT);
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-1`);
await browser.pressKeys(browser.keys.ARROW_RIGHT);
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-2`);
await browser.pressKeys(browser.keys.ARROW_LEFT);
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-1`);
await browser.pressKeys(browser.keys.ARROW_LEFT);
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-0`);
});

it('should not navigate between documents with arrow keys when the search input is focused', async () => {
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-0`);
await browser.pressKeys(browser.keys.ARROW_RIGHT);
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-1`);
await testSubjects.click('unifiedDocViewerFieldsSearchInput');
await browser.pressKeys(browser.keys.ARROW_RIGHT);
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-1`);
await browser.pressKeys(browser.keys.TAB);
await browser.pressKeys(browser.keys.TAB);
await browser.pressKeys(browser.keys.ARROW_RIGHT);
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-2`);
});

it('should not navigate between documents with arrow keys when the data grid is focused', async () => {
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-0`);
await browser.pressKeys(browser.keys.ARROW_RIGHT);
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-1`);
await testSubjects.click('dataGridHeaderCell-name');
await browser.pressKeys(browser.keys.ARROW_RIGHT);
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-1`);
await browser.pressKeys(browser.keys.TAB);
await browser.pressKeys(browser.keys.ARROW_RIGHT);
await testSubjects.existOrFail(`docViewerFlyoutNavigationPage-2`);
});

it('should close the flyout with the escape key', async () => {
await dataGrid.clickRowToggle();
expect(await PageObjects.discover.isShowingDocViewer()).to.be(true);
await browser.pressKeys(browser.keys.ESCAPE);
expect(await PageObjects.discover.isShowingDocViewer()).to.be(false);
});

it('should close the flyout with the escape key when the search input is focused', async () => {
await dataGrid.clickRowToggle();
expect(await PageObjects.discover.isShowingDocViewer()).to.be(true);
await testSubjects.click('unifiedDocViewerFieldsSearchInput');
await browser.pressKeys(browser.keys.ESCAPE);
expect(await PageObjects.discover.isShowingDocViewer()).to.be(false);
});

it('should not close the flyout with the escape key when the data grid is focused', async () => {
await dataGrid.clickRowToggle();
expect(await PageObjects.discover.isShowingDocViewer()).to.be(true);
await testSubjects.click('dataGridHeaderCell-name');
await browser.pressKeys(browser.keys.ESCAPE);
expect(await PageObjects.discover.isShowingDocViewer()).to.be(true);
await browser.pressKeys(browser.keys.TAB);
await browser.pressKeys(browser.keys.ESCAPE);
expect(await PageObjects.discover.isShowingDocViewer()).to.be(false);
});
});

describe('accessibility', () => {
it('should focus the flyout on open, and retain focus when resizing between push and overlay flyouts', async () => {
// push -> overlay -> push
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
let activeElement = await find.activeElement();
expect(await activeElement.getAttribute('data-test-subj')).to.be('docViewerFlyout');
await reduceScreenWidth();
activeElement = await find.activeElement();
expect(await activeElement.getAttribute('data-test-subj')).to.be('docViewerFlyout');
await restoreScreenWidth();
activeElement = await find.activeElement();
expect(await activeElement.getAttribute('data-test-subj')).to.be('docViewerFlyout');
// overlay -> push -> overlay
await browser.pressKeys(browser.keys.ESCAPE);
await reduceScreenWidth();
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
activeElement = await find.activeElement();
expect(await activeElement.getAttribute('data-test-subj')).to.be('docViewerFlyout');
await restoreScreenWidth();
activeElement = await find.activeElement();
expect(await activeElement.getAttribute('data-test-subj')).to.be('docViewerFlyout');
await reduceScreenWidth();
activeElement = await find.activeElement();
expect(await activeElement.getAttribute('data-test-subj')).to.be('docViewerFlyout');
});

it('should return focus to the trigger element when the flyout is closed', async () => {
// push
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
await browser.pressKeys(browser.keys.ESCAPE);
let activeElement = await find.activeElement();
expect(await activeElement.getAttribute('data-test-subj')).to.be(
'docTableExpandToggleColumn'
);
// push -> overlay
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
await reduceScreenWidth();
await browser.pressKeys(browser.keys.ESCAPE);
activeElement = await find.activeElement();
expect(await activeElement.getAttribute('data-test-subj')).to.be(
'docTableExpandToggleColumn'
);
// overlay
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
await browser.pressKeys(browser.keys.ESCAPE);
activeElement = await find.activeElement();
expect(await activeElement.getAttribute('data-test-subj')).to.be(
'docTableExpandToggleColumn'
);
// overlay -> push
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
await restoreScreenWidth();
await browser.pressKeys(browser.keys.ESCAPE);
activeElement = await find.activeElement();
expect(await activeElement.getAttribute('data-test-subj')).to.be(
'docTableExpandToggleColumn'
);
});

it('should show custom screen reader description push flyout is active', async () => {
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
await testSubjects.existOrFail('unifiedDocViewerScreenReaderDescription', {
allowHidden: true,
});
});

it('should not show custom screen reader description when overlay flyout active', async () => {
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
await reduceScreenWidth();
expect(
await testSubjects.exists('unifiedDocViewerScreenReaderDescription', {
allowHidden: true,
})
).to.be(false);
});

it('should use expected a11y attributes', async () => {
// push flyout
await dataGrid.clickRowToggle();
await PageObjects.discover.isShowingDocViewer();
let role = await testSubjects.getAttribute('docViewerFlyout', 'role');
let tabindex = await testSubjects.getAttribute('docViewerFlyout', 'tabindex');
let describedBy = await testSubjects.getAttribute('docViewerFlyout', 'aria-describedby');
let noFocusLock = await testSubjects.getAttribute(
'docViewerFlyout',
'data-no-focus-lock'
);
expect(role).to.be('dialog');
expect(tabindex).to.be('0');
expect(await find.existsByCssSelector(`#${describedBy}`)).to.be(true);
expect(noFocusLock).to.be('true');
// overlay flyout
await reduceScreenWidth();
role = await testSubjects.getAttribute('docViewerFlyout', 'role');
tabindex = await testSubjects.getAttribute('docViewerFlyout', 'tabindex');
describedBy = await testSubjects.getAttribute('docViewerFlyout', 'aria-describedby');
noFocusLock = await testSubjects.getAttribute('docViewerFlyout', 'data-no-focus-lock');
expect(role).to.be('dialog');
expect(tabindex).to.be('0');
expect(await find.existsByCssSelector(`#${describedBy}`)).to.be(true);
expect(noFocusLock).to.be(null);
});
});
});
});
}