From 113eb66f6cd205e4fbf8edbc22c2112985f85b28 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 20 Jun 2024 13:05:32 -0500
Subject: [PATCH 1/2] fix(Spinner): update visually hidden container to span

---
 packages/react/src/Spinner/Spinner.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index c980c506be8..33f7e1a6ddd 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -57,7 +57,11 @@ function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ar
           vectorEffect="non-scaling-stroke"
         />
       </svg>
-      {hasHiddenLabel ? <VisuallyHidden id={labelId}>{srText}</VisuallyHidden> : null}
+      {hasHiddenLabel ? (
+        <VisuallyHidden as="span" id={labelId}>
+          {srText}
+        </VisuallyHidden>
+      ) : null}
     </Box>
   )
 }

From 723217fefa726b897ad297b9afe440d2c0b4232b Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 20 Jun 2024 13:56:28 -0500
Subject: [PATCH 2/2] chore: update snpashots

---
 .../__snapshots__/Autocomplete.test.tsx.snap  |  4 +-
 .../__snapshots__/TextInput.test.tsx.snap     | 80 +++++++++----------
 .../TextInputWithTokens.test.tsx.snap         | 80 +++++++++----------
 3 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index be8b5ad1be1..d14c31a9576 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -402,12 +402,12 @@ exports[`snapshots renders a loading state 1`] = `
             vectorEffect="non-scaling-stroke"
           />
         </svg>
-        <div
+        <span
           className="c4"
           id=":r1v:"
         >
           Loading
-        </div>
+        </span>
       </div>
     </div>
   </span>,
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 950abfd0af7..701b6f458da 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -4128,12 +4128,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rn:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -4342,12 +4342,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c5"
             id=":ro:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -4399,12 +4399,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c5"
             id=":rp:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -4614,12 +4614,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rq:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -4867,12 +4867,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rr:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -4924,12 +4924,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rs:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -5177,12 +5177,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rt:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -5234,12 +5234,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":ru:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -5487,12 +5487,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rv:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -5544,12 +5544,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":r10:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -5798,12 +5798,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c7"
             id=":r11:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -6021,12 +6021,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c5"
             id=":r12:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -6108,12 +6108,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c5"
             id=":r13:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -6362,12 +6362,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c7"
             id=":r14:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -6633,12 +6633,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":r15:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -6720,12 +6720,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":r16:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -6982,12 +6982,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":r17:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -7069,12 +7069,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":r18:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -7338,12 +7338,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":r19:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -7425,12 +7425,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":r1a:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 21b8a0695d4..93bba2847fa 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -7020,12 +7020,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c12"
             id=":re:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -7415,12 +7415,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c5"
             id=":rf:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -7882,12 +7882,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c5"
             id=":rg:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -8688,12 +8688,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c12"
             id=":rh:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -9122,12 +9122,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":ri:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -9589,12 +9589,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rj:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -10023,12 +10023,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rk:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -10490,12 +10490,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rl:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -10924,12 +10924,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rm:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -11391,12 +11391,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rn:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -12236,12 +12236,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c13"
             id=":ro:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -12640,12 +12640,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c5"
             id=":rp:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -13137,12 +13137,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c5"
             id=":rq:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -13982,12 +13982,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c13"
             id=":rr:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -14430,12 +14430,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rs:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -14927,12 +14927,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rt:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -15370,12 +15370,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":ru:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -15867,12 +15867,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":rv:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -16308,12 +16308,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":r10:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>
@@ -16805,12 +16805,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
               vectorEffect="non-scaling-stroke"
             />
           </svg>
-          <div
+          <span
             className="c6"
             id=":r11:"
           >
             Loading
-          </div>
+          </span>
         </div>
       </div>
     </span>