@lumx/react 3.0.1 → 3.0.2

package/src/components/heading/Heading.stories.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { imageKnob } from '@lumx/react/stories/knobs/image';
+import { Orientation, Size, Typography } from '..';
+import { Heading, HeadingLevelProvider } from '.';
+import { FlexBox } from '../flex-box';
+import { GenericBlock } from '../generic-block';
+import { Thumbnail } from '../thumbnail';
+
+export default { title: 'LumX components/heading/Heading' };
+
+export const Default = () => {
+    return (
+        <div>
+            {/* This will render a h1 */}
+            <Heading>First level</Heading>
+            <HeadingLevelProvider>
+                {/* This will render a h2 */}
+                <Heading>Second Level</Heading>
+                <HeadingLevelProvider>
+                    {/* This will render a h3 */}
+                    <Heading>Third Level</Heading>
+                    {/* This will also render a h3 */}
+                    <Heading>Other Third Level</Heading>
+                    <HeadingLevelProvider>
+                        {/* This will render a h4 */}
+                        <Heading>Fourth Level</Heading>
+                        <HeadingLevelProvider>
+                            {/* This will render a h5 */}
+                            <Heading>Fifth Level</Heading>
+                        </HeadingLevelProvider>
+                    </HeadingLevelProvider>
+                </HeadingLevelProvider>
+            </HeadingLevelProvider>
+        </div>
+    );
+};
+
+export const LevelOverride = () => {
+    return (
+        <div>
+            {/* This will render a h1 */}
+            <Heading>First level</Heading>
+            <HeadingLevelProvider>
+                {/* This will render a h2 */}
+                <Heading>Second Level</Heading>
+                <HeadingLevelProvider level={2}>
+                    {/* This will also render a h2 */}
+                    <Heading>Lorem ipsum</Heading>
+                    <Heading>Dolor sit amet</Heading>
+                    <Heading>Reprehenderit et aute</Heading>
+                </HeadingLevelProvider>
+            </HeadingLevelProvider>
+        </div>
+    );
+};
+
+export const HeadingManualOverride = () => {
+    return (
+        <div>
+            {/* This will render a h1 */}
+            <Heading>First level</Heading>
+            <HeadingLevelProvider>
+                {/* This will render a h2 */}
+                <Heading as="h2">Forced second Level</Heading>
+                <Heading as="h3">Forced third Level</Heading>
+                <Heading as="h4">Forced fourth Level</Heading>
+            </HeadingLevelProvider>
+        </div>
+    );
+};
+
+const ListWithSubElements = () => {
+    return (
+        <HeadingLevelProvider>
+            <FlexBox orientation={Orientation.vertical} gap={Size.big}>
+                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
+                    <Heading typography={Typography.subtitle2}>First item</Heading>
+                </GenericBlock>
+                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
+                    <Heading typography={Typography.subtitle2}>Second item</Heading>
+                </GenericBlock>
+                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
+                    <Heading typography={Typography.subtitle2}>Third item</Heading>
+                </GenericBlock>
+            </FlexBox>
+        </HeadingLevelProvider>
+    );
+};
+
+export const TypographyOverride = () => {
+    return (
+        <FlexBox orientation={Orientation.vertical} gap={Size.big}>
+            <Heading>My lists</Heading>
+
+            <FlexBox orientation={Orientation.horizontal} gap={Size.huge}>
+                <ListWithSubElements />
+
+                <FlexBox orientation={Orientation.vertical} gap={Size.big}>
+                    <HeadingLevelProvider>
+                        <Heading>Sub list</Heading>
+
+                        <ListWithSubElements />
+                    </HeadingLevelProvider>
+                </FlexBox>
+            </FlexBox>
+        </FlexBox>
+    );
+};

package/src/components/heading/Heading.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite } from '@lumx/react/testing/utils';
+import { Heading, HeadingProps } from './Heading';
+import { HeadingLevelProvider } from './HeadingLevelProvider';
+
+const setup = (props: Partial<HeadingProps> = {}) => {
+    const wrapper = shallow(<Heading {...props} />);
+    return { props, wrapper };
+};
+
+describe(`<${Heading.displayName}>`, () => {
+    describe('Snapshots and structure', () => {
+        it('should render a Text component with h1 by default', () => {
+            const { wrapper } = setup({ children: 'Some text' });
+            expect(wrapper).toHaveDisplayName('Text');
+            expect(wrapper).toHaveProp('as', 'h1');
+            expect(wrapper.prop('className')).toBe(Heading.className);
+        });
+
+        it('should render with as', () => {
+            const { wrapper } = setup({ children: 'Some text', as: 'h2' });
+            expect(wrapper).toHaveDisplayName('Text');
+            expect(wrapper).toHaveProp('as', 'h2');
+            expect(wrapper.prop('className')).toBe(Heading.className);
+        });
+
+        it('should correctly render levels nested in HeadingLevel', () => {
+            const wrapper = mount(
+                <>
+                    <Heading>Level 1</Heading>
+                    <HeadingLevelProvider>
+                        <Heading>Level 2</Heading>
+                        <HeadingLevelProvider>
+                            <Heading>Level 3</Heading>
+                            <HeadingLevelProvider>
+                                <Heading>Level 4</Heading>
+                                <HeadingLevelProvider>
+                                    <Heading>Level 5 - 1</Heading>
+                                    <Heading>Level 5 - 2</Heading>
+                                    <HeadingLevelProvider>
+                                        <Heading>Level 6</Heading>
+                                        <HeadingLevelProvider>
+                                            <Heading>Level 7</Heading>
+                                        </HeadingLevelProvider>
+                                    </HeadingLevelProvider>
+                                </HeadingLevelProvider>
+                            </HeadingLevelProvider>
+                        </HeadingLevelProvider>
+                    </HeadingLevelProvider>
+                    ,
+                </>,
+            );
+
+            expect(wrapper.find('h1')).toHaveText('Level 1');
+            expect(wrapper.find('h2')).toHaveText('Level 2');
+            expect(wrapper.find('h3')).toHaveText('Level 3');
+            expect(wrapper.find('h4')).toHaveText('Level 4');
+
+            const h5 = wrapper.find('h5');
+            expect(h5).toHaveLength(2);
+            expect(h5.at(0)).toHaveText('Level 5 - 1');
+            expect(h5.at(1)).toHaveText('Level 5 - 2');
+            // There should be 2 h6 because it is the maximum value;
+            const h6 = wrapper.find('h6');
+            expect(h6).toHaveLength(2);
+            expect(h6.at(0)).toHaveText('Level 6');
+            expect(h6.at(1)).toHaveText('Level 7');
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: Heading.className });
+});

package/src/components/heading/Heading.tsx

@@ -0,0 +1,62 @@
+import { Comp, getRootClassName, handleBasicClasses, HeadingElement } from '@lumx/react/utils';
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+import { Text, TextProps } from '../text';
+import { DEFAULT_TYPOGRAPHY_BY_LEVEL } from './constants';
+import { useHeadingLevel } from './useHeadingLevel';
+
+/**
+ * Defines the props of the component.
+ */
+export interface HeadingProps extends Partial<TextProps> {
+    /**
+     * Display a specific heading level instead of the one provided by parent context provider.
+     */
+    as?: HeadingElement;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Heading';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {} as const;
+
+/**
+ * Renders a heading component.
+ * Extends the `Text` Component with the heading level automatically computed based on
+ * the current level provided by the context.
+ */
+export const Heading: Comp<HeadingProps> = forwardRef((props, ref) => {
+    const { children, as, className, ...forwardedProps } = props;
+    const { headingElement } = useHeadingLevel();
+
+    return (
+        <Text
+            ref={ref}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                }),
+            )}
+            as={as || headingElement}
+            typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[headingElement]}
+            {...forwardedProps}
+        >
+            {children}
+        </Text>
+    );
+});
+
+Heading.displayName = COMPONENT_NAME;
+Heading.className = CLASSNAME;
+Heading.defaultProps = DEFAULT_PROPS;

package/src/components/heading/HeadingLevelProvider.tsx

@@ -0,0 +1,30 @@
+import { HeadingElement } from '@lumx/react/utils';
+import React, { ReactNode } from 'react';
+import { MAX_HEADING_LEVEL } from './constants';
+import { HeadingLevelContext } from './context';
+import { useHeadingLevel } from './useHeadingLevel';
+
+export interface HeadingLevelProviderProps {
+    /** The heading level to start at. If left undefined, the parent context will be used, if any. */
+    level?: number;
+    /** The children to display */
+    children: ReactNode;
+}
+
+/**
+ * Provide a new heading level context.
+ */
+export const HeadingLevelProvider: React.FC<HeadingLevelProviderProps> = ({ children, level }) => {
+    const { level: contextLevel } = useHeadingLevel();
+
+    const incrementedLevel = level || contextLevel + 1;
+    /** Don't allow a level beyond the maximum level. */
+    const nextLevel = incrementedLevel > MAX_HEADING_LEVEL ? MAX_HEADING_LEVEL : incrementedLevel;
+    const headingElement = `h${nextLevel}` as HeadingElement;
+
+    return (
+        <HeadingLevelContext.Provider value={{ level: nextLevel, headingElement }}>
+            {children}
+        </HeadingLevelContext.Provider>
+    );
+};

package/src/components/heading/constants.ts

@@ -0,0 +1,16 @@
+import { Typography } from '..';
+
+/** The maximum authorized heading level. */
+export const MAX_HEADING_LEVEL = 6;
+
+/**
+ * Typography to use by default depending on the heading level.
+ */
+export const DEFAULT_TYPOGRAPHY_BY_LEVEL = {
+    h1: Typography.display1,
+    h2: Typography.headline,
+    h3: Typography.title,
+    h4: Typography.subtitle2,
+    h5: Typography.subtitle1,
+    h6: Typography.body2,
+};

package/src/components/heading/context.tsx

@@ -0,0 +1,13 @@
+import { HeadingElement } from '@lumx/react/utils';
+import { createContext } from 'react';
+
+interface HeadingLevelContext {
+    /** The current level */
+    level: number;
+    /** The heading element matching the current level */
+    headingElement: HeadingElement;
+}
+
+const defaultContext: HeadingLevelContext = { level: 1, headingElement: 'h1' };
+
+export const HeadingLevelContext = createContext<HeadingLevelContext>(defaultContext);

package/src/components/heading/index.ts

@@ -0,0 +1,3 @@
+export * from './Heading';
+export * from './HeadingLevelProvider';
+export * from './useHeadingLevel';

package/src/components/heading/useHeadingLevel.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HeadingLevelContext } from './context';
+
+export const useHeadingLevel = () => {
+    const { level = 1, headingElement = 'h1' } = React.useContext(HeadingLevelContext);
+
+    return { level, headingElement };
+};

package/src/components/index.ts

@@ -11,6 +11,7 @@ export const Alignment = {
     right: 'right',
     spaceAround: 'space-around',
     spaceBetween: 'space-between',
+    spaceEvenly: 'space-evenly',
     start: 'start',
     top: 'top',
 } as const;

package/src/components/slideshow/Slides.tsx

@@ -1,9 +1,11 @@
-import React, { CSSProperties, forwardRef } from 'react';
+import React, { Children, CSSProperties, forwardRef } from 'react';
+import chunk from 'lodash/chunk';
 
 import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
 export interface SlidesProps extends GenericProps, HasTheme {
     /** current slide active */
@@ -24,6 +26,13 @@ export interface SlidesProps extends GenericProps, HasTheme {
     toggleAutoPlay: () => void;
     /** component to be rendered after the slides */
     afterSlides?: React.ReactNode;
+    /** Whether the slides have controls linked */
+    hasControls?: boolean;
+    /**
+     * Accessible label to set on a slide group.
+     * Receives the group position starting from 1 and the total number of groups.
+     * */
+    slideGroupLabel?: (groupPosition: number, groupTotal: number) => string;
 }
 
 /**
@@ -56,11 +65,22 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
         slidesId,
         children,
         afterSlides,
+        hasControls,
+        slideGroupLabel,
         ...forwardedProps
     } = props;
+    const wrapperRef = React.useRef<HTMLDivElement>(null);
+    const startIndexVisible = activeIndex;
+    const endIndexVisible = startIndexVisible + 1;
+
     // Inline style of wrapper element.
     const wrapperStyle: CSSProperties = { transform: `translateX(-${FULL_WIDTH_PERCENT * activeIndex}%)` };
 
+    const groups = React.useMemo(() => {
+        const childrenArray = Children.toArray(children);
+        return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
+    }, [children, groupBy]);
+
     return (
         <section
             id={id}
@@ -79,8 +99,18 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
                 onMouseLeave={toggleAutoPlay}
                 aria-live={isAutoPlaying ? 'off' : 'polite'}
             >
-                <div className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>
-                    {children}
+                <div ref={wrapperRef} className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>
+                    {groups.map((group, index) => (
+                        <SlideshowItemGroup
+                            key={index}
+                            id={slidesId && buildSlideShowGroupId(slidesId, index)}
+                            role={hasControls ? 'tabpanel' : 'group'}
+                            label={slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined}
+                            isDisplayed={index >= startIndexVisible && index < endIndexVisible}
+                        >
+                            {group}
+                        </SlideshowItemGroup>
+                    ))}
                 </div>
             </div>
 

package/src/components/slideshow/Slideshow.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import range from 'lodash/range';
-import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem } from '@lumx/react';
+import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem, Orientation } from '@lumx/react';
 import { boolean, number } from '@storybook/addon-knobs';
 import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
 
@@ -15,6 +15,7 @@ export const Simple = ({ theme }: any) => {
 
     return (
         <Slideshow
+            aria-label="Simple carousel example"
             activeIndex={activeIndex}
             autoPlay={autoPlay}
             interval={interval}
@@ -25,6 +26,7 @@ export const Simple = ({ theme }: any) => {
             theme={theme}
             groupBy={groupBy}
             style={{ width: '50%' }}
+            slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
         >
             {images.map(({ image, alt }, index) => (
                 <SlideshowItem key={`${image}-${index}`}>
@@ -48,6 +50,7 @@ export const SimpleWithAutoPlay = ({ theme }: any) => {
 
     return (
         <Slideshow
+            aria-label="Simple with autoplay example"
             activeIndex={activeIndex}
             autoPlay
             interval={interval}
@@ -59,6 +62,7 @@ export const SimpleWithAutoPlay = ({ theme }: any) => {
             theme={theme}
             groupBy={groupBy}
             style={{ width: '50%' }}
+            slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
         >
             {images.map(({ image, alt }, index) => (
                 <SlideshowItem key={`${image}-${index}`}>
@@ -75,7 +79,7 @@ export const SimpleWithAutoPlay = ({ theme }: any) => {
 };
 
 export const ResponsiveSlideShowSwipe = () => {
-    const slides = range(3);
+    const slides = range(5);
     return (
         <>
             In responsive mode
@@ -86,11 +90,13 @@ export const ResponsiveSlideShowSwipe = () => {
             </ul>
             <FlexBox vAlign="center">
                 <Slideshow
+                    aria-label="Responsive SlideShow Swipe"
                     activeIndex={0}
                     slideshowControlsProps={{
                         nextButtonProps: { label: 'Next' },
                         previousButtonProps: { label: 'Previous' },
                     }}
+                    slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
                 >
                     {slides.map((slide) => (
                         <SlideshowItem key={`${slide}`}>
@@ -114,3 +120,93 @@ export const ResponsiveSlideShowSwipe = () => {
         </>
     );
 };
+
+const slides = [
+    {
+        id: 0,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/foyleswarslide__800x600.jpg',
+        alt: 'A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.',
+        title: 'Foyle’s War Revisited',
+        subtitle: '8 pm Sunday, March 8, on TV: Sneak peek at the final season',
+        link: '#',
+    },
+    {
+        id: 1,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/britcomdavidslide__800x600.jpg',
+        alt: 'British flag with WILL-TV host David Thiel.',
+        title: 'Great Britain Vote: 7 pm Sat.',
+        link: '#',
+    },
+    {
+        id: 2,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/mag800-2__800x600.jpg',
+        alt: 'Mid-American Gardener panelists on the set.',
+        title: 'Mid-American Gardener: Thursdays at 7 pm',
+        subtitle: 'Watch the latest episode',
+        link: '#',
+    },
+    {
+        id: 3,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/foyleswarslide__800x600.jpg',
+        alt: 'A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.',
+        title: 'Foyle’s War Revisited',
+        subtitle: '8 pm Sunday, March 8, on TV: Sneak peek at the final season',
+        link: '#',
+    },
+    {
+        id: 4,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/britcomdavidslide__800x600.jpg',
+        alt: 'British flag with WILL-TV host David Thiel.',
+        title: 'Great Britain Vote: 7 pm Sat.',
+        link: '#',
+    },
+    {
+        id: 5,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/mag800-2__800x600.jpg',
+        alt: 'Mid-American Gardener panelists on the set.',
+        title: 'Mid-American Gardener: Thursdays at 7 pm',
+        subtitle: 'Watch the latest episode',
+        link: '#',
+    },
+];
+export const WithComplexContent = () => (
+    <Slideshow
+        aria-label="Carousel with complex content"
+        activeIndex={0}
+        groupBy={2}
+        slideshowControlsProps={{
+            nextButtonProps: { label: 'Next' },
+            previousButtonProps: { label: 'Previous' },
+            playButtonProps: { label: 'Play/Pause' },
+            paginationItemProps: (index) => ({ label: `Slide ${index + 1}` }),
+        }}
+        slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
+    >
+        {range(number('Slides', 6)).map((nb) => {
+            const slide = slides[nb % slides.length];
+
+            return (
+                <SlideshowItem key={slide.id}>
+                    <a href={slide.link}>
+                        <ImageBlock
+                            thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
+                            image={slide.src}
+                            alt={slide.alt}
+                        />
+                    </a>
+                    <FlexBox orientation={Orientation.vertical}>
+                        <h3>
+                            <a href={slide.link}>{slide.title}</a>
+                            {/* Add a non focusable element to test that it stays that way after a page change. */}
+                            <button type="button" tabIndex={-1} aria-hidden="true">
+                                Not focusable
+                            </button>
+                            <button type="button">Focusable</button>
+                        </h3>
+                        {slide.subtitle && <p>{slide.subtitle}</p>}
+                    </FlexBox>
+                </SlideshowItem>
+            );
+        })}
+    </Slideshow>
+);

package/src/components/slideshow/Slideshow.tsx

@@ -5,19 +5,23 @@ import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { Comp, GenericProps } from '@lumx/react/utils';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { buildSlideShowGroupId } from './SlideshowItemGroup';
 
 /**
  * Defines the props of the component.
  */
 export interface SlideshowProps
     extends GenericProps,
-        Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy'> {
+        Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {
     /** current slide active */
     activeIndex?: SlidesProps['activeIndex'];
     /** Interval between each slide when automatic rotation is enabled. */
     interval?: number;
     /** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */
-    slideshowControlsProps?: Pick<SlideshowControlsProps, 'nextButtonProps' | 'previousButtonProps'> &
+    slideshowControlsProps?: Pick<
+        SlideshowControlsProps,
+        'nextButtonProps' | 'previousButtonProps' | 'paginationItemProps'
+    > &
         Omit<
             SlideshowControlsProps,
             | 'activeIndex'
@@ -61,6 +65,7 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         theme,
         id,
         slidesId,
+        slideGroupLabel,
         ...forwardedProps
     } = props;
     // Number of slideshow items.
@@ -99,6 +104,8 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         onFocusOut: startAutoPlay,
     });
 
+    const showControls = slideshowControlsProps && slidesCount > 1;
+
     return (
         <Slides
             activeIndex={currentIndex}
@@ -111,8 +118,9 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
             autoPlay={autoPlay}
             slidesId={slideshowSlidesId}
             toggleAutoPlay={toggleAutoPlay}
-            interval={interval}
             ref={mergeRefs(ref, setSlideshow)}
+            hasControls={showControls}
+            slideGroupLabel={slideGroupLabel}
             afterSlides={
                 slideshowControlsProps && slidesCount > 1 ? (
                     <div className={`${Slides.className}__controls`}>
@@ -143,6 +151,10 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
                                       }
                                     : undefined
                             }
+                            paginationItemProps={(index) => ({
+                                'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),
+                                ...slideshowControlsProps.paginationItemProps?.(index),
+                            })}
                         />
                     </div>
                 ) : undefined

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -26,6 +26,7 @@ export const Simple = () => {
             onPaginationClick={onPaginationClick}
             nextButtonProps={{ label: 'Next' }}
             previousButtonProps={{ label: 'Previous' }}
+            paginationItemLabel={(index) => `Slide ${index}`}
         />
     );
 };
@@ -62,7 +63,6 @@ export const ControllingSlideshow = ({ theme }: any) => {
         onFocusOut: startAutoPlay,
     });
 
-    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
     return (
         <Slides
             activeIndex={currentIndex}