Include aria-live prop to Carousel

Author: Kubit

src/components/carousel/carouselStandAlone.tsx

@@ -111,7 +111,9 @@ const CarouselStandAloneComponent = (
         >
           <CarouselContentStyled
             ref={carouselContentRef}
-            aria-live={playing ? AriaLiveOptionType.OFF : AriaLiveOptionType.POLITE}
+            aria-live={
+              props['aria-live'] ?? (playing ? AriaLiveOptionType.OFF : AriaLiveOptionType.POLITE)
+            }
             centerMode={centerMode}
             data-testid={`${dataTestId}Content`}
             disableSwipe={disableSwipe}

src/components/carousel/stories/argtypes.ts

@@ -223,7 +223,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
       },
     },
     ['aria-labelledby']: {
-      description: 'Carousel aria label by',
+      description: 'Carousel aria labelledby',
       type: { name: 'string' },
       control: { type: 'text' },
       table: {
@@ -233,6 +233,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.ACCESIBILITY,
       },
     },
+    ['aria-live']: {
+      description: 'Aria live applied to carousel content',
+      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,8 +23,9 @@ export type PageControlAutomateConfigType = Omit<
   mediaProgressBar: CarouselMediaProgressBarType;
 };
 
-export interface ICarouselStandAlone {
-  ['aria-labelledby']?: string;
+type CarouselAriaAttributes = Pick<React.AriaAttributes, 'aria-labelledby' | 'aria-live'>;
+
+export interface ICarouselStandAlone extends CarouselAriaAttributes {
   styles: CarouselPropsStylesType;
   carouselContainerRef: React.RefObject<HTMLDivElement>;
   carouselContentRef: React.RefObject<HTMLDivElement>;