-
Notifications
You must be signed in to change notification settings - Fork 840
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.
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
Update EuiScreenReaderLive
and use it in EUI Docs to announce page loads to screen readers
#5995
Merged
1Copenut
merged 18 commits into
elastic:main
from
1Copenut:feature/tpierce-live-region-docs-ii
Jun 28, 2022
Merged
Changes from all commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
de9e5eb
Adding focus control to EuiScreenReaderLive
1Copenut 458ddfa
Updating skip link tests.
1Copenut cc7f2e9
Adding CHANGELOG entry.
1Copenut 29f3e4f
Splitting useEffects, making skip link color dynamic.
1Copenut e30d0ab
Fix toggle announcing too much on sub section link clicks
cee-chen 65dc9e1
Improve subsection links screen reader experience
cee-chen 7288e1e
Updating one test after in-page link improvement.
1Copenut 61ba738
Fixing main merge conflict.
1Copenut 1b2dfb9
Renaming a prop in unit tests.
1Copenut 0df382f
misc tweaks/fixes to previous constance commits
cee-chen f9b8e56
[PR feedback] EuiSkipLink `color` prop
cee-chen 8306354
[PR feedback] Revert EuiSkipLink changes
cee-chen 52cc406
Update src-docs/src/views/accessibility/accessibility_example.js
1Copenut 9a12d7b
Update src/components/accessibility/screen_reader_live/screen_reader_…
1Copenut 1cd22d5
Add documentation section for `focusRegionOnTextChange` + example
cee-chen 87cc233
Merge branch 'feature/tpierce-live-region-docs-ii' of https://github.…
cee-chen c4298ed
Messed up a snippet
cee-chen 9215ef3
Fix documentation example on small screens
cee-chen File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
src-docs/src/views/accessibility/screen_reader_live_focus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<> | ||
<EuiPageTemplate | ||
pageSideBar={<EuiSideNav items={sideNav} isOpenOnMobile />} | ||
pageHeader={{ | ||
iconType: 'logoElastic', | ||
pageTitle: pageTitle, | ||
}} | ||
> | ||
<EuiScreenReaderLive focusRegionOnTextChange> | ||
{pageTitle} | ||
</EuiScreenReaderLive> | ||
<EuiButton> | ||
Clicking a nav link and then pressing tab should focus this button | ||
</EuiButton> | ||
</EuiPageTemplate> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
- Added `focusRegionOnTextChange` prop to `EuiScreenReaderLive` |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome unit tests!