diff --git a/.changeset/rare-humans-watch.md b/.changeset/rare-humans-watch.md new file mode 100644 index 00000000000..631fa45936a --- /dev/null +++ b/.changeset/rare-humans-watch.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +SelectPanel: Announce changes to screen readers diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx index e89c351280a..dfcac4cdd97 100644 --- a/src/SelectPanel/SelectPanel.tsx +++ b/src/SelectPanel/SelectPanel.tsx @@ -1,7 +1,8 @@ -import {useId} from '../hooks/useId' +import {SearchIcon} from '@primer/octicons-react' import React, {useCallback, useMemo} from 'react' import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay' import {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay' +import Box from '../Box' import {FilteredActionList, FilteredActionListProps} from '../FilteredActionList' import Heading from '../Heading' import {OverlayProps} from '../Overlay' @@ -11,9 +12,9 @@ import {ItemInput} from '../deprecated/ActionList/List' import {DropdownButton} from '../deprecated/DropdownMenu' import {useProvidedRefOrCreate} from '../hooks' import {FocusZoneHookSettings} from '../hooks/useFocusZone' +import {useId} from '../hooks/useId' import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate' -import Box from '../Box' -import {SearchIcon} from '@primer/octicons-react' +import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion' interface SelectPanelSingleSelection { selected: ItemInput | undefined @@ -160,39 +161,51 @@ export function SelectPanel({ }, [inputLabel, textInputProps]) return ( - - - - - {title} - - - + + + - - + + + + {title} + + + + + + ) }