From 24ecc41fefd52bdd15a49ab0d3b0e335d0d9c0d1 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 3 Jun 2024 14:56:57 -0400
Subject: [PATCH] Add default accName to `spinner`

---
 packages/react/src/Spinner/Spinner.tsx | 44 +++++++++++++++-----------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index 52fe378508f..2562bc62e29 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import type {SxProp} from '../sx'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
+import Box from '../Box'
+import VisuallyHidden from '../_VisuallyHidden'
 
 const sizeMap = {
   small: '16px',
@@ -13,30 +15,34 @@ const sizeMap = {
 export interface SpinnerInternalProps {
   /** Sets the width and height of the spinner. */
   size?: keyof typeof sizeMap
+  'aria-label'?: string
 }
 
-function Spinner({size: sizeKey = 'medium', ...props}: SpinnerInternalProps) {
+function Spinner({size: sizeKey = 'medium', 'aria-label': ariaLabel, ...props}: SpinnerInternalProps) {
   const size = sizeMap[sizeKey]
 
   return (
-    <svg height={size} width={size} viewBox="0 0 16 16" fill="none" {...props}>
-      <circle
-        cx="8"
-        cy="8"
-        r="7"
-        stroke="currentColor"
-        strokeOpacity="0.25"
-        strokeWidth="2"
-        vectorEffect="non-scaling-stroke"
-      />
-      <path
-        d="M15 8a7.002 7.002 0 00-7-7"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        vectorEffect="non-scaling-stroke"
-      />
-    </svg>
+    <Box>
+      <svg height={size} width={size} viewBox="0 0 16 16" fill="none" aria-label={ariaLabel} {...props}>
+        <circle
+          cx="8"
+          cy="8"
+          r="7"
+          stroke="currentColor"
+          strokeOpacity="0.25"
+          strokeWidth="2"
+          vectorEffect="non-scaling-stroke"
+        />
+        <path
+          d="M15 8a7.002 7.002 0 00-7-7"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+      {!ariaLabel ? <VisuallyHidden>Loading</VisuallyHidden> : null}
+    </Box>
   )
 }