From 6f35fce8f922f862bf0545229855d490bee8f3a6 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 16 Sep 2024 16:31:22 +0200
Subject: [PATCH 1/8] copy changes from #4927

---
 .changeset/selectpanel-announcements.md       |   5 +
 ...FilteredActionListWithModernActionList.tsx |   2 +
 .../FilteredActionList/useAnnouncements.tsx   |  97 ++++++++++++++
 .../src/SelectPanel/SelectPanel.test.tsx      | 124 +++++++++++++-----
 .../react/src/SelectPanel/SelectPanel.tsx     |  23 ++--
 .../live-region/__tests__/Announce.test.tsx   |  10 +-
 .../live-region/__tests__/AriaAlert.test.tsx  |  10 +-
 .../live-region/__tests__/AriaStatus.test.tsx |  10 +-
 packages/react/src/utils/testing.tsx          |   9 ++
 9 files changed, 221 insertions(+), 69 deletions(-)
 create mode 100644 .changeset/selectpanel-announcements.md
 create mode 100644 packages/react/src/FilteredActionList/useAnnouncements.tsx

diff --git a/.changeset/selectpanel-announcements.md b/.changeset/selectpanel-announcements.md
new file mode 100644
index 00000000000..c2465b10950
--- /dev/null
+++ b/.changeset/selectpanel-announcements.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: Add announcements for screen readers (behind feature flag `primer_react_select_panel_with_modern_action_list`)
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
index ae791e63909..052bda57b49 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
@@ -20,6 +20,7 @@ import type {SxProp} from '../sx'
 
 import {isValidElementType} from 'react-is'
 import type {RenderItemFn} from '../deprecated/ActionList/List'
+import {useAnnouncements} from './useAnnouncements'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -114,6 +115,7 @@ export function FilteredActionList({
   }, [items])
 
   useScrollFlash(scrollContainerRef)
+  useAnnouncements(items, listContainerRef, inputRef)
 
   function getItemListForEachGroup(groupId: string) {
     const itemsInGroup = []
diff --git a/packages/react/src/FilteredActionList/useAnnouncements.tsx b/packages/react/src/FilteredActionList/useAnnouncements.tsx
new file mode 100644
index 00000000000..8b419d92584
--- /dev/null
+++ b/packages/react/src/FilteredActionList/useAnnouncements.tsx
@@ -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],
+  )
+}
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
index 7d6adfbb3ae..af7e07a1f73 100644
--- a/packages/react/src/SelectPanel/SelectPanel.test.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -1,10 +1,11 @@
-import {render, screen} from '@testing-library/react'
+import {render, screen, waitFor} from '@testing-library/react'
 import React from 'react'
 import {SelectPanel, type SelectPanelProps} from '../SelectPanel'
 import type {ItemInput, GroupedListProps} from '../deprecated/ActionList/List'
 import {userEvent} from '@testing-library/user-event'
 import ThemeProvider from '../ThemeProvider'
 import {FeatureFlags} from '../FeatureFlags'
+import {getLiveRegion} from '../utils/testing'
 
 const renderWithFlag = (children: React.ReactNode, flag: boolean) => {
   return render(
@@ -336,39 +337,39 @@ for (const useModernActionList of [false, true]) {
         })
       })
 
-      describe('filtering', () => {
-        function FilterableSelectPanel() {
-          const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
-          const [filter, setFilter] = React.useState('')
-          const [open, setOpen] = React.useState(false)
-
-          const onSelectedChange = (selected: SelectPanelProps['items']) => {
-            setSelected(selected)
-          }
+      function FilterableSelectPanel() {
+        const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
+        const [filter, setFilter] = React.useState('')
+        const [open, setOpen] = React.useState(false)
 
-          return (
-            <ThemeProvider>
-              <SelectPanel
-                title="test title"
-                subtitle="test subtitle"
-                items={items.filter(item => item.text?.includes(filter))}
-                placeholder="Select items"
-                placeholderText="Filter items"
-                selected={selected}
-                onSelectedChange={onSelectedChange}
-                filterValue={filter}
-                onFilterChange={value => {
-                  setFilter(value)
-                }}
-                open={open}
-                onOpenChange={isOpen => {
-                  setOpen(isOpen)
-                }}
-              />
-            </ThemeProvider>
-          )
+        const onSelectedChange = (selected: SelectPanelProps['items']) => {
+          setSelected(selected)
         }
 
+        return (
+          <ThemeProvider>
+            <SelectPanel
+              title="test title"
+              subtitle="test subtitle"
+              items={items.filter(item => item.text?.includes(filter))}
+              placeholder="Select items"
+              placeholderText="Filter items"
+              selected={selected}
+              onSelectedChange={onSelectedChange}
+              filterValue={filter}
+              onFilterChange={value => {
+                setFilter(value)
+              }}
+              open={open}
+              onOpenChange={isOpen => {
+                setOpen(isOpen)
+              }}
+            />
+          </ThemeProvider>
+        )
+      }
+
+      describe('filtering', () => {
         it('should filter the list of items when the user types into the input', async () => {
           const user = userEvent.setup()
 
@@ -381,10 +382,67 @@ for (const useModernActionList of [false, true]) {
           await user.type(document.activeElement!, 'two')
           expect(screen.getAllByRole('option')).toHaveLength(1)
         })
+      })
+
+      describe('screen reader announcements', () => {
+        // this is only implemented with the feature flag
+        if (!useModernActionList) return
+
+        it('should announce initial focused item', async () => {
+          const user = userEvent.setup()
+          renderWithFlag(<FilterableSelectPanel />, useModernActionList)
+
+          await user.click(screen.getByText('Select items'))
+          expect(screen.getByLabelText('Filter items')).toHaveFocus()
+
+          // we wait because announcement is intentionally updated after a timeout to not interrupt user input
+          await waitFor(async () => {
+            expect(getLiveRegion().getMessage('polite')).toBe(
+              'Focus on filter text box and list of labels, Focused item: item one, not selected, 1 of 3',
+            )
+          })
+        })
+
+        it('should announce filtered results', async () => {
+          const user = userEvent.setup()
+          renderWithFlag(<FilterableSelectPanel />, useModernActionList)
+
+          await user.click(screen.getByText('Select items'))
+          await user.type(document.activeElement!, 'o')
+          expect(screen.getAllByRole('option')).toHaveLength(2)
+
+          await waitFor(
+            async () => {
+              expect(getLiveRegion().getMessage('polite')).toBe(
+                'List updated, Focused item: item one, not selected, 1 of 2',
+              )
+            },
+            {timeout: 3000}, // increased timeout because we don't want the test to compare with previous announcement
+          )
+
+          await user.type(document.activeElement!, 'ne') // now: one
+          expect(screen.getAllByRole('option')).toHaveLength(1)
+
+          await waitFor(async () => {
+            expect(getLiveRegion().getMessage('polite')).toBe(
+              'List updated, Focused item: item one, not selected, 1 of 1',
+            )
+          })
+        })
 
-        it.todo('should announce the number of results')
+        it('should announce when no results are available', async () => {
+          const user = userEvent.setup()
+          renderWithFlag(<FilterableSelectPanel />, useModernActionList)
 
-        it.todo('should announce when no results are available')
+          await user.click(screen.getByText('Select items'))
+
+          await user.type(document.activeElement!, 'zero')
+          expect(screen.queryByRole('option')).toBeNull()
+
+          await waitFor(async () => {
+            expect(getLiveRegion().getMessage('polite')).toBe('No matching items.')
+          })
+        })
       })
 
       describe('with footer', () => {
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index edf35fafee6..efae1b5a7e1 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -17,6 +17,7 @@ import type {FocusZoneHookSettings} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion'
+import {useFeatureFlag} from '../FeatureFlags'
 
 interface SelectPanelSingleSelection {
   selected: ItemInput | undefined
@@ -174,6 +175,8 @@ export function SelectPanel({
     }
   }, [inputLabel, textInputProps])
 
+  const usingModernActionList = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
+
   return (
     <LiveRegion>
       <AnchoredOverlay
@@ -192,15 +195,17 @@ export function SelectPanel({
         focusZoneSettings={focusZoneSettings}
       >
         <LiveRegionOutlet />
-        <Message
-          value={
-            filterValue === ''
-              ? 'Showing all items'
-              : items.length <= 0
-              ? 'No matching items'
-              : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`
-          }
-        />
+        {usingModernActionList ? null : (
+          <Message
+            value={
+              filterValue === ''
+                ? 'Showing all items'
+                : items.length <= 0
+                ? 'No matching items'
+                : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`
+            }
+          />
+        )}
         <Box sx={{display: 'flex', flexDirection: 'column', height: 'inherit', maxHeight: 'inherit'}}>
           <Box sx={{pt: 2, px: 3}}>
             <Heading as="h1" id={titleId} sx={{fontSize: 1}}>
diff --git a/packages/react/src/live-region/__tests__/Announce.test.tsx b/packages/react/src/live-region/__tests__/Announce.test.tsx
index 5586297a8dd..b3364bf9c2b 100644
--- a/packages/react/src/live-region/__tests__/Announce.test.tsx
+++ b/packages/react/src/live-region/__tests__/Announce.test.tsx
@@ -1,15 +1,7 @@
 import {render, screen} from '@testing-library/react'
 import React from 'react'
-import type {LiveRegionElement} from '@primer/live-region-element'
 import {Announce} from '../Announce'
-
-function getLiveRegion(): LiveRegionElement {
-  const liveRegion = document.querySelector('live-region')
-  if (liveRegion) {
-    return liveRegion as LiveRegionElement
-  }
-  throw new Error('No live-region found')
-}
+import {getLiveRegion} from '../../utils/testing'
 
 describe('Announce', () => {
   beforeEach(() => {
diff --git a/packages/react/src/live-region/__tests__/AriaAlert.test.tsx b/packages/react/src/live-region/__tests__/AriaAlert.test.tsx
index e51e4558d44..91c4d83731e 100644
--- a/packages/react/src/live-region/__tests__/AriaAlert.test.tsx
+++ b/packages/react/src/live-region/__tests__/AriaAlert.test.tsx
@@ -1,15 +1,7 @@
 import {render, screen} from '@testing-library/react'
 import React from 'react'
-import type {LiveRegionElement} from '@primer/live-region-element'
 import {AriaAlert} from '../AriaAlert'
-
-function getLiveRegion(): LiveRegionElement {
-  const liveRegion = document.querySelector('live-region')
-  if (liveRegion) {
-    return liveRegion as LiveRegionElement
-  }
-  throw new Error('No live-region found')
-}
+import {getLiveRegion} from '../../utils/testing'
 
 describe('AriaAlert', () => {
   beforeEach(() => {
diff --git a/packages/react/src/live-region/__tests__/AriaStatus.test.tsx b/packages/react/src/live-region/__tests__/AriaStatus.test.tsx
index 29bed2c78fb..16465c03a5c 100644
--- a/packages/react/src/live-region/__tests__/AriaStatus.test.tsx
+++ b/packages/react/src/live-region/__tests__/AriaStatus.test.tsx
@@ -1,16 +1,8 @@
 import {render, screen} from '@testing-library/react'
 import React from 'react'
-import type {LiveRegionElement} from '@primer/live-region-element'
 import {AriaStatus} from '../AriaStatus'
 import {userEvent} from '@testing-library/user-event'
-
-function getLiveRegion(): LiveRegionElement {
-  const liveRegion = document.querySelector('live-region')
-  if (liveRegion) {
-    return liveRegion as LiveRegionElement
-  }
-  throw new Error('No live-region found')
-}
+import {getLiveRegion} from '../../utils/testing'
 
 describe('AriaStatus', () => {
   beforeEach(() => {
diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx
index 5f013cd9624..5f5f1caa257 100644
--- a/packages/react/src/utils/testing.tsx
+++ b/packages/react/src/utils/testing.tsx
@@ -7,6 +7,7 @@ import axe from 'axe-core'
 import customRules from '@github/axe-github'
 import {ThemeProvider} from '..'
 import {default as defaultTheme} from '../theme'
+import type {LiveRegionElement} from '@primer/live-region-element'
 
 type ComputedStyles = Record<string, string | Record<string, string>>
 
@@ -270,3 +271,11 @@ export function checkStoriesForAxeViolations(name: string, storyDir?: string) {
     })
   })
 }
+
+export function getLiveRegion(): LiveRegionElement {
+  const liveRegion = document.querySelector('live-region')
+  if (liveRegion) {
+    return liveRegion as LiveRegionElement
+  }
+  throw new Error('No live-region found')
+}

From 0f9778e646ee1c7d8414bf8dcc0b96e30291adc5 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 16 Sep 2024 16:36:34 +0200
Subject: [PATCH 2/8] fix index to announce

---
 packages/react/src/FilteredActionList/useAnnouncements.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/FilteredActionList/useAnnouncements.tsx b/packages/react/src/FilteredActionList/useAnnouncements.tsx
index 8b419d92584..597f43b779a 100644
--- a/packages/react/src/FilteredActionList/useAnnouncements.tsx
+++ b/packages/react/src/FilteredActionList/useAnnouncements.tsx
@@ -87,7 +87,7 @@ export const useAnnouncements = (
           `List updated`,
           `Focused item: ${text}`,
           `${selected ? 'selected' : 'not selected'}`,
-          `${index} of ${items.length}`,
+          `${index + 1} of ${items.length}`,
         ].join(', ')
         announce(announcementText, {delayMs})
       })

From 0fa24b21be4daa470ab16286178f89c76751812a Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 17 Sep 2024 15:00:24 +0200
Subject: [PATCH 3/8] add liveRegion.clear

---
 .../src/FilteredActionList/useAnnouncements.tsx    | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/FilteredActionList/useAnnouncements.tsx b/packages/react/src/FilteredActionList/useAnnouncements.tsx
index 597f43b779a..fc6a121a575 100644
--- a/packages/react/src/FilteredActionList/useAnnouncements.tsx
+++ b/packages/react/src/FilteredActionList/useAnnouncements.tsx
@@ -1,7 +1,7 @@
 // Announcements for FilteredActionList (and SelectPanel) based
 // on https://github.com/github/multi-select-user-testing
 
-import {announce} from '@primer/live-region-element'
+import {LiveRegionElement, announce} from '@primer/live-region-element'
 import {useEffect, useRef} from 'react'
 import type {FilteredActionListProps} from './FilteredActionListEntry'
 
@@ -41,6 +41,8 @@ export const useAnnouncements = (
   listContainerRef: React.RefObject<HTMLUListElement>,
   inputRef: React.RefObject<HTMLInputElement>,
 ) => {
+  const liveRegion = document.querySelector('live-region') as LiveRegionElement
+
   useEffect(
     function announceInitialFocus() {
       const focusHandler = () => {
@@ -56,7 +58,7 @@ export const useAnnouncements = (
             `${selected ? 'selected' : 'not selected'}`,
             `${index + 1} of ${items.length}`,
           ].join(', ')
-          announce(announcementText, {delayMs})
+          announce(announcementText, {delayMs, from: liveRegion})
         })
       }
 
@@ -64,7 +66,7 @@ export const useAnnouncements = (
       inputElement?.addEventListener('focus', focusHandler)
       return () => inputElement?.removeEventListener('focus', focusHandler)
     },
-    [listContainerRef, inputRef, items],
+    [listContainerRef, inputRef, items, liveRegion],
   )
 
   const isFirstRender = useFirstRender()
@@ -72,6 +74,8 @@ export const useAnnouncements = (
     function announceListUpdates() {
       if (isFirstRender) return // ignore on first render as announceInitialFocus will also announce
 
+      liveRegion.clear() // clear previous announcements
+
       if (items.length === 0) {
         announce('No matching items.', {delayMs})
         return
@@ -89,9 +93,9 @@ export const useAnnouncements = (
           `${selected ? 'selected' : 'not selected'}`,
           `${index + 1} of ${items.length}`,
         ].join(', ')
-        announce(announcementText, {delayMs})
+        announce(announcementText, {delayMs, from: liveRegion})
       })
     },
-    [listContainerRef, inputRef, items, isFirstRender],
+    [listContainerRef, inputRef, items, isFirstRender, liveRegion],
   )
 }

From 2b9c7688304e878c774ca90e4c526e90095d9765 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 17 Sep 2024 15:07:49 +0200
Subject: [PATCH 4/8] separate type import

---
 packages/react/src/FilteredActionList/useAnnouncements.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/FilteredActionList/useAnnouncements.tsx b/packages/react/src/FilteredActionList/useAnnouncements.tsx
index fc6a121a575..3500b5b01f5 100644
--- a/packages/react/src/FilteredActionList/useAnnouncements.tsx
+++ b/packages/react/src/FilteredActionList/useAnnouncements.tsx
@@ -1,7 +1,8 @@
 // Announcements for FilteredActionList (and SelectPanel) based
 // on https://github.com/github/multi-select-user-testing
 
-import {LiveRegionElement, announce} from '@primer/live-region-element'
+import {announce} from '@primer/live-region-element'
+import type {LiveRegionElement} from '@primer/live-region-element'
 import {useEffect, useRef} from 'react'
 import type {FilteredActionListProps} from './FilteredActionListEntry'
 

From 33e8df0b55ef2bbf1633815a2c59b9b61121e232 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Wed, 18 Sep 2024 15:35:09 +0200
Subject: [PATCH 5/8] remove hard coded "labels"

---
 packages/react/src/FilteredActionList/useAnnouncements.tsx | 2 +-
 packages/react/src/SelectPanel/SelectPanel.test.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/FilteredActionList/useAnnouncements.tsx b/packages/react/src/FilteredActionList/useAnnouncements.tsx
index 3500b5b01f5..8e15aaa767d 100644
--- a/packages/react/src/FilteredActionList/useAnnouncements.tsx
+++ b/packages/react/src/FilteredActionList/useAnnouncements.tsx
@@ -54,7 +54,7 @@ export const useAnnouncements = (
           const {index, text, selected} = activeItem
 
           const announcementText = [
-            `Focus on filter text box and list of labels`,
+            `Focus on filter text box and list of items`,
             `Focused item: ${text}`,
             `${selected ? 'selected' : 'not selected'}`,
             `${index + 1} of ${items.length}`,
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
index af7e07a1f73..936f3b544fc 100644
--- a/packages/react/src/SelectPanel/SelectPanel.test.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -398,7 +398,7 @@ for (const useModernActionList of [false, true]) {
           // we wait because announcement is intentionally updated after a timeout to not interrupt user input
           await waitFor(async () => {
             expect(getLiveRegion().getMessage('polite')).toBe(
-              'Focus on filter text box and list of labels, Focused item: item one, not selected, 1 of 3',
+              'Focus on filter text box and list of items, Focused item: item one, not selected, 1 of 3',
             )
           })
         })

From c1aaac8634022eb30431c8afd8ba0ddbe2da2f01 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Thu, 19 Sep 2024 16:21:24 +0200
Subject: [PATCH 6/8] 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<HTMLUListElement>,
   inputRef: React.RefObject<HTMLInputElement>,
 ) => {
-  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],
   )
 }

From d88eecf0bab916fcb283c32bf241d0533e1ad365 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 20 Sep 2024 17:25:23 +0200
Subject: [PATCH 7/8] bump @primer/live-region-element to 0.7.1

---
 package-lock.json           | 9 +++++----
 packages/react/package.json | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f17bb879c38..e2e950d5166 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6724,8 +6724,9 @@
       }
     },
     "node_modules/@primer/live-region-element": {
-      "version": "0.7.0",
-      "license": "MIT",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@primer/live-region-element/-/live-region-element-0.7.1.tgz",
+      "integrity": "sha512-9uQCeBCb3wefz3kJNSo+PECc7T7TNB3k22JUdHY08Zlv9bd1rtsQgpazM5umcbZQrACzGbgufAfdbhGUBXI3jA==",
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.2.0"
       }
@@ -34152,7 +34153,7 @@
         "@lit-labs/react": "1.2.1",
         "@oddbird/popover-polyfill": "^0.3.1",
         "@primer/behaviors": "^1.7.2",
-        "@primer/live-region-element": "^0.7.0",
+        "@primer/live-region-element": "^0.7.1",
         "@primer/octicons-react": "^19.9.0",
         "@primer/primitives": "^9.0.3",
         "@styled-system/css": "^5.1.5",
@@ -34220,7 +34221,7 @@
         "@types/react-test-renderer": "18.3.0",
         "@types/semver": "7.5.8",
         "@types/styled-components": "^5.1.26",
-        "@vitejs/plugin-react": "4.3.1",
+        "@vitejs/plugin-react": "^4.3.1",
         "ajv": "8.16.0",
         "axe-core": "4.9.1",
         "babel-core": "7.0.0-bridge.0",
diff --git a/packages/react/package.json b/packages/react/package.json
index a269875753a..8d301680135 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -95,7 +95,7 @@
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.3.1",
     "@primer/behaviors": "^1.7.2",
-    "@primer/live-region-element": "^0.7.0",
+    "@primer/live-region-element": "^0.7.1",
     "@primer/octicons-react": "^19.9.0",
     "@primer/primitives": "^9.0.3",
     "@styled-system/css": "^5.1.5",

From 473a5a2ae8d5a91bbbace4b9caa2f80d97b59db9 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 20 Sep 2024 17:28:34 +0200
Subject: [PATCH 8/8] lint!!!

---
 packages/react/src/FilteredActionList/useAnnouncements.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/FilteredActionList/useAnnouncements.tsx b/packages/react/src/FilteredActionList/useAnnouncements.tsx
index e26454259d7..aa48a8a2b45 100644
--- a/packages/react/src/FilteredActionList/useAnnouncements.tsx
+++ b/packages/react/src/FilteredActionList/useAnnouncements.tsx
@@ -2,7 +2,6 @@
 // on https://github.com/github/multi-select-user-testing
 
 import {announce} from '@primer/live-region-element'
-import type {LiveRegionElement} from '@primer/live-region-element'
 import {useEffect, useRef} from 'react'
 import type {FilteredActionListProps} from './FilteredActionListEntry'