[Do not review] Ensure button counter 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 React, {useState, useRef} from 'react'
 import {Button} from '.'
+import {announce} from '@primer/live-region-element'
+import VisuallyHidden from '../_VisuallyHidden'
 
 export default {
   title: 'Components/Button/Features',
@@ -16,7 +18,7 @@ export const LeadingVisual = () => <Button leadingVisual={HeartIcon}>Leading vis
 
 export const TrailingVisual = () => <Button trailingVisual={EyeIcon}>Trailing visual</Button>
 
-export const TrailingCounter = () => {
+export const TrailingButtonNothing = () => {
   const [count, setCount] = useState(0)
   return (
     <Button onClick={() => setCount(count + 1)} count={count}>
@@ -25,6 +27,74 @@ export const TrailingCounter = () => {
   )
 }
 
+export const TrailingCounterWithAriaLabel = () => {
+  const [count, setCount] = useState(0)
+  return (
+    <Button aria-label={`Watch (${count})`} onClick={() => setCount(count + 1)} count={count}>
+      Watch
+    </Button>
+  )
+}
+
+export const TrailingCounterWithFocusBouncing = () => {
+  const [count, setCount] = useState(0)
+  const onClick = () => {
+    setCount(count + 1)
+    // i think the proper react way is to pass a ref??
+    const button = document.querySelector('#test-1') as HTMLElement
+    // eslint-disable-next-line github/no-blur
+    button.blur()
+    setTimeout(() => {
+      button.focus()
+    }, 250)
+  }
+  return (
+    <div>
+      <Button id="test-1" onClick={onClick} count={count}>
+        Watch
+      </Button>
+    </div>
+  )
+}
+
+export const TrailingCounterWithPoliteLiveRegion = () => {
+  const [count, setCount] = useState(0)
+  return (
+    <Button aria-live="polite" aria-atomic="true" onClick={() => setCount(count + 1)} count={count}>
+      Watch
+    </Button>
+  )
+}
+
+export const TrailingCounterWithAdjacentLiveRegion = () => {
+  const [count, setCount] = useState(0)
+
+  const onClick = () => {
+    setCount(count + 1)
+    announce(`Watch (${count + 1})`)
+  }
+  return (
+    <div>
+      <Button onClick={onClick}>Watch</Button>
+    </div>
+  )
+}
+
+export const TrailingCounterWithNestedLiveRegion = () => {
+  const [count, setCount] = useState(0)
+
+  const onClick = () => {
+    setCount(count + 1)
+  }
+  return (
+    <div>
+      <Button dynamicallyUpdated={true} onClick={onClick} count={count}>
+        Watch
+      </Button>
+    </div>
+  )
+}
+
 export const TrailingCounterAllVariants = () => {
   const [count, setCount] = useState(0)
   return (

packages/react/src/Button/ButtonBase.tsx

@@ -19,6 +19,7 @@ const ButtonBase = forwardRef(
       trailingVisual: TrailingVisual,
       trailingAction: TrailingAction,
       count,
+      dynamicallyUpdated,
       icon: Icon,
       variant = 'default',
       size = 'medium',
@@ -62,7 +63,6 @@ const ButtonBase = forwardRef(
         }
       }, [innerRef])
     }
-
     return (
       <StyledButton
         as={Component}
@@ -78,7 +78,13 @@ const ButtonBase = forwardRef(
           <Icon />
         ) : (
           <>
-            <Box as="span" data-component="buttonContent" sx={getAlignContentSize(alignContent)}>
+            <Box
+              as="span"
+              data-component="buttonContent"
+              sx={getAlignContentSize(alignContent)}
+              aria-live={dynamicallyUpdated ? 'polite' : undefined}
+              aria-atomic={dynamicallyUpdated ? 'true' : undefined}
+            >
               {LeadingVisual && (
                 <Box as="span" data-component="leadingVisual" sx={{...iconWrapStyles}}>
                   <LeadingVisual />

packages/react/src/Button/types.ts

@@ -72,7 +72,7 @@ export type ButtonProps = {
   trailingAction?: React.ElementType | null
 
   children?: React.ReactNode
-
+  dynamicallyUpdated?: boolean
   count?: number
 } & ButtonBaseProps