InlineSpinner fixes (#306)

* fix(inline-spinner): fix invalid html

* feat(inline-spinner): add role=progressbar

* test(inline-spinner): update snapshots

---------

Co-authored-by: lena <[email protected]>

Author: shiba-codes

src/components/InlineSpinner/InlineSpinner.tsx

@@ -37,7 +37,7 @@ const rotation = keyframes`
     }
 `;
 
-const InlineSpinnerIcon: React.FC<InlineSpinnerProps> = styled.div<InlineSpinnerProps>`
+const InlineSpinnerIcon: React.FC<InlineSpinnerProps> = styled.span<InlineSpinnerProps>`
     display: inline-block;
     box-sizing: border-box;
     width: 1.25rem;
@@ -52,7 +52,7 @@ const InlineSpinnerIcon: React.FC<InlineSpinnerProps> = styled.div<InlineSpinner
 `;
 
 const InlineSpinner: FC<InlineSpinnerProps> = (props: InlineSpinnerProps) => (
-    <span>
+    <span role="progressbar">
         <InlineSpinnerIcon {...props} />
     </span>
 );

src/components/InlineSpinner/__snapshots__/InlineSpinner.spec.tsx.snap

@@ -17,8 +17,10 @@ exports[`InlineSpinner renders in a custom color 1`] = `
   border-width: 0.125rem;
 }
 
-<span>
-  <div
+<span
+  role="progressbar"
+>
+  <span
     class="c0"
     color="#069D4F"
   />
@@ -42,8 +44,10 @@ exports[`InlineSpinner renders the default variant 1`] = `
   border-width: 0.125rem;
 }
 
-<span>
-  <div
+<span
+  role="progressbar"
+>
+  <span
     class="c0"
     color="#001E3E"
   />
@@ -67,8 +71,10 @@ exports[`InlineSpinner renders the small size 1`] = `
   border-width: 0.1rem;
 }
 
-<span>
-  <div
+<span
+  role="progressbar"
+>
+  <span
     class="c0"
     color="#001E3E"
   />