make skeletons non-focusable and add appropriate aria attribute

aragon · Apr 16, 2024 · 9250b5a · 9250b5a
1 parent a75c529
commit 9250b5a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/src/core/components/states/stateSkeletonBar/stateSkeletonBar.tsx b/src/core/components/states/stateSkeletonBar/stateSkeletonBar.tsx
@@ -5,7 +5,7 @@ import { responsiveUtils } from '../../../utils';
 
 export type SkeletonBarSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
-export interface IStateSkeletonBarProps extends ComponentPropsWithoutRef<'div'> {
+export interface IStateSkeletonBarProps extends ComponentPropsWithoutRef<'span'> {
     /**
      *  Responsive size attribute for the skeleton.
      */
@@ -34,7 +34,16 @@ export const StateSkeletonBar = forwardRef<HTMLDivElement, IStateSkeletonBarProp
         className,
     );
 
-    return <div data-testid="stateSkeletonBar" ref={ref} className={classes} {...otherProps} />;
+    return (
+        <span
+            data-testid="stateSkeletonBar"
+            ref={ref}
+            className={classes}
+            tabIndex={-1}
+            aria-hidden={true}
+            {...otherProps}
+        />
+    );
 });
 
 StateSkeletonBar.displayName = 'StateSkeletonBar';
diff --git a/src/core/components/states/stateSkeletonCircular/stateSkeletonCircular.tsx b/src/core/components/states/stateSkeletonCircular/stateSkeletonCircular.tsx
@@ -5,7 +5,7 @@ import { responsiveUtils } from '../../../utils';
 
 export type SkeletonCircularSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
-export interface IStateSkeletonCircularProps extends ComponentPropsWithoutRef<'div'> {
+export interface IStateSkeletonCircularProps extends ComponentPropsWithoutRef<'span'> {
     /**
      *  Responsive size attribute for the skeleton.
      */
@@ -34,7 +34,16 @@ export const StateSkeletonCircular = forwardRef<HTMLDivElement, IStateSkeletonCi
         className,
     );
 
-    return <div data-testid="stateSkeletonCircular" ref={ref} className={classes} {...otherProps} />;
+    return (
+        <span
+            data-testid="stateSkeletonCircular"
+            ref={ref}
+            className={classes}
+            tabIndex={-1}
+            aria-hidden={true}
+            {...otherProps}
+        />
+    );
 });
 
 StateSkeletonCircular.displayName = 'StateSkeletonCircular';