Accessibility Improvements and Code Refactoring for Carousel Component

This commit enhances the accessibility and usability of the Carousel component by adding aria attributes, modifying test cases, and refactoring the code for better readability and maintainability. Changes include semantic structure improvements, addition of ScreenReaderOnly component, updates to test cases, and simplification of the codebase. The Storybook stories have also been updated to reflect these changes.

Author: Hector Arce De Las Heras

src/components/mediaProgressBar/__tests__/mediaProgressBar.test.tsx

@@ -15,7 +15,7 @@ const mockProps = {
   dataTestIdBar: 'testIdBar',
   dataTestIdProgressBar: 'testIdProgressBar',
   onBarChange: jest.fn(),
-  barsAriaLabels: ['aria-label-0'],
+  barAriaLabel: 'bar-aria-label',
 };
 
 describe('MediaProgressBar Component', () => {

src/components/mediaProgressBar/mediaProgressBarStandAlone.tsx

@@ -10,7 +10,10 @@ import {
   ProgressBarStyled,
 } from './mediaProgressBar.styled';
 import { IMediaProgressBarStandAlone } from './types';
-import { mediaProgressBarIndex } from './utils/mediaProgressBarIndex';
+import {
+  buildMediaProgessBarAriaLabel,
+  mediaProgressBarIndex,
+} from './utils/mediaProgressBarUtils';
 
 const MediaProgressBarStandaloneComponent = (
   { barsNum, ...props }: IMediaProgressBarStandAlone,
@@ -32,7 +35,8 @@ const MediaProgressBarStandaloneComponent = (
       <BarContainerStyled
         key={newIndex}
         ref={props.barRef}
-        aria-label={props.barsAriaLabels?.[newIndex]}
+        aria-current={newIndex === props.currentBar}
+        aria-label={buildMediaProgessBarAriaLabel(newIndex, barsNum, props.barAriaLabel)}
         barFocused={newIndex === props.currentBar}
         clickableBars={props.clickableBars}
         role={ROLES.BUTTON}

src/components/mediaProgressBar/stories/argtypes.ts

@@ -101,13 +101,14 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
-    barsAriaLabels: {
+    barAriaLabel: {
       control: { type: 'object' },
-      type: { name: 'array' },
-      description: 'aria labels for each bar',
+      type: { name: 'string' },
+      description:
+        'Aria label for each bar. Can be build using the current bar and the bars length using the keywords "{{currentBar}}" and "{{barsNum}}"',
       table: {
         type: {
-          summary: 'string[]',
+          summary: 'string',
         },
         category: CATEGORY_CONTROL.ACCESIBILITY,
       },

src/components/mediaProgressBar/stories/mediaProgressBar.stories.tsx

@@ -75,7 +75,7 @@ const commonArgs: IMediaProgressBar = {
   )[0] as string,
   barsNum: 1,
   barProgressDuration: 5000,
-  barsAriaLabels: ['aria-label-0'],
+  barAriaLabel: 'Bar {{currentBar}} of {{barsNum}}',
   clickableBars: true,
 };
 

src/components/mediaProgressBar/types/mediaProgressBar.ts

@@ -2,10 +2,13 @@ import { CustomTokenTypes, DeviceBreakpointsType } from '@/types';
 
 import { MediaProgressBarVariantStylesType } from './mediaProgressBarTheme';
 
+export const BUILD_SCREEN_READER_CURRENT_PAGE_KEY = '{{currentBar}}';
+export const BUILD_SCREEN_READER_NUM_PAGES_KEY = '{{barsNum}}';
+
 export interface IMediaProgressBarStandAlone {
   styles: MediaProgressBarVariantStylesType;
   barsNum: number;
-  barsAriaLabels?: string[];
+  barAriaLabel?: string;
   barProgressDuration: number;
   dataTestIdBar?: string;
   dataTestIdProgressBar?: string;

src/components/mediaProgressBar/utils/__tests__/mediaProgressBarIndex.test.ts

@@ -1,6 +1,6 @@
 import { DeviceBreakpointsType } from '@/types';
 
-import { mediaProgressBarIndex } from '../mediaProgressBarIndex';
+import { buildMediaProgessBarAriaLabel, mediaProgressBarIndex } from '../mediaProgressBarUtils';
 
 const mock_props = {
   barsNum: 5,
@@ -73,4 +73,22 @@ describe('mediaProgressBarIndex', () => {
 
     expect(result).toBeUndefined();
   });
+  it('should return undefined when barAriaLabel is undefined', () => {
+    const currentBar = 2;
+    const barsNum = 5;
+    const barAriaLabel = undefined;
+
+    const result = buildMediaProgessBarAriaLabel(currentBar, barsNum, barAriaLabel);
+
+    expect(result).toBeUndefined();
+  });
+  it('should return the correct aria label when barAriaLabel is defined', () => {
+    const currentBar = 2;
+    const barsNum = 5;
+    const barAriaLabel = 'Page {{currentBar}} of {{barsNum}}';
+
+    const result = buildMediaProgessBarAriaLabel(currentBar, barsNum, barAriaLabel);
+
+    expect(result).toBe('Page 3 of 5');
+  });
 });

src/components/mediaProgressBar/utils/mediaProgressBarUtils.ts

@@ -0,0 +1,51 @@
+import { DeviceBreakpointsType } from '@/types';
+
+import { BUILD_SCREEN_READER_CURRENT_PAGE_KEY, BUILD_SCREEN_READER_NUM_PAGES_KEY } from '../types';
+
+interface IUseMediaProgressBarIndexProps {
+  index: number;
+  barsNum: number;
+  currentBar: number;
+  device: DeviceBreakpointsType;
+  maxBars: ({ default: number } & { [device in DeviceBreakpointsType]?: number }) | undefined;
+}
+export const mediaProgressBarIndex = ({
+  index,
+  barsNum,
+  currentBar,
+  device,
+  maxBars,
+}: IUseMediaProgressBarIndexProps): number | undefined => {
+  const MAX_NUMBER_OF_BARS = maxBars?.[device] || maxBars?.default;
+
+  const lastBarIndex = barsNum - 1;
+
+  if (!MAX_NUMBER_OF_BARS) return index;
+
+  // avoid render more bars than MAX_NUMBER_OF_BARS
+  if (index >= MAX_NUMBER_OF_BARS) return;
+  // currentBar goes to the last bar when number of bars is greater than MAX_NUMBER_OF_BARS
+  if (currentBar === lastBarIndex && barsNum > MAX_NUMBER_OF_BARS) {
+    return index + (currentBar + 1 - MAX_NUMBER_OF_BARS);
+    // currentBar stays in the next to last bar when there is more bars than MAX_NUMBER_OF_BARS
+  } else if (currentBar + 2 >= MAX_NUMBER_OF_BARS && currentBar !== lastBarIndex) {
+    return index + (currentBar + 2 - MAX_NUMBER_OF_BARS);
+  }
+  return index;
+};
+
+export const buildMediaProgessBarAriaLabel = (
+  currentBar: number,
+  barsNum: number,
+  barAriaLabel?: string
+): string | undefined => {
+  if (!barAriaLabel) {
+    return barAriaLabel;
+  }
+  const currentPageRegExp = new RegExp(BUILD_SCREEN_READER_CURRENT_PAGE_KEY, 'g');
+  const numPagesRegExp = new RegExp(BUILD_SCREEN_READER_NUM_PAGES_KEY, 'g');
+
+  return barAriaLabel
+    .replace(currentPageRegExp, String(currentBar + 1))
+    .replace(numPagesRegExp, String(barsNum));
+};

src/components/pageControlAutomate/stories/pageControlAutomate.stories.tsx

@@ -30,7 +30,7 @@ const StoryWithHooks = args => {
   const mediaProgressBar = {
     barsNum: 3,
     barProgressDuration: 2000,
-    barsAriaLabels: ['aria-label-0', 'aria-label-1', 'aria-label-2'],
+    barAriaLabel: 'Bar {{currentBar}} of {{barsNum}}',
     clickableBars: true,
   };
 

src/components/storybook/replaceContent/replaceContent.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 
+import { AriaType, ROLES } from '@/types';
+
 import { ReplaceContentStyled } from './replaceContent.styled';
 
-export const ReplaceContent = ({
-  children,
-  width,
-  height,
-  id,
-}: {
+interface IReplaceContent extends AriaType {
   children?: React.ReactNode;
   width?: string;
   height?: string;
   id?: string;
-}): JSX.Element => {
+  role?: ROLES;
+}
+
+export const ReplaceContent = ({ children, ...props }: IReplaceContent): JSX.Element => {
   return (
-    <ReplaceContentStyled height={height} id={id} width={width}>
+    <ReplaceContentStyled {...props}>
       {!children ? <span>Replace here your Content</span> : children}
     </ReplaceContentStyled>
   );