-
Notifications
You must be signed in to change notification settings - Fork 534
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
223 additions
and
69 deletions.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@primer/react": patch | ||
--- | ||
|
||
SelectPanel: Add announcements for screen readers (behind feature flag `primer_react_select_panel_with_modern_action_list`) |
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
97 changes: 97 additions & 0 deletions
97
packages/react/src/FilteredActionList/useAnnouncements.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,97 @@ | ||
// Announcements for FilteredActionList (and SelectPanel) based | ||
// on https://github.com/github/multi-select-user-testing | ||
|
||
import {announce} from '@primer/live-region-element' | ||
import {useEffect, useRef} from 'react' | ||
import type {FilteredActionListProps} from './FilteredActionListEntry' | ||
|
||
// we add a delay so that it does not interrupt default screen reader announcement and queues after it | ||
const delayMs = 500 | ||
|
||
const useFirstRender = () => { | ||
const firstRender = useRef(true) | ||
useEffect(() => { | ||
firstRender.current = false | ||
}, []) | ||
return firstRender.current | ||
} | ||
|
||
const getItemWithActiveDescendant = ( | ||
listRef: React.RefObject<HTMLUListElement>, | ||
items: FilteredActionListProps['items'], | ||
) => { | ||
const listElement = listRef.current | ||
const activeItemElement = listElement?.querySelector('[data-is-active-descendant]') | ||
|
||
if (!listElement || !activeItemElement?.textContent) return | ||
|
||
const optionElements = listElement.querySelectorAll('[role="option"]') | ||
|
||
const index = Array.from(optionElements).indexOf(activeItemElement) | ||
const activeItem = items[index] | ||
|
||
const text = activeItem.text | ||
const selected = activeItem.selected | ||
|
||
return {index, text, selected} | ||
} | ||
|
||
export const useAnnouncements = ( | ||
items: FilteredActionListProps['items'], | ||
listContainerRef: React.RefObject<HTMLUListElement>, | ||
inputRef: React.RefObject<HTMLInputElement>, | ||
) => { | ||
useEffect( | ||
function announceInitialFocus() { | ||
const focusHandler = () => { | ||
// give @primer/behaviors a moment to apply active-descendant | ||
window.requestAnimationFrame(() => { | ||
const activeItem = getItemWithActiveDescendant(listContainerRef, items) | ||
if (!activeItem) return | ||
const {index, text, selected} = activeItem | ||
|
||
const announcementText = [ | ||
`Focus on filter text box and list of labels`, | ||
`Focused item: ${text}`, | ||
`${selected ? 'selected' : 'not selected'}`, | ||
`${index + 1} of ${items.length}`, | ||
].join(', ') | ||
announce(announcementText, {delayMs}) | ||
}) | ||
} | ||
|
||
const inputElement = inputRef.current | ||
inputElement?.addEventListener('focus', focusHandler) | ||
return () => inputElement?.removeEventListener('focus', focusHandler) | ||
}, | ||
[listContainerRef, inputRef, items], | ||
) | ||
|
||
const isFirstRender = useFirstRender() | ||
useEffect( | ||
function announceListUpdates() { | ||
if (isFirstRender) return // ignore on first render as announceInitialFocus will also announce | ||
|
||
if (items.length === 0) { | ||
announce('No matching items.', {delayMs}) | ||
return | ||
} | ||
|
||
// give @primer/behaviors a moment to update active-descendant | ||
window.requestAnimationFrame(() => { | ||
const activeItem = getItemWithActiveDescendant(listContainerRef, items) | ||
if (!activeItem) return | ||
const {index, text, selected} = activeItem | ||
|
||
const announcementText = [ | ||
`List updated`, | ||
`Focused item: ${text}`, | ||
`${selected ? 'selected' : 'not selected'}`, | ||
`${index} of ${items.length}`, | ||
].join(', ') | ||
announce(announcementText, {delayMs}) | ||
}) | ||
}, | ||
[listContainerRef, inputRef, items, isFirstRender], | ||
) | ||
} |
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
10 changes: 1 addition & 9 deletions
10
packages/react/src/live-region/__tests__/AriaStatus.test.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
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