From 799ead8838551e9c2a7ce81db6dd51714dc69817 Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Thu, 10 Oct 2024 14:48:08 -0400
Subject: [PATCH] Docs(ActionList): use internal AriaStatus to announce updates
 in example story (#5096)

* Docs(ActionList): use internal LiveRegion to announce updates

* Docs(ActionList): use AriaStatus to announce status instead of LiveRegion, async story

* Update packages/react/src/ActionList/ActionList.examples.stories.tsx

Co-authored-by: Josh Black <joshblack@github.com>

* docs(ActionList): format

---------

Co-authored-by: Josh Black <joshblack@github.com>
---
 .../ActionList.examples.stories.tsx           | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/ActionList/ActionList.examples.stories.tsx b/packages/react/src/ActionList/ActionList.examples.stories.tsx
index 1b3b2981c2d..8bbfe594692 100644
--- a/packages/react/src/ActionList/ActionList.examples.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.examples.stories.tsx
@@ -19,8 +19,9 @@ import TextInput from '../TextInput'
 import Spinner from '../Spinner'
 import Box from '../Box'
 import Text from '../Text'
-import VisuallyHidden from '../_VisuallyHidden'
 import FormControl from '../FormControl'
+import {AriaStatus} from '../live-region'
+import {VisuallyHidden} from '../VisuallyHidden'
 
 const meta: Meta = {
   title: 'Components/ActionList/Examples',
@@ -177,15 +178,24 @@ export function AsyncListWithSpinner(): JSX.Element {
   const [results, setResults] = React.useState(branches.slice(0, 6))
   const [loading, setLoading] = React.useState(false)
   const [selected, setSelected] = React.useState('main')
+  const [filterVal, setFilterVal] = React.useState('')
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const filter = async (event: any) => {
     setLoading(true)
     const filteredResults = await filterSlowly(event.target.value)
     setResults(filteredResults.slice(0, 6))
+    setFilterVal(event.target.value)
     setLoading(false)
   }
 
+  const getStatusMessage = () => {
+    if (loading) return 'Loading results'
+    if (!filterVal) return 'Showing top 6 branches'
+    if (results.length === 0) return 'No branches match that query'
+    return `Branches filtered, showing ${results.length} branches`
+  }
+
   return (
     <>
       <h1>Async List</h1>
@@ -198,13 +208,13 @@ export function AsyncListWithSpinner(): JSX.Element {
         <FormControl.Label>Search branches</FormControl.Label>
         <TextInput onChange={filter} block />
       </FormControl>
-      <div role="status">
-        {results.length === 0 ? (
-          <Text sx={{display: 'block', fontSize: 1, m: 2}}>No branches match that query</Text>
-        ) : (
-          <VisuallyHidden>{results.length} branches match that query</VisuallyHidden>
-        )}
-      </div>
+      {results.length === 0 ? (
+        <Text sx={{display: 'block', fontSize: 1, m: 2}}>No branches match that query</Text>
+      ) : null}
+
+      <VisuallyHidden>
+        <AriaStatus>{getStatusMessage()}</AriaStatus>
+      </VisuallyHidden>
 
       <ActionList selectionVariant="single" role="listbox" aria-label="Branch" sx={{height: 208, overflow: 'auto'}}>
         {loading ? (