Fix: Ensure dynamically updated label is announced

packages/react/src/Button/Button.features.stories.tsx

@@ -1,6 +1,8 @@
 import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react'
 import React, {useState} from 'react'
 import {Button} from '.'
+import {announce} from '@primer/live-region-element'
+import Link from '../Link'
 
 export default {
   title: 'Components/Button/Features',
@@ -16,44 +18,81 @@ export const LeadingVisual = () => <Button leadingVisual={HeartIcon}>Leading vis
 
 export const TrailingVisual = () => <Button trailingVisual={EyeIcon}>Trailing visual</Button>
 
+const AccessibilityNote = () => {
+  {
+    return (
+      <>
+        <p>
+          <b>Accessibility note</b>: If a button is dynamically updated to communicate a change (e.g. an action was
+          successful), please make sure that this is also properly communicated to screen reader users. This may not
+          happen reliably without additional markup considerations. Make sure to choose an approach that is appropriate
+          for your usecase.
+        </p>
+        <p>
+          Learn more about at{' '}
+          <Link href="https://github.com/github/accessibility/blob/8b300b36d8bca28fd5e3e70ffa077a6f8ee65c05/docs/wiki/screen-reader-testing/dynamically-updated-buttons-support-april-2024.md">
+            Staff-only: Dynamically updated button labels
+          </Link>
+          .
+        </p>
+      </>
+    )
+  }
+}
 export const TrailingCounter = () => {
   const [count, setCount] = useState(0)
+  const onClick = () => {
+    setCount(count + 1)
+    announce(`Watch ${count + 1}`)
+  }
   return (
-    <Button onClick={() => setCount(count + 1)} count={count}>
-      Watch
-    </Button>
+    <>
+      <Button onClick={onClick} count={count}>
+        Watch
+      </Button>
+      <AccessibilityNote />
+      <p>In this example, a live region has been implemented to communicate the change.</p>
+    </>
   )
 }
 
 export const TrailingCounterAllVariants = () => {
   const [count, setCount] = useState(0)
+  const onClick = () => {
+    setCount(count + 1)
+    announce(`Watch ${count + 1}`)
+  }
   return (
-    <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
-      <Button onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button disabled onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="primary" onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="primary" disabled onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="danger" onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="danger" disabled onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="invisible" onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-      <Button variant="invisible" disabled onClick={() => setCount(count + 1)} count={count}>
-        Watch
-      </Button>
-    </div>
+    <>
+      <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+        <Button onClick={onClick} count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} variant="primary" disabled count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} variant="danger" count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} variant="danger" disabled count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} variant="invisible" count={count}>
+          Watch
+        </Button>
+        <Button onClick={onClick} variant="invisible" disabled count={count}>
+          Watch
+        </Button>
+      </div>
+      <AccessibilityNote />
+      <p>In these examples, a live region has been implemented to communicate the change.</p>
+    </>
   )
 }