From 75dfdce80891e2ec1f33dcdc77c0e76738f50778 Mon Sep 17 00:00:00 2001
From: Andrew Huth <ahuth@chanzuckerberg.com>
Date: Wed, 29 Nov 2023 15:38:04 -0500
Subject: [PATCH] fix: add live region to loading indicator

So screen readers will read out "Loading"
---
 .../core/LoadingIndicator/__snapshots__/index.test.tsx.snap   | 2 ++
 packages/components/src/core/LoadingIndicator/index.tsx       | 4 +++-
 2 files changed, 5 insertions(+), 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
index 404a431be..67a318628 100644
--- 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
index be68cabaf..e0f6c013c 100644
--- 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>
   );
 };