feat(ActionCard): improve accessibility for loading state and types

livechat · Jan 30, 2025 · 2708e4b · 2708e4b
1 parent 2b7716c
commit 2708e4b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/packages/react-components/src/components/ActionCard/ActionCard.module.scss b/packages/react-components/src/components/ActionCard/ActionCard.module.scss
@@ -13,6 +13,18 @@ $base-class: 'action-card';
   }
 }
 
+.visually-hidden {
+  position: absolute;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0, 0, 0, 0);
+}
+
 .main-wrapper {
   container-type: inline-size;
 

diff --git a/packages/react-components/src/components/ActionCard/ActionCard.tsx b/packages/react-components/src/components/ActionCard/ActionCard.tsx
@@ -53,9 +53,13 @@ export const ActionCard: FC<PropsWithChildren<ActionCardProps>> = ({
 
   return (
     <div className={wrapperClassNames}>
+      <div aria-live="polite" className={styles['visually-hidden']}>
+        {isLoading ? 'Loading content' : null}
+      </div>
       <div
         role={isLoading ? 'presentation' : 'button'}
         aria-label="Action Card"
+        aria-busy={isLoading}
         tabIndex={isLoading ? -1 : 0}
         className={mergedClassNames}
         onClick={handleOnClick}

diff --git a/packages/react-components/src/components/ActionCard/types.ts b/packages/react-components/src/components/ActionCard/types.ts
@@ -1,6 +1,27 @@
 import * as React from 'react';
 
-export interface ActionCardProps {
+export type ActionCardProps = (
+  | {
+      /**
+       * Specify if the card is in loading state
+       */
+      isLoading: true;
+      /**
+       * Specify if the card is in animated loading state
+       */
+      isLoadingAnimated?: boolean;
+    }
+  | {
+      /**
+       * Specify if the card is in loading state
+       */
+      isLoading?: false;
+      /**
+       * Loading animation is not available when not loading
+       */
+      isLoadingAnimated?: never;
+    }
+) & {
   /**
    * The CSS class for main container
    */
@@ -21,12 +42,4 @@ export interface ActionCardProps {
    * Optional handler called on card click
    */
   onClick?: () => void;
-  /**
-   * Specify if the card is in loading state
-   */
-  isLoading?: boolean;
-  /**
-   * Specify if the card is in animated loading state
-   */
-  isLoadingAnimated?: boolean;
-}
+};