@lumx/react 2.2.25 → 2.2.26-alpha-a11y-slideshow.2

package/src/components/slideshow/SlideshowControls.tsx

@@ -8,9 +8,9 @@ import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 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 +28,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 +40,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>;
     /** 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 +89,13 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         onPreviousClick,
         parentRef,
         previousButtonProps,
+        paginationProps,
         slidesCount,
         theme,
         isAutoPlaying = false,
         playButtonProps,
         paginationItemLabel,
+        paginationItemProps,
         ...forwardedProps
     } = props;
 
@@ -93,8 +104,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 +114,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 +148,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 +164,10 @@ 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, ...itemProps } = paginationItemProps
+                                    ? paginationItemProps(index)
+                                    : {};
+
                                 return (
                                     <button
                                         className={classNames(
@@ -146,15 +177,20 @@ 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}`,
                                         }}
+                                        {...itemProps}
                                     />
                                 );
                             }),
@@ -163,6 +199,7 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                             visibleRange.min,
                             visibleRange.max,
                             activeIndex,
+                            paginationItemProps,
                             paginationItemLabel,
                             onPaginationClick,
                         ],

package/src/components/slideshow/SlideshowItem.tsx

@@ -8,8 +8,6 @@ import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/
  * 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 +31,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 +40,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,56 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+
+/**
+ * Defines the props of the component.
+ */
+export interface SlideshowItemGroupProps extends GenericProps {
+    role?: 'tabpanel' | 'group';
+    label?: string;
+}
+
+/**
+ * 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, ...forwardedProps } = props;
+    return (
+        <div
+            ref={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,7 +20,14 @@ Array [
           onNextClick={[Function]}
           onPaginationClick={[Function]}
           onPreviousClick={[Function]}
+          paginationItemProps={[Function]}
           parentRef={null}
+          playButtonProps={
+            Object {
+              "aria-controls": "slideshow-slides2",
+              "onClick": undefined,
+            }
+          }
           previousButtonProps={
             Object {
               "aria-controls": "slideshow-slides2",
@@ -32,11 +39,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 {

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import { getFocusableElements } from '@lumx/react/utils/focus/getFocusableElements';
+
+import { CLASSNAME as ITEM_GROUP_CLASSNAME } from './SlideshowItemGroup';
+
+export interface UseSlideFocusManagementProps {
+    activeIndex: number;
+    groupBy?: number;
+    wrapperRef: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * Manage how slides must behave when visible or not.
+ * When not visible, they should be hidden from screen readers and not focusable.
+ */
+export const useSlideFocusManagement = ({ activeIndex, groupBy = 1, wrapperRef }: UseSlideFocusManagementProps) => {
+    useEffect(() => {
+        const element = wrapperRef?.current;
+        const startIndexVisible = activeIndex;
+        const endIndexVisible = startIndexVisible + 1;
+
+        const slideshowChildren = element?.querySelectorAll<HTMLElement>(`.${ITEM_GROUP_CLASSNAME}`);
+
+        /**
+         * Classname set on elements whose focus was blocked.
+         * This is to easily find elements that have been tempered with,
+         * and not elements whose focus was already initially blocked.
+         * */
+        const elementWithBlockedFocusClass = `${ITEM_GROUP_CLASSNAME}__no-focus`;
+
+        /**
+         * Display given slide to screen readers and, if focus was blocked, restore focus on elements..
+         */
+        const enableSlide = (slide: HTMLElement) => {
+            // Hide from screen readers
+            slide.setAttribute('aria-hidden', 'false');
+            // Find elements we have blocked focus on
+            slide.querySelectorAll(`.${elementWithBlockedFocusClass}`).forEach((focusableElement) => {
+                focusableElement.removeAttribute('tabindex');
+                focusableElement.classList.remove(elementWithBlockedFocusClass);
+            });
+        };
+
+        /**
+         * Hide given slide from screen readers and block focus on all focusable elements within.
+         */
+        const blockSlide = (slide: HTMLElement) => {
+            slide.setAttribute('aria-hidden', 'true');
+            getFocusableElements(slide).forEach((focusableElement) => {
+                focusableElement.setAttribute('tabindex', '-1');
+                focusableElement.classList.add(elementWithBlockedFocusClass);
+            });
+        };
+
+        if (slideshowChildren && slideshowChildren?.length > 0) {
+            Array.from(slideshowChildren).forEach((slide, slideIndex) => {
+                const slideIsVisible = slideIndex >= startIndexVisible && slideIndex < endIndexVisible;
+
+                if (slideIsVisible) {
+                    enableSlide(slide);
+                } else {
+                    blockSlide(slide);
+                }
+            });
+        }
+    }, [activeIndex, groupBy, wrapperRef]);
+};

package/src/hooks/useRovingTabIndex.tsx

@@ -4,6 +4,8 @@ interface UseRovingTabIndexOptions {
     parentRef: RefObject<HTMLElement>;
     elementSelector: string;
     keepTabIndex?: boolean;
+    /** Action to trigger when an element is focused using roving tab index */
+    onElementFocus?: (element: HTMLElement) => void;
     /** List of values to be used as extra dependencies of the useEffect */
     extraDependencies?: any[];
 }
@@ -12,6 +14,7 @@ export const useRovingTabIndex = ({
     parentRef,
     elementSelector,
     keepTabIndex,
+    onElementFocus,
     extraDependencies = [],
 }: UseRovingTabIndexOptions): void => {
     useEffect(
@@ -47,6 +50,12 @@ export const useRovingTabIndex = ({
                 }
                 const newElement = elements[newTabFocus];
                 newElement?.focus();
+
+                // When an element is focused using roving tab index, trigger the onElementFocus callback
+                if (newElement && onElementFocus) {
+                    onElementFocus(newElement);
+                }
+
                 if (keepTabIndex) {
                     (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');
                     newElement?.setAttribute('tabindex', '0');

package/src/utils/focus/constants.ts

@@ -0,0 +1,5 @@
+/** CSS selector listing all tabbable elements. */
+export const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]`;
+
+/** CSS selector matching element that are disabled (should not receive focus). */
+export const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;

package/src/utils/focus/getFirstAndLastFocusable.ts

@@ -1,10 +1,4 @@
-/** CSS selector listing all tabbable elements. */
-const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]`;
-
-/** CSS selector matching element that are disabled (should not receive focus). */
-const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;
-
-const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
+import { getFocusableElements } from './getFocusableElements';
 
 /**
  * Get first and last elements focusable in an element.
@@ -13,12 +7,12 @@ const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECT
  * @return first and last focusable elements
  */
 export function getFirstAndLastFocusable(parentElement: HTMLElement) {
-    const focusableElements = Array.from(parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR));
+    const focusableElements = getFocusableElements(parentElement);
 
     // First non disabled element.
-    const first = focusableElements.find(isNotDisabled);
+    const first = focusableElements[0];
     // Last non disabled element.
-    const last = focusableElements.reverse().find(isNotDisabled);
+    const last = focusableElements[focusableElements.length - 1];
 
     if (last && first) {
         return { first, last };

package/src/utils/focus/getFocusableElements.test.ts

@@ -0,0 +1,174 @@
+import { getFocusableElements } from '@lumx/react/utils/focus/getFocusableElements';
+
+function htmlToElement(html: string): any {
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstChild;
+}
+
+describe(getFocusableElements.name, () => {
+    it('should get empty', () => {
+        const element = htmlToElement(`<div></div>`);
+        const focusable = getFocusableElements(element);
+        expect(focusable).toEqual([]);
+    });
+
+    it('should get single item', () => {
+        const element = htmlToElement(`<div><button /></div>`);
+        const focusable = getFocusableElements(element);
+        expect(focusable).toMatchInlineSnapshot(`
+            Array [
+              <button />,
+            ]
+        `);
+    });
+
+    // it('should get first and last', () => {
+    //     const element = htmlToElement(`
+    //         <div>
+    //             <div>Non focusable div</div>
+    //             <button>Simple button</button>
+    //             <div>Non focusable div</div>
+    //             <input />
+    //             <div>Non focusable div</div>
+    //         </div>
+    //     `);
+    //     const focusable = getFocusableElements(element);
+    //     expect(focusable.first).toMatchInlineSnapshot(`
+    //         <button>
+    //           Simple button
+    //         </button>
+    //     `);
+    //     expect(focusable.first).toMatchInlineSnapshot(`
+    //         <button>
+    //           Simple button
+    //         </button>
+    //     `);
+    // });
+
+    describe('match focusable elements', () => {
+        it('should match input element', () => {
+            const element = htmlToElement(`<div><input /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <input />,
+                ]
+            `);
+        });
+
+        it('should match link element', () => {
+            const element = htmlToElement(`<div><a href="#" /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <a
+                    href="#"
+                  />,
+                ]
+            `);
+        });
+
+        it('should match textarea element', () => {
+            const element = htmlToElement(`<div><textarea /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <textarea>
+                    &lt;/div&gt;
+                  </textarea>,
+                ]
+            `);
+        });
+
+        it('should match element with tabindex', () => {
+            const element = htmlToElement(`<div><span tabindex="0" /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <span
+                    tabindex="0"
+                  />,
+                ]
+            `);
+        });
+
+        it('should keep disabled=false', () => {
+            const element = htmlToElement(`<div><button disabled="false" /><button /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <button
+                    disabled="false"
+                  />,
+                  <button />,
+                ]
+            `);
+        });
+
+        it('should keep aria-disabled=false', () => {
+            const element = htmlToElement(`<div><button aria-disabled="false" /><button /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <button
+                    aria-disabled="false"
+                  />,
+                  <button />,
+                ]
+            `);
+        });
+    });
+
+    describe('skip disabled elements', () => {
+        it('should skip disabled', () => {
+            const element = htmlToElement(`<div><button disabled /><button /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <button />,
+                ]
+            `);
+        });
+
+        it('should skip aria-disabled', () => {
+            const element = htmlToElement(`<div><button aria-disabled /><button /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <button />,
+                ]
+            `);
+        });
+
+        it('should skip tabindex=-1', () => {
+            const element = htmlToElement(`<div><button tabindex="-1" /><button /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <button />,
+                ]
+            `);
+        });
+
+        it('should skip input type hidden', () => {
+            const element = htmlToElement(`<div><input type="hidden" /><button /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <button />,
+                ]
+            `);
+        });
+
+        it('should skip hidden input', () => {
+            const element = htmlToElement(`<div><input hidden /><button /></div>`);
+            const focusable = getFocusableElements(element);
+            expect(focusable).toMatchInlineSnapshot(`
+                Array [
+                  <button />,
+                ]
+            `);
+        });
+    });
+});

package/src/utils/focus/getFocusableElements.ts

@@ -0,0 +1,7 @@
+import { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR } from './constants';
+
+const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
+
+export function getFocusableElements(element: HTMLElement): HTMLElement[] {
+    return Array.from(element.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
+}

package/types.d.ts

@@ -2135,13 +2135,13 @@ export declare const clamp: (value: number, min: number, max: number) => number;
 /**
  * Defines the props of the component.
  */
-export interface SlideshowProps extends GenericProps, Pick<SlidesProps, "autoPlay" | "slidesId" | "id" | "theme" | "fillHeight" | "groupBy"> {
+export interface SlideshowProps extends GenericProps, 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"> & Omit<SlideshowControlsProps, "activeIndex" | "onPaginationClick" | "onNextClick" | "onPreviousClick" | "slidesCount" | "parentRef" | "theme">;
+	slideshowControlsProps?: Pick<SlideshowControlsProps, "nextButtonProps" | "previousButtonProps" | "paginationItemProps"> & Omit<SlideshowControlsProps, "activeIndex" | "onPaginationClick" | "onNextClick" | "onPreviousClick" | "slidesCount" | "parentRef" | "theme">;
 	/** Callback when slide changes */
 	onChange?(index: number): void;
 }
@@ -2157,8 +2157,6 @@ export declare const Slideshow: Comp<SlideshowProps, HTMLDivElement>;
  * 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;
 }
@@ -2242,6 +2240,8 @@ export interface SlideshowControlsProps extends GenericProps, HasTheme {
 	parentRef?: RefObject<HTMLDivElement> | HTMLDivElement | null;
 	/** 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. */
@@ -2252,8 +2252,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>;
 	/** 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">;
 }
@@ -2280,6 +2287,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;
 }
 /**
  * Slides component.