fix: add live region to loading indicator

So screen readers will read out "Loading"
chanzuckerberg · Nov 29, 2023 · 75dfdce · 75dfdce
1 parent eb6870f
commit 75dfdce
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/components/src/core/LoadingIndicator/__snapshots__/index.test.tsx.snap b/packages/components/src/core/LoadingIndicator/__snapshots__/index.test.tsx.snap
@@ -18,7 +18,9 @@ exports[`<LoadingIndicator /> Default story renders snapshot 1`] = `
     />
   </div>
   <span
+    aria-live="polite"
     class="css-1xm9l9z"
+    role="status"
   >
     Loading
   </span>

diff --git a/packages/components/src/core/LoadingIndicator/index.tsx b/packages/components/src/core/LoadingIndicator/index.tsx
@@ -14,7 +14,9 @@ const LoadingIndicator = ({ sdsStyle }: LoadingIndicatorProps): JSX.Element => {
   return (
     <StyledLoadingIndicator sdsStyle={sdsStyle}>
       <Icon sdsIcon="loading" sdsSize="l" sdsType="static" />
-      <StyledText>Loading</StyledText>
+      <StyledText aria-live="polite" role="status">
+        Loading
+      </StyledText>
     </StyledLoadingIndicator>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up @@
         />
       </div>
       <span
+        aria-live="polite"
         class="css-1xm9l9z"
+        role="status"
       >
         Loading
       </span>
@@ Expand Down @@