Add default accName to spinner

primer · Jun 3, 2024 · 24ecc41 · 24ecc41
1 parent 43dcf55
commit 24ecc41
Showing 1 changed file with 25 additions and 19 deletions.
diff --git 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>
   )
 }