---
.../src/views/accessibility/accessibility_example.js | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/src-docs/src/views/accessibility/accessibility_example.js b/src-docs/src/views/accessibility/accessibility_example.js
index cb336e800ce..53dbc1d8f4f 100644
--- a/src-docs/src/views/accessibility/accessibility_example.js
+++ b/src-docs/src/views/accessibility/accessibility_example.js
@@ -145,11 +145,13 @@ export const AccessibilityExample = {
for role to aria-live mapping.
- If you need to manage focus, set the isFocusable{' '}
- prop to true. This will set focus on the
- containing element on page load and when the{' '}
- children prop updates. Screen readers will
- announce the text inside the live region as normal.
+ The focusRegionOnTextChange prop will
+ automatically focus the live region (causing screen readers to read
+ out the text content) whenever children changes.
+ 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 EuiScreenReaderLive{' '}
+ is placed) is desired.
Also consider other live region guidelines, such as that live
From 9a12d7b60a117f90a6ed30bf8c51d272e9baa747 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Fri, 24 Jun 2022 16:00:46 -0500
Subject: [PATCH 13/16] Update
src/components/accessibility/screen_reader_live/screen_reader_live.tsx
Co-authored-by: Constance
---
.../accessibility/screen_reader_live/screen_reader_live.tsx | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/src/components/accessibility/screen_reader_live/screen_reader_live.tsx b/src/components/accessibility/screen_reader_live/screen_reader_live.tsx
index 1d37d671937..40c84dbb5e4 100644
--- a/src/components/accessibility/screen_reader_live/screen_reader_live.tsx
+++ b/src/components/accessibility/screen_reader_live/screen_reader_live.tsx
@@ -82,11 +82,9 @@ export const EuiScreenReaderLive: FunctionComponent =
{isActive && toggle ? children : ''}
From 1cd22d54a923460636d7cc37714a37892540fbf5 Mon Sep 17 00:00:00 2001
From: Constance Chen
Date: Fri, 24 Jun 2022 14:15:42 -0700
Subject: [PATCH 14/16] Add documentation section for `focusRegionOnTextChange`
+ example
---
.../accessibility/accessibility_example.js | 47 ++++++++++++--
.../screen_reader_live_focus.tsx | 63 +++++++++++++++++++
2 files changed, 104 insertions(+), 6 deletions(-)
create mode 100644 src-docs/src/views/accessibility/screen_reader_live_focus.tsx
diff --git a/src-docs/src/views/accessibility/accessibility_example.js b/src-docs/src/views/accessibility/accessibility_example.js
index 53dbc1d8f4f..43e42e7ce9e 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');
@@ -144,26 +146,59 @@ export const AccessibilityExample = {
{' '}
for role to aria-live mapping.
+
+ Also consider other live region guidelines, such as that live
+ regions must be present on initial page load, and should not be in a
+ conditional JSX wrapper.
+
+ >
+ ),
+ props: {
+ EuiScreenReaderLive,
+ },
+ snippet: `
+
+`,
+ demo: ,
+ },
+ {
+ text: (
+ <>
+ Auto-focusing the live region on text change
The focusRegionOnTextChange prop will
- automatically focus the live region (causing screen readers to read
- out the text content) whenever children changes.
+ automatically focus the EuiScreenReaderLive{' '}
+ region (causing screen readers to read out the text content)
+ whenever children changes.
+
+
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 EuiScreenReaderLive{' '}
is placed) is desired.
- Also consider other live region guidelines, such as that live
- regions must be present on initial page load, and should not be in a
- conditional JSX wrapper.
+
+ 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,
},
- demo: ,
+ snippet: `
+
+`,
+ demo: ,
+ source: [
+ {
+ type: GuideSectionTypes.TSX,
+ code: screenReaderLiveFocusSource,
+ },
+ ],
},
{
title: 'Skip link',
diff --git a/src-docs/src/views/accessibility/screen_reader_live_focus.tsx b/src-docs/src/views/accessibility/screen_reader_live_focus.tsx
new file mode 100644
index 00000000000..07db90989bb
--- /dev/null
+++ b/src-docs/src/views/accessibility/screen_reader_live_focus.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+
+import {
+ EuiScreenReaderLive,
+ EuiPageTemplate,
+ EuiSideNav,
+ EuiButton,
+} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
+export default () => {
+ const idGenerator = htmlIdGenerator('focusRegionOnTextChange');
+
+ const [pageTitle, setPageTitle] = useState('Home');
+
+ const sideNav = [
+ {
+ name: 'Example side nav',
+ id: idGenerator(),
+ items: [
+ {
+ name: 'Home',
+ id: idGenerator(),
+ onClick: () => setPageTitle('Home'),
+ },
+ {
+ name: 'About',
+ id: idGenerator(),
+ onClick: () => setPageTitle('About'),
+ },
+ {
+ name: 'Docs',
+ id: idGenerator(),
+ onClick: () => setPageTitle('Docs'),
+ },
+ {
+ name: 'Contact',
+ id: idGenerator(),
+ onClick: () => setPageTitle('Contact'),
+ },
+ ],
+ },
+ ];
+
+ return (
+ <>
+ }
+ pageHeader={{
+ iconType: 'logoElastic',
+ pageTitle: pageTitle,
+ }}
+ >
+
+ {pageTitle}
+
+
+ Clicking a nav link and then pressing tab should focus this button
+
+
+ >
+ );
+};
From c4298ed0df8a2a7fc91d5fc6ff3ebafc8f1347c4 Mon Sep 17 00:00:00 2001
From: Constance Chen
Date: Fri, 24 Jun 2022 14:18:57 -0700
Subject: [PATCH 15/16] Messed up a snippet
---
src-docs/src/views/accessibility/accessibility_example.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src-docs/src/views/accessibility/accessibility_example.js b/src-docs/src/views/accessibility/accessibility_example.js
index 43e42e7ce9e..202d6805b16 100644
--- a/src-docs/src/views/accessibility/accessibility_example.js
+++ b/src-docs/src/views/accessibility/accessibility_example.js
@@ -158,7 +158,7 @@ export const AccessibilityExample = {
},
snippet: `
-`,
+`,
demo: ,
},
{
From 9215ef339219bbb3a53c46ccc557fc1972cff811 Mon Sep 17 00:00:00 2001
From: Constance Chen
Date: Fri, 24 Jun 2022 14:23:13 -0700
Subject: [PATCH 16/16] Fix documentation example on small screens
---
src-docs/src/views/accessibility/screen_reader_live_focus.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src-docs/src/views/accessibility/screen_reader_live_focus.tsx b/src-docs/src/views/accessibility/screen_reader_live_focus.tsx
index 07db90989bb..d06df404f97 100644
--- a/src-docs/src/views/accessibility/screen_reader_live_focus.tsx
+++ b/src-docs/src/views/accessibility/screen_reader_live_focus.tsx
@@ -45,7 +45,7 @@ export default () => {
return (
<>
}
+ pageSideBar={}
pageHeader={{
iconType: 'logoElastic',
pageTitle: pageTitle,