From c1aaac8634022eb30431c8afd8ba0ddbe2da2f01 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Thu, 19 Sep 2024 16:21:24 +0200 Subject: [PATCH] don't assume live region exists --- .../src/FilteredActionList/useAnnouncements.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/react/src/FilteredActionList/useAnnouncements.tsx b/packages/react/src/FilteredActionList/useAnnouncements.tsx index 8e15aaa767d..e26454259d7 100644 --- a/packages/react/src/FilteredActionList/useAnnouncements.tsx +++ b/packages/react/src/FilteredActionList/useAnnouncements.tsx @@ -42,7 +42,7 @@ export const useAnnouncements = ( listContainerRef: React.RefObject, inputRef: React.RefObject, ) => { - const liveRegion = document.querySelector('live-region') as LiveRegionElement + const liveRegion = document.querySelector('live-region') useEffect( function announceInitialFocus() { @@ -59,7 +59,10 @@ export const useAnnouncements = ( `${selected ? 'selected' : 'not selected'}`, `${index + 1} of ${items.length}`, ].join(', ') - announce(announcementText, {delayMs, from: liveRegion}) + announce(announcementText, { + delayMs, + from: liveRegion ? liveRegion : undefined, // announce will create a liveRegion if it doesn't find one + }) }) } @@ -75,7 +78,7 @@ export const useAnnouncements = ( function announceListUpdates() { if (isFirstRender) return // ignore on first render as announceInitialFocus will also announce - liveRegion.clear() // clear previous announcements + liveRegion?.clear() // clear previous announcements if (items.length === 0) { announce('No matching items.', {delayMs}) @@ -94,9 +97,13 @@ export const useAnnouncements = ( `${selected ? 'selected' : 'not selected'}`, `${index + 1} of ${items.length}`, ].join(', ') - announce(announcementText, {delayMs, from: liveRegion}) + + announce(announcementText, { + delayMs, + from: liveRegion ? liveRegion : undefined, // announce will create a liveRegion if it doesn't find one + }) }) }, - [listContainerRef, inputRef, items, isFirstRender, liveRegion], + [isFirstRender, items, listContainerRef, liveRegion], ) }