diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.test.tsx b/src/plugins/discover/public/application/main/components/layout/discover_layout.test.tsx index 26978cc9e6f57..84f96eeeab65f 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.test.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.test.tsx @@ -39,7 +39,11 @@ import { DiscoverServices } from '../../../../build_services'; setHeaderActionMenuMounter(jest.fn()); -function mountComponent(indexPattern: DataView, prevSidebarClosed?: boolean) { +function mountComponent( + indexPattern: DataView, + prevSidebarClosed?: boolean, + mountOptions: { attachTo?: HTMLElement } = {} +) { const searchSourceMock = createSearchSourceMock({}); const services = { ...discoverServiceMock, @@ -159,7 +163,8 @@ function mountComponent(indexPattern: DataView, prevSidebarClosed?: boolean) { return mountWithIntl( - + , + mountOptions ); } @@ -174,6 +179,17 @@ describe('Discover component', () => { expect(component.find('[data-test-subj="discoverChartOptionsToggle"]').exists()).toBeTruthy(); }); + test('the saved search title h1 gains focus on navigate', () => { + const container = document.createElement('div'); + document.body.appendChild(container); + const component = mountComponent(indexPatternWithTimefieldMock, undefined, { + attachTo: container, + }); + expect( + component.find('[data-test-subj="discoverSavedSearchTitle"]').getDOMNode() + ).toHaveFocus(); + }); + describe('sidebar', () => { test('should be opened if discover:sidebarClosed was not set', () => { const component = mountComponent(indexPatternWithTimefieldMock, undefined); diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx index 6cbc8add99c39..d44f0e6c002ae 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx @@ -213,8 +213,31 @@ export function DiscoverLayout({ [onChangeIndexPattern] ); + const savedSearchTitle = useRef(null); + useEffect(() => { + savedSearchTitle.current?.focus(); + }, []); + return ( +

+ {savedSearch.title + ? i18n.translate('discover.pageTitleWithSavedSearch', { + defaultMessage: 'Discover - {savedSearchTitle}', + values: { + savedSearchTitle: savedSearch.title, + }, + }) + : i18n.translate('discover.pageTitleWithoutSavedSearch', { + defaultMessage: 'Discover - Search not yet saved', + })} +

-

- {savedSearch.title - ? i18n.translate('discover.pageTitleWithSavedSearch', { - defaultMessage: 'Discover - {savedSearchTitle}', - values: { - savedSearchTitle: savedSearch.title, - }, - }) - : i18n.translate('discover.pageTitleWithoutSavedSearch', { - defaultMessage: 'Discover - Search not yet saved', - })} -

{ + before(async () => { + log.debug('load kibana index with default index pattern'); + await kibanaServer.importExport.load('test/functional/fixtures/kbn_archiver/discover'); + // and load a set of makelogs data + await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/logstash_functional'); + await kibanaServer.uiSettings.replace(defaultSettings); + await PageObjects.common.navigateToApp('discover'); + }); + + after(async () => { + await kibanaServer.savedObjects.clean({ types: ['search', 'index-pattern'] }); + }); + + it('should give focus to the saved search title h1 on navigate', async () => { + const titleElement = await testSubjects.find('discoverSavedSearchTitle'); + const activeElement = await find.activeElement(); + expect(await titleElement.getAttribute('data-test-subj')).to.eql( + await activeElement.getAttribute('data-test-subj') + ); + }); + + it('should give focus to the data view switch link when Tab is pressed', async () => { + await browser.pressKeys(browser.keys.TAB); + const dataViewSwitchLink = await testSubjects.find('discover-dataView-switch-link'); + const activeElement = await find.activeElement(); + expect(await dataViewSwitchLink.getAttribute('data-test-subj')).to.eql( + await activeElement.getAttribute('data-test-subj') + ); + }); + }); +} diff --git a/test/functional/apps/discover/index.ts b/test/functional/apps/discover/index.ts index 44ad8687f8ed5..b969ac1f5fc31 100644 --- a/test/functional/apps/discover/index.ts +++ b/test/functional/apps/discover/index.ts @@ -28,6 +28,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) { loadTestFile(require.resolve('./_no_data')); loadTestFile(require.resolve('./_saved_queries')); loadTestFile(require.resolve('./_discover')); + loadTestFile(require.resolve('./_discover_accessibility')); loadTestFile(require.resolve('./_discover_histogram')); loadTestFile(require.resolve('./_doc_table')); loadTestFile(require.resolve('./_doc_table_newline'));