From af1cc73842e732edd48ec57646c2639fc67c5ae9 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Fri, 21 Jun 2024 13:21:33 -0500
Subject: [PATCH] fix(Spinner): update container to use span instead of div
 (#4692)

* fix(Spinner): update container to use span instead of div

* test: update snapshots

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
---
 packages/react/src/Spinner/Spinner.tsx        |  2 +-
 .../__snapshots__/Autocomplete.test.tsx.snap  |  4 +-
 .../__snapshots__/TextInput.test.tsx.snap     | 80 +++++++++----------
 .../TextInputWithTokens.test.tsx.snap         | 80 +++++++++----------
 4 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index 33f7e1a6ddd..6a4ebe096a1 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -29,7 +29,7 @@ function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ar
 
   return (
     /* inline-flex removes the extra line height */
-    <Box sx={{display: 'inline-flex'}}>
+    <Box as="span" sx={{display: 'inline-flex'}}>
       <svg
         height={size}
         width={size}
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index d14c31a9576..b6bccde352f 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -373,7 +373,7 @@ exports[`snapshots renders a loading state 1`] = `
       className="c1"
       display="flex"
     >
-      <div
+      <span
         className="c2"
       >
         <svg
@@ -408,7 +408,7 @@ exports[`snapshots renders a loading state 1`] = `
         >
           Loading
         </span>
-      </div>
+      </span>
     </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 701b6f458da..4b9c8473991 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -4094,7 +4094,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c3"
         display="flex"
       >
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -4134,7 +4134,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -4308,7 +4308,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c3"
         >
           <svg
@@ -4348,7 +4348,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <input
@@ -4365,7 +4365,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c3"
         >
           <svg
@@ -4405,7 +4405,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -4580,7 +4580,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c3"
         display="flex"
       >
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -4620,7 +4620,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -4828,7 +4828,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -4873,7 +4873,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <input
@@ -4890,7 +4890,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -4930,7 +4930,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -5138,7 +5138,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -5183,7 +5183,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <input
@@ -5200,7 +5200,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -5240,7 +5240,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -5448,7 +5448,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -5493,7 +5493,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <input
@@ -5510,7 +5510,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -5550,7 +5550,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -5759,7 +5759,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c5"
         >
           <svg
@@ -5804,7 +5804,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -5987,7 +5987,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c3"
         >
           <svg
@@ -6027,7 +6027,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <input
@@ -6069,7 +6069,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c3"
         >
           <svg
@@ -6114,7 +6114,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -6323,7 +6323,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c5"
         >
           <svg
@@ -6368,7 +6368,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -6594,7 +6594,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -6639,7 +6639,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <input
@@ -6681,7 +6681,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -6726,7 +6726,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -6943,7 +6943,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -6988,7 +6988,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <input
@@ -7030,7 +7030,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -7075,7 +7075,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -7299,7 +7299,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -7344,7 +7344,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <input
@@ -7386,7 +7386,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -7431,7 +7431,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 93bba2847fa..b2f31ba4456 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -6986,7 +6986,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c9"
         display="flex"
       >
-        <div
+        <span
           className="c10"
         >
           <svg
@@ -7026,7 +7026,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -7381,7 +7381,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c3"
         >
           <svg
@@ -7421,7 +7421,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <div
@@ -7848,7 +7848,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c3"
         >
           <svg
@@ -7888,7 +7888,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -8654,7 +8654,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c9"
         display="flex"
       >
-        <div
+        <span
           className="c10"
         >
           <svg
@@ -8694,7 +8694,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -9083,7 +9083,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -9128,7 +9128,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <div
@@ -9555,7 +9555,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -9595,7 +9595,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -9984,7 +9984,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -10029,7 +10029,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <div
@@ -10456,7 +10456,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -10496,7 +10496,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -10885,7 +10885,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -10930,7 +10930,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <div
@@ -11357,7 +11357,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -11397,7 +11397,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -12197,7 +12197,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c11"
         >
           <svg
@@ -12242,7 +12242,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -12606,7 +12606,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
         className="c2"
         display="flex"
       >
-        <div
+        <span
           className="c3"
         >
           <svg
@@ -12646,7 +12646,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <div
@@ -13098,7 +13098,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c3"
         >
           <svg
@@ -13143,7 +13143,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -13943,7 +13943,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c11"
         >
           <svg
@@ -13988,7 +13988,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -14391,7 +14391,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -14436,7 +14436,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <div
@@ -14888,7 +14888,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -14933,7 +14933,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -15331,7 +15331,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -15376,7 +15376,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <div
@@ -15828,7 +15828,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -15873,7 +15873,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,
@@ -16269,7 +16269,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -16314,7 +16314,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
     <div
@@ -16766,7 +16766,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
             />
           </svg>
         </div>
-        <div
+        <span
           className="c4"
         >
           <svg
@@ -16811,7 +16811,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
           >
             Loading
           </span>
-        </div>
+        </span>
       </div>
     </span>
   </span>,