Enhancing Accessibility and Usability of Carousel Component

This commit focuses on improving the accessibility and usability of the Carousel component. Aria attributes have been added to enhance screen reader compatibility, test cases have been modified to reflect these changes, and code has been refactored for better readability and maintainability. Specific updates include the addition of a ScreenReaderOnly component, updates to the Carousel story, and the inclusion of screenReaderText in the ICarouselStandAlone interface. Additionally, the MediaProgressBar component and its tests have been updated for better screen reader compatibility.

Author: Hector Arce De Las Heras

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

@@ -57,6 +57,8 @@ const mockProps: ICarouselUnControlled = {
   pageControlArrowsControlVariant: 'DEFAULT',
 };
 
+const numPages = Math.ceil(mockProps.elements.length / (mockProps.numElementsPerPage as number));
+
 describe('Carousel component', () => {
   it('Carousel', async () => {
     const { container, getByTestId } = renderProvider(<CarouselUnControlled {...mockProps} />);
@@ -390,7 +392,7 @@ describe('Carousel component', () => {
       allowShift: {
         current: true,
       },
-      numPages: Math.ceil(mockProps.elements.length / (mockProps.numElementsPerPage as number)),
+      numPages,
       innerCurrentPage: { current: 0 },
     });
     jest.spyOn(CarouselHooks, 'useCarousel').mockImplementation(mockMockUseCarousel);
@@ -434,7 +436,7 @@ describe('Carousel component', () => {
       allowShift: {
         current: true,
       },
-      numPages: Math.ceil(mockProps.elements.length / (mockProps.numElementsPerPage as number)),
+      numPages,
       innerCurrentPage: { current: 0 },
     });
     jest.spyOn(CarouselHooks, 'useCarousel').mockImplementation(mockMockUseCarousel);
@@ -449,11 +451,14 @@ describe('Carousel component', () => {
 
     const rightArrow = getByLabelText(pageControlAutomateConfig.rightArrow.icon.altText);
     const leftArrow = getByLabelText(pageControlAutomateConfig.leftArrow.icon.altText);
+    const indicator1 = getByLabelText(`Bar 1 of ${numPages}`);
 
     fireEvent.click(rightArrow);
     expect(mockHandlePageChange).toHaveBeenCalledWith(1);
 
     fireEvent.click(leftArrow);
     expect(mockHandlePageChange).toHaveBeenCalledWith(-1);
+
+    expect(indicator1).toBeInTheDocument();
   });
 });

src/components/carousel/carousel.styled.ts

@@ -4,7 +4,7 @@ import { getStyles } from '@/utils/getStyles/getStyles';
 
 import { CarouselArrowStateType, CarouselPropsStylesType } from './types';
 
-export const RootStyled = styled.div<{
+export const RootStyled = styled.section<{
   styles: CarouselPropsStylesType;
   allowModifySliceWidth?: boolean;
 }>`

src/components/carousel/carouselStandAlone.tsx

@@ -4,9 +4,11 @@ import * as React from 'react';
 import { ElementOrIcon } from '@/components/elementOrIcon';
 import { PageControl } from '@/components/pageControl';
 import { useId } from '@/hooks';
+import { AriaLiveOptionType } from '@/types';
 
 import { PageControlArrowControlType } from '../pageControl/types';
 import { PageControlAutomate } from '../pageControlAutomate';
+import { ScreenReaderOnly } from '../screenReaderOnly';
 import {
   ArrowAndCarouselWrapperStyled,
   ArrowLeftIconContainer,
@@ -19,6 +21,7 @@ import {
 } from './carousel.styled';
 import { ExtraPaddingArrowStandAlone } from './components';
 import { ICarouselStandAlone } from './types';
+import { buildScreenReaderText } from './utils';
 
 const CarouselStandAloneComponent = (
   {
@@ -47,6 +50,7 @@ const CarouselStandAloneComponent = (
     onMouseOut,
     onMouseOver,
     playing,
+    screenReaderText,
     ...props
   }: ICarouselStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
@@ -78,6 +82,7 @@ const CarouselStandAloneComponent = (
       ref={ref}
       allowModifySliceWidth={allowModifySliceWidth}
       aria-labelledby={props['aria-labelledby']}
+      aria-roledescription="carousel"
       data-testid={`${dataTestId}Wrapper`}
       styles={styles}
       onKeyDown={onKeyDown}
@@ -107,6 +112,7 @@ const CarouselStandAloneComponent = (
         >
           <CarouselContentStyled
             ref={carouselContentRef}
+            aria-live={playing ? AriaLiveOptionType.OFF : AriaLiveOptionType.POLITE}
             centerMode={centerMode}
             data-testid={`${dataTestId}Content`}
             disableSwipe={disableSwipe}
@@ -135,7 +141,6 @@ const CarouselStandAloneComponent = (
             onClick={onRightArrowClick}
           />
         </CarouselContainerStyled>
-
         {displayArrowsOnCarousel && numPages > 1 && (
           <ArrowRightIconContainer data-disabled={rightArrowDisabled} styles={styles}>
             <ElementOrIcon
@@ -151,7 +156,7 @@ const CarouselStandAloneComponent = (
           </ArrowRightIconContainer>
         )}
       </ArrowAndCarouselWrapperStyled>
-      {hasPagination && numPages > 1 && (
+      {hasPagination && pageControlArrowsControlVariant && pageControlVariant && numPages > 1 && (
         <PageControlContainerStyled styles={styles}>
           <PageControl
             arrowsControlVariant={pageControlArrowsControlVariant}
@@ -180,6 +185,12 @@ const CarouselStandAloneComponent = (
           />
         </PageControlAutomateContainerStyled>
       )}
+      <ScreenReaderOnly
+        ariaLive={playing ? AriaLiveOptionType.OFF : AriaLiveOptionType.POLITE}
+        dataTestId={`${dataTestId}CarouselScreenReader`}
+      >
+        {buildScreenReaderText(currentPage, numPages, screenReaderText)}
+      </ScreenReaderOnly>
     </RootStyled>
   );
 };