@lumx/react 3.0.1 → 3.0.2-alpha-react-utils.2

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -7,15 +7,9 @@ import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
 
-import {
-    Callback,
-    Comp,
-    GenericProps,
-    getRootClassName,
-    handleBasicClasses,
-    isComponent,
-    onEnterPressed,
-} from '@lumx/react/utils';
+import { Callback, Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { onEnterPressed } from '@lumx/react/utils/event';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
 /**

package/src/components/skeleton/SkeletonCircle.tsx

@@ -2,7 +2,8 @@ import classNames from 'classnames';
 import React, { forwardRef } from 'react';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -2,7 +2,8 @@ import classNames from 'classnames';
 import React, { forwardRef } from 'react';
 
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Skeleton variants.

package/src/components/skeleton/SkeletonTypography.tsx

@@ -2,7 +2,8 @@ import classNames from 'classnames';
 import React, { CSSProperties, forwardRef } from 'react';
 
 import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/slider/Slider.tsx

@@ -6,7 +6,8 @@ import classNames from 'classnames';
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 
 import useEventCallback from '@lumx/react/hooks/useEventCallback';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { uid } from 'uid';
 import { clamp } from '@lumx/react/utils/clamp';

package/src/components/slideshow/Slides.tsx

@@ -1,9 +1,12 @@
-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 { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
 export interface SlidesProps extends GenericProps, HasTheme {
     /** current slide active */
@@ -24,6 +27,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 +66,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 +100,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

@@ -2,22 +2,26 @@ import React, { forwardRef } from 'react';
 
 import { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';
 import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
-import { Comp, GenericProps } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
 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}

package/src/components/slideshow/SlideshowControls.tsx

@@ -5,12 +5,13 @@ import range from 'lodash/range';
 
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
+import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';
 
 import { useSwipeNavigate } from './useSwipeNavigate';
-import { useKeyNavigate } from './useKeyNavigate';
 import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';
 import { usePaginationVisibleRange } from './usePaginationVisibleRange';
 
@@ -28,6 +29,8 @@ export interface SlideshowControlsProps extends GenericProps, HasTheme {
     /** Props to pass to the previous button (minus those already set by the SlideshowControls props). */
     previousButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
+    /** Props to pass to the pagination wrapper */
+    paginationProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'role'>;
     /** Number of slides. */
     slidesCount: number;
     /** On next button click callback. */
@@ -38,8 +41,15 @@ export interface SlideshowControlsProps extends GenericProps, HasTheme {
     onPreviousClick?(loopback?: boolean): void;
     /** whether the slideshow is currently playing */
     isAutoPlaying?: boolean;
-    /** function to be executed in order to retrieve the label for the pagination item */
+    /**
+     * function to be executed in order to retrieve the label for the pagination item
+     * @deprecated Use paginationItemProps instead.
+     * */
     paginationItemLabel?: (index: number) => string;
+    /**
+     * function to be executed in order to retrieve the props for a pagination item.
+     */
+    paginationItemProps?: (itemIndex: number) => React.HTMLAttributes<HTMLButtonElement> & { label?: string };
     /** Props to pass to the lay button (minus those already set by the SlideshowControls props). */
     playButtonProps?: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
@@ -80,11 +90,13 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         onPreviousClick,
         parentRef,
         previousButtonProps,
+        paginationProps,
         slidesCount,
         theme,
         isAutoPlaying = false,
         playButtonProps,
         paginationItemLabel,
+        paginationItemProps,
         ...forwardedProps
     } = props;
 
@@ -93,8 +105,7 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         // Checking window object to avoid errors in SSR.
         parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
     }
-    // Listen to keyboard navigate left & right.
-    useKeyNavigate(parent, onNextClick, onPreviousClick);
+    const paginationRef = React.useRef(null);
     // Listen to touch swipe navigate left & right.
     useSwipeNavigate(
         parent,
@@ -104,6 +115,18 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         useCallback(() => onPreviousClick?.(false), [onPreviousClick]),
     );
 
+    /**
+     * Add roving tab index pattern to pagination items and activate slide on focus.
+     */
+    useRovingTabIndex({
+        parentRef: paginationRef,
+        elementSelector: 'button',
+        keepTabIndex: true,
+        onElementFocus: (element) => {
+            element.click();
+        },
+    });
+
     // Pagination "bullet" range.
     const visibleRange = usePaginationVisibleRange(activeIndex as number, slidesCount);
 
@@ -126,8 +149,13 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                 emphasis={Emphasis.low}
                 onClick={onPreviousClick}
             />
-            <div className={`${CLASSNAME}__pagination`}>
-                <div className={`${CLASSNAME}__pagination-items`} style={wrapperStyle}>
+            <div ref={paginationRef} className={`${CLASSNAME}__pagination`}>
+                <div
+                    className={`${CLASSNAME}__pagination-items`}
+                    style={wrapperStyle}
+                    role="tablist"
+                    {...paginationProps}
+                >
                     {useMemo(
                         () =>
                             range(slidesCount).map((index) => {
@@ -137,6 +165,15 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                                     (index === visibleRange.min || index === visibleRange.max);
                                 const isActive = activeIndex === index;
                                 const isOutRange = index < visibleRange.min || index > visibleRange.max;
+                                const {
+                                    className: itemClassName = undefined,
+                                    label = undefined,
+                                    ...itemProps
+                                } = paginationItemProps ? paginationItemProps(index) : {};
+
+                                const ariaLabel =
+                                    label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
+
                                 return (
                                     <button
                                         className={classNames(
@@ -146,15 +183,16 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                                                 isOnEdge,
                                                 isOutRange,
                                             }),
+                                            itemClassName,
                                         )}
                                         key={index}
                                         type="button"
+                                        tabIndex={isActive ? undefined : -1}
+                                        role="tab"
+                                        aria-selected={isActive}
                                         onClick={() => onPaginationClick?.(index)}
-                                        {...{
-                                            'aria-label': paginationItemLabel
-                                                ? paginationItemLabel(index)
-                                                : `${index + 1} / ${slidesCount}`,
-                                        }}
+                                        aria-label={ariaLabel}
+                                        {...itemProps}
                                     />
                                 );
                             }),
@@ -163,6 +201,7 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                             visibleRange.min,
                             visibleRange.max,
                             activeIndex,
+                            paginationItemProps,
                             paginationItemLabel,
                             onPaginationClick,
                         ],

package/src/components/slideshow/SlideshowItem.tsx

@@ -2,14 +2,13 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.
  */
 export interface SlideshowItemProps extends GenericProps {
-    /** whether the slideshow item is currently visible */
-    isCurrentlyVisible?: boolean;
     /** interval in which slides are automatically shown */
     interval?: number;
 }
@@ -33,7 +32,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRef((props, ref) => {
     const { className, children, ...forwardedProps } = props;
-
     return (
         <div
             ref={ref}
@@ -43,8 +41,6 @@ export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRe
                     prefix: CLASSNAME,
                 }),
             )}
-            aria-roledescription="slide"
-            role="group"
             {...forwardedProps}
         >
             {children}

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useSlideFocusManagement } from './useSlideFocusManagement';
+
+/**
+ * Defines the props of the component.
+ */
+export interface SlideshowItemGroupProps extends GenericProps {
+    role?: 'tabpanel' | 'group';
+    label?: string;
+    isDisplayed?: boolean;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SlideshowItemGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export const buildSlideShowGroupId = (slidesId: string, index: number) => `${slidesId}-slide-${index}`;
+
+/**
+ * SlideshowItemGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const SlideshowItemGroup: Comp<SlideshowItemGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { className, children, role = 'group', label, isDisplayed, ...forwardedProps } = props;
+    const groupRef = React.useRef<HTMLDivElement>(null);
+
+    useSlideFocusManagement({ isSlideDisplayed: isDisplayed, slideRef: groupRef });
+
+    return (
+        <div
+            ref={mergeRefs(groupRef, ref)}
+            role={role}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                }),
+            )}
+            aria-roledescription="slide"
+            aria-label={label}
+            {...forwardedProps}
+        >
+            {children}
+        </div>
+    );
+});
+
+SlideshowItemGroup.displayName = COMPONENT_NAME;
+SlideshowItemGroup.className = CLASSNAME;

package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap

@@ -20,6 +20,7 @@ Array [
           onNextClick={[Function]}
           onPaginationClick={[Function]}
           onPreviousClick={[Function]}
+          paginationItemProps={[Function]}
           parentRef={null}
           previousButtonProps={
             Object {
@@ -32,11 +33,13 @@ Array [
         />
       </div>
     }
+    aria-label="Simple carousel example"
     autoPlay={false}
     groupBy={1}
+    hasControls={true}
     id="slideshow1"
-    interval={1000}
     isAutoPlaying={false}
+    slideGroupLabel={[Function]}
     slidesId="slideshow-slides2"
     style={
       Object {