Merge pull request #612 from francoismassart/issue/gh-611-aria-label

feat: add `ariaLabel` to the props, fixes #611
leandrowd · Aug 18, 2021 · ba83958 · ba83958
2 parents d45a320 + 630edf9
commit ba83958
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -97,6 +97,7 @@ ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
 
 | Name                                     | Value                        | Description                                                                                                                                                                                                           |
 | ---------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ariaLabel                                | `string`                     | Define the `aria-label` attribute for the root carousel element. The default is `undefined`, skipping the attribute from markup.                                                                                      |
 | axis                                     | `'horizontal'`, `'vertical'` | Define the direction of the slider, defaults to `'horizontal'`.                                                                                                                                                       |
 | autoFocus                                | `boolean`                    | Force focus on the carousel when it renders.                                                                                                                                                                          |
 | autoPlay                                 | `boolean`                    | Change the slide automatically based on `interval` prop.                                                                                                                                                              |

diff --git a/src/__tests__/Carousel.tsx b/src/__tests__/Carousel.tsx
@@ -529,6 +529,12 @@ describe('Slider', function() {
         expect(component.find('.thumbs-wrapper').length).toBe(1);
     });
 
+    it('should insert aria-label if provided', () => {
+        const ariaLabel = 'Carousel title';
+        renderDefaultComponent({ ariaLabel });
+        expect(component.find(`[aria-label="${ariaLabel}"]`)).toBeTruthy();
+    });
+
     describe('Moving', () => {
         beforeEach(() => {
             componentInstance.showArrows = true;

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
@@ -26,6 +26,7 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
     static displayName = 'Carousel';
 
     static defaultProps: CarouselProps = {
+        ariaLabel: undefined,
         axis: 'horizontal',
         centerSlidePercentage: 80,
         interval: 3000,
@@ -751,6 +752,7 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
         }
         return (
             <div
+                aria-label={this.props.ariaLabel}
                 className={klass.ROOT(this.props.className)}
                 ref={this.setCarouselWrapperRef}
                 tabIndex={this.props.useKeyboardArrows ? 0 : undefined}

diff --git a/src/components/Carousel/types.ts b/src/components/Carousel/types.ts
@@ -20,6 +20,7 @@ export type SwipeAnimationHandler = (
 export type StopSwipingHandler = (props: CarouselProps, state: CarouselState) => AnimationHandlerResponse;
 
 export interface CarouselProps {
+    ariaLabel?: string | undefined;
     axis: 'horizontal' | 'vertical';
     autoFocus?: boolean;
     autoPlay?: boolean;

diff --git a/stories/01-basic.tsx b/stories/01-basic.tsx
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Carousel } from '../src/index';
 
-import { withKnobs, boolean, number } from '@storybook/addon-knobs';
+import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
 
 // carousel styles
 import '../src/main.scss';
@@ -40,6 +40,7 @@ const getConfigurableProps = () => ({
     interval: number('interval', 2000, {}, valuesGroupId),
     transitionTime: number('transitionTime', 500, {}, valuesGroupId),
     swipeScrollTolerance: number('swipeScrollTolerance', 5, {}, valuesGroupId),
+    ariaLabel: text('ariaLabel', undefined),
 });
 
 export default {