removes live region

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

@@ -2,6 +2,7 @@ import React from 'react'
 import type {Meta} from '@storybook/react'
 import Spinner from './Spinner'
 import {Box} from '..'
+import {Status} from '../internal/components/Status'
 
 export default {
   title: 'Components/Spinner/Features',
@@ -15,6 +16,6 @@ export const Large = () => <Spinner size="large" />
 export const SuppressScreenReaderText = () => (
   <Box sx={{alignItems: 'center', display: 'flex', gap: '0.25rem'}}>
     <Spinner size="small" srText={null} />
-    <span role="status">Loading...</span>
+    <Status>Loading...</Status>
   </Box>
 )

packages/react/src/Spinner/Spinner.tsx

@@ -4,7 +4,7 @@ import sx, {type SxProp} from '../sx'
 import {VisuallyHidden} from '../internal/components/VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
 import Box from '../Box'
-import {Status} from '../internal/components/Status'
+import {useId} from '../hooks'
 
 const sizeMap = {
   small: '16px',
@@ -25,11 +25,20 @@ export type SpinnerProps = {
 function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ariaLabel, ...props}: SpinnerProps) {
   const size = sizeMap[sizeKey]
   const hasSrAnnouncement = Boolean(srText || ariaLabel)
+  const ariaLabelId = useId()
 
   return (
     /* inline-flex removes the extra line height */
-    <Box sx={{display: 'inline-flex'}} role={hasSrAnnouncement ? 'status' : undefined}>
-      <svg height={size} width={size} viewBox="0 0 16 16" fill="none" aria-hidden {...props}>
+    <Box sx={{display: 'inline-flex'}}>
+      <svg
+        height={size}
+        width={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        aria-hidden
+        aria-labelledby={ariaLabelId}
+        {...props}
+      >
         <circle
           cx="8"
           cy="8"
@@ -47,11 +56,7 @@ function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ar
           vectorEffect="non-scaling-stroke"
         />
       </svg>
-      {hasSrAnnouncement ? (
-        <VisuallyHidden>
-          <Status>{srText || ariaLabel}</Status>
-        </VisuallyHidden>
-      ) : null}
+      {hasSrAnnouncement ? <VisuallyHidden id={ariaLabelId}>{srText || ariaLabel}</VisuallyHidden> : null}
     </Box>
   )
 }

packages/react/src/__tests__/Spinner.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
+import axe from 'axe-core'
 import type {SpinnerProps} from '..'
 import {Spinner} from '..'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
 
 describe('Spinner', () => {
   behavesAsComponent({
@@ -14,22 +14,22 @@ describe('Spinner', () => {
     default: Spinner,
   })
 
-  it('should render an ARIA live region with default loading text', async () => {
-    const {getByRole} = HTMLRender(<Spinner />)
+  it('should label the spinner with default loading text', async () => {
+    const {getByLabelText} = HTMLRender(<Spinner />)
 
-    expect(getByRole('status').textContent).toBe('Loading')
+    expect(getByLabelText('Loading')).toBeInTheDocument()
   })
 
-  it('should render an ARIA live region with custom loading text', async () => {
-    const {getByRole} = HTMLRender(<Spinner srText="Custom loading text" />)
+  it('should label the spinner with with custom loading text', async () => {
+    const {getByLabelText} = HTMLRender(<Spinner srText="Custom loading text" />)
 
-    expect(getByRole('status').textContent).toBe('Custom loading text')
+    expect(getByLabelText('Custom loading text')).toBeInTheDocument()
   })
 
-  it('should not render an ARIA live region with loading text when `srText` is set to `null`', async () => {
-    const {queryByRole} = HTMLRender(<Spinner srText={null} />)
+  it('should not label the spinner with with loading text when `srText` is set to `null`', async () => {
+    const {getByLabelText} = HTMLRender(<Spinner srText={null} />)
 
-    expect(queryByRole('status')).not.toBeInTheDocument()
+    expect(() => getByLabelText('Loading')).toThrow()
   })
 
   it('should have no axe violations', async () => {

packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -375,10 +375,10 @@ exports[`snapshots renders a loading state 1`] = `
     >
       <div
         className="c2"
-        role="status"
       >
         <svg
           aria-hidden={true}
+          aria-labelledby=":r1v:"
           className="c3"
           fill="none"
           height="32px"
@@ -404,12 +404,9 @@ exports[`snapshots renders a loading state 1`] = `
         </svg>
         <div
           className="c4"
+          id=":r1v:"
         >
-          <div
-            className=""
-          >
-            Loading
-          </div>
+          Loading
         </div>
       </div>
     </div>