diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap index d86194ac7dbaf7..37aeb88feefa80 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap @@ -20,6 +20,21 @@ Array [ test - Elastic , + ,
`; + +exports[`SkipToMainContent renders 1`] = ` + +`; diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx index 227a94a208ca34..5449ee34bb662b 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx @@ -46,7 +46,7 @@ import { HeaderActionMenu } from './header_action_menu'; import { HeaderExtension } from './header_extension'; import { HeaderTopBanner } from './header_top_banner'; import { HeaderMenuButton } from './header_menu_button'; -import { ScreenReaderRouteAnnouncements } from './screen_reader_a11y'; +import { ScreenReaderRouteAnnouncements, SkipToMainContent } from './screen_reader_a11y'; export interface HeaderProps { kibanaVersion: string; @@ -114,6 +114,7 @@ export function Header({ customBranding$={customBranding$} appId$={application.currentAppId$} /> +
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/screen_reader_a11y.test.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/screen_reader_a11y.test.tsx index 3dfc25c93c25ac..b468eefd51d795 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/screen_reader_a11y.test.tsx +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/screen_reader_a11y.test.tsx @@ -9,8 +9,8 @@ import React from 'react'; import { BehaviorSubject } from 'rxjs'; import { mountWithIntl } from '@kbn/test-jest-helpers'; -import { ScreenReaderRouteAnnouncements } from './screen_reader_a11y'; -import { mount } from 'enzyme'; +import { ScreenReaderRouteAnnouncements, SkipToMainContent } from './screen_reader_a11y'; +import { mount, render } from 'enzyme'; describe('ScreenReaderRouteAnnouncements', () => { it('renders', () => { @@ -67,3 +67,10 @@ describe('ScreenReaderRouteAnnouncements', () => { ).toBeTruthy(); }); }); + +describe('SkipToMainContent', () => { + it('renders', () => { + const component = render(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/screen_reader_a11y.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/screen_reader_a11y.tsx index 811da523414172..f879e896297dce 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/screen_reader_a11y.tsx +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/screen_reader_a11y.tsx @@ -8,7 +8,8 @@ import React, { FC, useState, useEffect } from 'react'; import useObservable from 'react-use/lib/useObservable'; -import { EuiScreenReaderLive } from '@elastic/eui'; +import { EuiScreenReaderLive, EuiSkipLink } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import type { InternalApplicationStart } from '@kbn/core-application-browser-internal'; import type { HeaderProps } from './header'; @@ -56,3 +57,25 @@ export const ScreenReaderRouteAnnouncements: FC<{ ); }; + +const fallbackContentQueries = [ + 'main', // Ideal target for all plugins using KibanaPageTemplate + '[role="main"]', // Fallback for plugins using deprecated EuiPageContent + '.kbnAppWrapper', // Last-ditch fallback for all plugins regardless of page template +]; + +export const SkipToMainContent = () => { + return ( + + {i18n.translate('core.ui.skipToMainButton', { + defaultMessage: 'Skip to main content', + })} + + ); +};