Update src/components/cardStack/layouts/carousels/AutoCarousel.tsx

src/components/cardStack/layouts/carousels/AutoCarousel.tsx

@@ -1,26 +1,25 @@
-import React, { useContext } from 'react';
-import { CardStackContext } from '../../CardStackContext';
+import { ReactNode } from 'react';
+import { useCardStack } from '../../CardStackContext';
 
-interface AutoCarouselProps {
-  children: React.ReactNode;
+export interface AutoCarouselProps {
+  children: ReactNode;
   className?: string;
+  ariaLabel?: string;
 }
 
-export const AutoCarousel: React.FC<AutoCarouselProps> = ({ children, className = '' }) => {
-  const context = useContext(CardStackContext);
-
-  if (!context) {
-    return <div className={className}>{children}</div>;
-  }
-
-  const { isVisible, getAnimationProps } = context;
+export function AutoCarousel({ children, className = '', ariaLabel = 'Auto carousel' }: AutoCarouselProps) {
+  const { isVisible, getAnimationProps } = useCardStack();
   const animationProps = getAnimationProps();
 
   return (
-    <div className={className} {...animationProps}>
+    <div
+      className={className}
+      aria-label={ariaLabel}
+      data-is-visible={animationProps.isVisible}
+    >
       {children}
     </div>
   );
-};
+}
 
-export default AutoCarousel;
+export default AutoCarousel;