diff --git a/src-docs/src/components/scroll_to_hash.tsx b/src-docs/src/components/scroll_to_hash.tsx
index 23a6bb59b27..678a8494d77 100644
--- a/src-docs/src/components/scroll_to_hash.tsx
+++ b/src-docs/src/components/scroll_to_hash.tsx
@@ -1,5 +1,6 @@
import { useEffect, useState, FunctionComponent } from 'react';
import { useLocation } from 'react-router-dom';
+import { isTabbable } from 'tabbable';
const ScrollToHash: FunctionComponent = () => {
const location = useLocation();
@@ -18,11 +19,23 @@ const ScrollToHash: FunctionComponent = () => {
const element = document.getElementById(hash);
const headerOffset = 48;
if (element) {
+ // Focus element for keyboard and screen reader users
+ if (!isTabbable(element)) {
+ element.tabIndex = -1;
+ element.addEventListener(
+ 'blur',
+ () => element.removeAttribute('tabindex'),
+ { once: true }
+ );
+ element.focus();
+ }
+ // Scroll to element
window.scrollTo({
top: element.offsetTop - headerOffset,
behavior: 'smooth',
});
} else {
+ // Scroll back to top of page
window.scrollTo({
behavior: 'auto',
top: 0,
diff --git a/src-docs/src/views/accessibility/accessibility_example.js b/src-docs/src/views/accessibility/accessibility_example.js
index fde94031ff8..202d6805b16 100644
--- a/src-docs/src/views/accessibility/accessibility_example.js
+++ b/src-docs/src/views/accessibility/accessibility_example.js
@@ -13,12 +13,14 @@ import {
} from '../../../../src';
import ScreenReaderLive from './screen_reader_live';
+import ScreenReaderLiveFocus from './screen_reader_live_focus';
import ScreenReaderOnly from './screen_reader';
import ScreenReaderFocus from './screen_reader_focus';
import SkipLink from './skip_link';
import StylesHelpers from './styles_helpers';
const screenReaderLiveSource = require('!!raw-loader!./screen_reader_live');
+const screenReaderLiveFocusSource = require('!!raw-loader!./screen_reader_live_focus');
const screenReaderOnlySource = require('!!raw-loader!./screen_reader');
const screenReaderFocusSource = require('!!raw-loader!./screen_reader_focus');
@@ -154,8 +156,50 @@ export const AccessibilityExample = {
props: {
EuiScreenReaderLive,
},
+ snippet: `
+ The
+ This is primarily useful for announcing navigation or page changes,
+ when programmatically resetting focus location back to a certain
+ part of the page (where the
+ + Using a screen reader, click the following navigation links and + notice that when the new page is announced, focus is also set to + the top of the body content. + +
+ > + ), + props: { + EuiScreenReaderLive, + }, + snippet: `+ This paragraph is not visible to sighted users but will be read by screenreaders. +
++ This paragraph is not visible to sighted users but will be read by + screenreaders. +
+); + describe('EuiScreenReaderLive', () => { describe('with a static configuration', () => { - const content = ( -- This paragraph is not visible to sighted users but will be read by - screenreaders. -
- ); - it('renders screen reader content when active', () => { const component = render(