[Accessibility][Autocomplete] Announce "no selectable options" (#5662)

* Announce no selectable options

* changeset

* change Announce strategy do debounce

* add missing useEffect dep

.changeset/chilled-rules-yell.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Autocomplete: Use aria-live to announce "no selectable options".

package.json

@@ -45,6 +45,7 @@
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.1",
     "@github/axe-github": "0.6.1",
+    "@github/mini-throttle": "2.1.1",
     "@github/markdownlint-github": "^0.6.0",
     "@github/prettier-config": "0.0.6",
     "@mdx-js/react": "1.6.22",

packages/react/src/Autocomplete/AutocompleteMenu.tsx

@@ -1,4 +1,6 @@
 import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'
+import {debounce} from '@github/mini-throttle'
+import {announce} from '@primer/live-region-element'
 import {scrollIntoView} from '@primer/behaviors'
 import type {ScrollIntoViewOptions} from '@primer/behaviors'
 import type {ActionListItemProps} from '../ActionList'
@@ -122,6 +124,14 @@ export type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
 
 const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
+/**
+ * Announces a message to screen readers at a slowed-down rate. This is useful when you want to announce don't want to
+ * overwhelm the user with too many announcements in rapid succession.
+ */
+const debounceAnnouncement = debounce((announcement: string) => {
+  announce(announcement)
+}, 250)
+
 function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T>) {
   const autocompleteContext = useContext(AutocompleteContext)
   if (autocompleteContext === null) {
@@ -267,6 +277,12 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
     allItemsToRenderRef.current = allItemsToRender
   })
 
+  React.useEffect(() => {
+    if (allItemsToRender.length === 0) {
+      debounceAnnouncement(emptyStateText as string)
+    }
+  }, [allItemsToRender, emptyStateText])
+
   useFocusZone(
     {
       containerRef: listContainerRef,