Add aria-label to carousel component

Author: Kubit

src/components/carousel/__tests__/carousel.test.tsx

@@ -482,15 +482,17 @@ describe('Carousel component', () => {
 
   it('Should have aria-label in the document when prop is set', async () => {
     const { getByLabelText } = renderProvider(
-      <CarouselUnControlled {...mockProps} aria-label="Mock aria-label" />
+      <CarouselUnControlled {...mockProps} aria-label='Mock aria-label'/>
     );
 
     const label = getByLabelText('Mock aria-label');
     expect(label).toBeInTheDocument();
   });
 
   it('Should not have aria-label in the document when prop is not set', async () => {
-    const { queryByLabelText } = renderProvider(<CarouselUnControlled {...mockProps} />);
+    const { queryByLabelText } = renderProvider(
+      <CarouselUnControlled {...mockProps} />
+    );
 
     const label = queryByLabelText('');
     expect(label).not.toBeInTheDocument();

src/components/carousel/carousel.styled.ts

@@ -158,6 +158,10 @@ export const ArrowRightIconContainer = styled.div<{
     top: 0;
     ${({ styles }) =>
       getStyles(styles[CarouselArrowStateType.DEFAULT]?.arrowRightIconButtonContainer)};
+    &:focus {
+      ${props =>
+        getStyles(props.styles[CarouselArrowStateType.DEFAULT]?.arrowLeftIconButtonContainer)}
+    }
     &:hover {
       ${props =>
         getStyles(props.styles[CarouselArrowStateType.HOVER]?.arrowRightIconButtonContainer)}

src/components/carousel/carouselUnControlled.tsx

@@ -42,16 +42,13 @@ const CarouselUnControlledComponent = <V extends string | unknown>(
   };
 
   const onLeftSwipe = () => {
-    setCurrentPage(prevPage => {
-      let newPage = prevPage;
-      if (allowShift.current && (circular || prevPage !== 0)) {
-        newPage = prevPage === 0 ? numPages - 1 : prevPage - 1;
-        handlePageChange(-1);
-        onPageChange?.(newPage);
-        // onTransition is called internally when drag starts
-      }
-      return newPage;
-    });
+    if (allowShift.current && (circular || innerCurrentPage.current !== 0)) {
+      const newPage = innerCurrentPage.current === 0 ? numPages - 1 : innerCurrentPage.current - 1;
+      handlePageChange(-1);
+      onPageChange?.(newPage);
+      // onTransition is called internally when drag starts
+      setCurrentPage(newPage);
+    }
   };
 
   const handleClickRightArrow = e => {
@@ -67,16 +64,13 @@ const CarouselUnControlledComponent = <V extends string | unknown>(
   };
 
   const onRightSwipe = () => {
-    setCurrentPage(prevPage => {
-      let newPage = prevPage;
-      if (allowShift.current && (circular || prevPage !== numPages - 1)) {
-        newPage = (newPage + 1) % numPages;
-        handlePageChange(1);
-        onPageChange?.(newPage);
-        // onTransition is called internally when drag starts
-      }
-      return newPage;
-    });
+    if (allowShift.current && (circular || innerCurrentPage.current !== numPages - 1)) {
+      const newPage = (innerCurrentPage.current + 1) % numPages;
+      handlePageChange(1);
+      onPageChange?.(newPage);
+      setCurrentPage(newPage);
+      // onTransition is called internally when drag starts
+    }
   };
 
   const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {

src/components/carousel/stories/carousel.stories.tsx

@@ -8,7 +8,7 @@ import { themesObject, variantsObject } from '@/designSystem/themesObject';
 import { DeviceBreakpointsType, ROLES } from '@/types';
 
 import { CarouselUnControlled as Story } from '../carouselUnControlled';
-import { CarouselAlignType } from '../types';
+import { CarouselAlignType, ICarouselUnControlled } from '../types';
 import { argtypes } from './argtypes';
 
 const themeSelected = localStorage.getItem('themeSelected') || 'kubit';
@@ -30,96 +30,106 @@ export default meta;
 
 type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 
-const storyArgs = {
+const storyArgs: ICarouselUnControlled = {
   variant: Object.values(variantsObject[themeSelected].CarouselVariantType || {})[0] as string,
   elements: [
     <ReplaceContent
       key={0}
-      aria-label="1 of 10"
+      aria-label="Slide 1 of 10"
       aria-roledescription="slide"
       id="carousel-item-1"
       role={ROLES.GROUP}
+      tabIndex={0}
     >
       First Slide
     </ReplaceContent>,
     <ReplaceContent
       key={1}
-      aria-label="2 of 10"
+      aria-label="Slide 2 of 10"
       aria-roledescription="slide"
       id="carousel-item-2"
       role={ROLES.GROUP}
+      tabIndex={0}
     >
       Second Slide
     </ReplaceContent>,
     <ReplaceContent
       key={2}
-      aria-label="3 of 10"
+      aria-label="Slide 3 of 10"
       aria-roledescription="slide"
       id="carousel-item-3"
       role={ROLES.GROUP}
+      tabIndex={0}
     >
       Third Slide
     </ReplaceContent>,
     <ReplaceContent
       key={3}
-      aria-label="4 of 10"
+      aria-label="Slide 4 of 10"
       aria-roledescription="slide"
       id="carousel-item-4"
       role={ROLES.GROUP}
+      tabIndex={0}
     >
       Fourth Slide
     </ReplaceContent>,
     <ReplaceContent
       key={4}
-      aria-label="5 of 10"
+      aria-label="Slide 5 of 10"
       aria-roledescription="slide"
       id="carousel-item-5"
       role={ROLES.GROUP}
+      tabIndex={0}
     >
-      Fifth Slice
+      Fifth Slide
     </ReplaceContent>,
     <ReplaceContent
       key={5}
-      aria-label="6 of 10"
+      aria-label="Slide 6 of 10"
       aria-roledescription="slide"
       id="carousel-item-6"
       role={ROLES.GROUP}
+      tabIndex={0}
     >
       Sixth Slide
     </ReplaceContent>,
     <ReplaceContent
       key={6}
-      aria-label="7 of 10"
+      aria-label="Slide 7 of 10"
       aria-roledescription="slide"
       id="carousel-item-7"
       role={ROLES.GROUP}
+      tabIndex={0}
     >
       Seventh Slide
     </ReplaceContent>,
     <ReplaceContent
       key={7}
-      aria-label="8 of 10"
+      aria-label="Slide 8 of 10"
       aria-roledescription="slide"
       id="carousel-item-8"
       role={ROLES.GROUP}
+      tabIndex={0}
     >
       Eighth Slide
     </ReplaceContent>,
     <ReplaceContent
       key={8}
-      aria-label="9 of 10"
+      aria-label="Slide 9 of 10"
       aria-roledescription="slide"
       id="carousel-item-9"
       role={ROLES.GROUP}
+      tabIndex={0}
     >
       Ninth Slide
     </ReplaceContent>,
     <ReplaceContent
       key={9}
-      aria-label="10 of 10"
+      aria-label="Slide 10 of 10"
       aria-roledescription="slide"
       id="carousel-item-10"
       role={ROLES.GROUP}
+      tabIndex={0}
     >
       Tenth Slide
     </ReplaceContent>,