Include aria-label prop to Carousel

Author: Kubit

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

@@ -479,4 +479,22 @@ describe('Carousel component', () => {
 
     expect(indicator1).toBeInTheDocument();
   });
+
+  it('Should have aria-label in the document when prop is set', async () => {
+    const { getByLabelText } = renderProvider(
+      <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 label = queryByLabelText('');
+    expect(label).not.toBeInTheDocument();
+  });
 });

src/components/carousel/carouselStandAlone.tsx

@@ -82,6 +82,7 @@ const CarouselStandAloneComponent = (
       allowModifySliceWidth={allowModifySliceWidth}
       aria-labelledby={props['aria-labelledby']}
       aria-roledescription="carousel"
+      aria-label={props['aria-label']}
       data-testid={`${dataTestId}Wrapper`}
       styles={styles}
       onKeyDown={onKeyDown}

src/components/carousel/stories/argtypes.ts

@@ -244,6 +244,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.ACCESIBILITY,
       },
     },
+    ['aria-label']: {
+      description: 'Carousel aria label',
+      control: { type: 'text' },
+      type: { name: 'string' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     displayArrowsOnCarousel: {
       description: 'Show the arrows on the carousel or on the Page Control',
       type: { name: 'boolean' },

src/components/carousel/types/carousel.ts

@@ -23,7 +23,7 @@ export type PageControlAutomateConfigType = Omit<
   mediaProgressBar: CarouselMediaProgressBarType;
 };
 
-type CarouselAriaAttributes = Pick<React.AriaAttributes, 'aria-labelledby' | 'aria-live'>;
+type CarouselAriaAttributes = Pick<React.AriaAttributes, 'aria-labelledby' | 'aria-live' | 'aria-label'>;
 
 export interface ICarouselStandAlone extends CarouselAriaAttributes {
   styles: CarouselPropsStylesType;