Merge branch 'main' into issues-templates-updates

chanzuckerberg · Nov 30, 2023 · 53ae1c3 · 53ae1c3
2 parents 4891f55 + 9126293
commit 53ae1c3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/packages/components/src/core/LoadingIndicator/__snapshots__/index.test.tsx.snap b/packages/components/src/core/LoadingIndicator/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<LoadingIndicator /> CustomAriaLabel story renders snapshot 1`] = `
+<div
+  class="css-1o5w4es"
+>
+  <div
+    class="css-1ft6wgl"
+  >
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
+      data-file-name="IconLoadingLarge"
+      data-testid="IconLoadingLarge"
+      fillcontrast="white"
+      focusable="false"
+      viewBox="0 0 22 22"
+    />
+  </div>
+  <span
+    aria-label="Loading cats list..."
+    aria-live="polite"
+    class="css-1xm9l9z"
+    role="status"
+  >
+    Loading
+  </span>
+</div>
+`;
+
 exports[`<LoadingIndicator /> Default story renders snapshot 1`] = `
 <div
   class="css-1o5w4es"
@@ -18,7 +46,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.stories.tsx b/packages/components/src/core/LoadingIndicator/index.stories.tsx
@@ -27,6 +27,13 @@ export const Default = {
   },
 };
 
+export const CustomAriaLabel = {
+  args: {
+    "aria-label": "Loading cats list...",
+    sdsStyle: "minimal",
+  },
+};
+
 // Live Preview
 
 const LivePreviewDemo = (props: Args): JSX.Element => {

diff --git a/packages/components/src/core/LoadingIndicator/index.tsx b/packages/components/src/core/LoadingIndicator/index.tsx
@@ -8,13 +8,20 @@ import {
 export type LoadingIndicatorProps = Omit<
   RawLoadingIndicatorProps,
   "nonce" | "rev" | "rel" | "autoFocus" | "content"
->;
+> & {
+  "aria-label"?: string;
+};
 
-const LoadingIndicator = ({ sdsStyle }: LoadingIndicatorProps): JSX.Element => {
+const LoadingIndicator = ({
+  "aria-label": ariaLabel,
+  sdsStyle,
+}: LoadingIndicatorProps): JSX.Element => {
   return (
     <StyledLoadingIndicator sdsStyle={sdsStyle}>
       <Icon sdsIcon="loading" sdsSize="l" sdsType="static" />
-      <StyledText>Loading</StyledText>
+      <StyledText aria-label={ariaLabel} aria-live="polite" role="status">
+        Loading
+      </StyledText>
     </StyledLoadingIndicator>
   );
 };