@lumx/react 3.9.4-alpha.3 → 3.9.4

package/src/components/slideshow/SlideshowControls.tsx

@@ -1,18 +1,16 @@
-import React, { forwardRef, RefObject, useCallback, useState } from 'react';
+import React, { forwardRef, RefObject, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 import range from 'lodash/range';
 
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
-import { Emphasis, IconButton, IconButtonProps, Slides, Theme } from '@lumx/react';
+import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { WINDOW } from '@lumx/react/constants';
-import { useKeyNavigate } from '@lumx/react/components/slideshow/useKeyNavigate';
-import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
+import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';
 
-import { buildSlideShowGroupId } from '@lumx/react/components/slideshow/SlideshowItemGroup';
-import { DEFAULT_OPTIONS, useSlideshowControls } from './useSlideshowControls';
 import { useSwipeNavigate } from './useSwipeNavigate';
 import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';
 import { usePaginationVisibleRange } from './usePaginationVisibleRange';
@@ -36,11 +34,11 @@ export interface SlideshowControlsProps extends GenericProps, HasTheme {
     /** Number of slides. */
     slidesCount: number;
     /** On next button click callback. */
-    onNextClick?(loopBack?: boolean): void;
+    onNextClick?(loopback?: boolean): void;
     /** On pagination change callback. */
     onPaginationClick?(index: number): void;
     /** On previous button click callback. */
-    onPreviousClick?(loopBack?: boolean): void;
+    onPreviousClick?(loopback?: boolean): void;
     /** whether the slideshow is currently playing */
     isAutoPlaying?: boolean;
     /**
@@ -102,7 +100,7 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         ...forwardedProps
     } = props;
 
-    let parent: HTMLElement | null | undefined;
+    let parent;
     if (WINDOW) {
         // Checking window object to avoid errors in SSR.
         parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
@@ -111,30 +109,33 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
     // Listen to touch swipe navigate left & right.
     useSwipeNavigate(
         parent,
-        // Go next without loop back.
+        // Go next without loopback.
         useCallback(() => onNextClick?.(false), [onNextClick]),
-        // Go previous without loop back.
+        // Go previous without loopback.
         useCallback(() => onPreviousClick?.(false), [onPreviousClick]),
     );
 
-    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
-    const onButtonFocus = useCallback((index: number) => () => setFocusedIndex(index), [setFocusedIndex]);
-    const onFocusOut = useCallback(() => setFocusedIndex(null), [setFocusedIndex]);
+    /**
+     * 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(focusedIndex ?? (activeIndex as number), slidesCount);
+    const visibleRange = usePaginationVisibleRange(activeIndex as number, slidesCount);
 
     // Inline style of wrapper element.
     const wrapperStyle = { transform: `translateX(-${PAGINATION_ITEM_SIZE * visibleRange.min}px)` };
 
-    const controlsRef = React.useRef<HTMLDivElement>(null);
-    useKeyNavigate(controlsRef.current, onNextClick, onPreviousClick);
-
-    const slideshowSlidesId = React.useMemo(() => parent?.querySelector(`.${Slides.className}__slides`)?.id, [parent]);
-
     return (
         <div
-            ref={useMergeRefs(ref, controlsRef)}
+            ref={ref}
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
                 [`${CLASSNAME}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX,
@@ -147,53 +148,64 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                 color={theme === Theme.dark ? 'light' : 'dark'}
                 emphasis={Emphasis.low}
                 onClick={onPreviousClick}
-                aria-controls={slideshowSlidesId}
             />
-
             <div ref={paginationRef} className={`${CLASSNAME}__pagination`}>
                 <div
                     className={`${CLASSNAME}__pagination-items`}
                     style={wrapperStyle}
+                    role="tablist"
                     {...paginationProps}
-                    onBlur={onFocusOut}
                 >
-                    {range(slidesCount).map((index) => {
-                        const isOnEdge =
-                            index !== 0 &&
-                            index !== slidesCount - 1 &&
-                            (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(
-                                    handleBasicClasses({
-                                        prefix: `${CLASSNAME}__pagination-item`,
-                                        isActive,
-                                        isOnEdge,
-                                        isOutRange,
-                                    }),
-                                    itemClassName,
-                                )}
-                                key={index}
-                                type="button"
-                                aria-current={isActive || undefined}
-                                aria-controls={buildSlideShowGroupId(slideshowSlidesId, index)}
-                                onClick={() => onPaginationClick?.(index)}
-                                onFocus={onButtonFocus(index)}
-                                aria-label={ariaLabel}
-                                {...itemProps}
-                            />
-                        );
-                    })}
+                    {useMemo(
+                        () =>
+                            range(slidesCount).map((index) => {
+                                const isOnEdge =
+                                    index !== 0 &&
+                                    index !== slidesCount - 1 &&
+                                    (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(
+                                            handleBasicClasses({
+                                                prefix: `${CLASSNAME}__pagination-item`,
+                                                isActive,
+                                                isOnEdge,
+                                                isOutRange,
+                                            }),
+                                            itemClassName,
+                                        )}
+                                        key={index}
+                                        type="button"
+                                        tabIndex={isActive ? undefined : -1}
+                                        role="tab"
+                                        aria-selected={isActive}
+                                        onClick={() => onPaginationClick?.(index)}
+                                        aria-label={ariaLabel}
+                                        {...itemProps}
+                                    />
+                                );
+                            }),
+                        [
+                            slidesCount,
+                            visibleRange.min,
+                            visibleRange.max,
+                            activeIndex,
+                            paginationItemProps,
+                            paginationItemLabel,
+                            onPaginationClick,
+                        ],
+                    )}
                 </div>
             </div>
 
@@ -204,7 +216,6 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                     className={`${CLASSNAME}__play`}
                     color={theme === Theme.dark ? 'light' : 'dark'}
                     emphasis={Emphasis.low}
-                    aria-controls={slideshowSlidesId}
                 />
             ) : null}
 
@@ -215,7 +226,6 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                 color={theme === Theme.dark ? 'light' : 'dark'}
                 emphasis={Emphasis.low}
                 onClick={onNextClick}
-                aria-controls={slideshowSlidesId}
             />
         </div>
     );

package/src/components/slideshow/SlideshowItem.tsx

@@ -33,7 +33,16 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRef((props, ref) => {
     const { className, children, ...forwardedProps } = props;
     return (
-        <div ref={ref} className={classNames(className, CLASSNAME)} {...forwardedProps}>
+        <div
+            ref={ref}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                }),
+            )}
+            {...forwardedProps}
+        >
             {children}
         </div>
     );

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -1,17 +1,19 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
-import { getRootClassName } from '@lumx/react/utils/className';
+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 {
-    id?: string;
+export interface SlideshowItemGroupProps extends GenericProps {
+    role?: 'tabpanel' | 'group';
     label?: string;
     isDisplayed?: boolean;
-    slidesRef?: React.RefObject<HTMLDivElement>;
 }
 
 /**
@@ -24,24 +26,39 @@ const COMPONENT_NAME = 'SlideshowItemGroup';
  */
 export const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
-export const buildSlideShowGroupId = (slidesId: string | undefined, index: number) =>
-    slidesId && `${slidesId}-slide-${index}`;
+export const buildSlideShowGroupId = (slidesId: string, index: number) => `${slidesId}-slide-${index}`;
 
 /**
- * Internal slideshow item group component.
+ * SlideshowItemGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
  */
-export const SlideshowItemGroup: React.FC<SlideshowItemGroupProps> = (props) => {
-    const { id, children, label, isDisplayed, slidesRef } = props;
+export const SlideshowItemGroup: Comp<SlideshowItemGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { className, children, role = 'group', label, isDisplayed, ...forwardedProps } = props;
+    const groupRef = React.useRef<HTMLDivElement>(null);
 
-    const groupRef = useSlideFocusManagement({
-        isSlideDisplayed: isDisplayed,
-        slidesRef,
-    });
+    useSlideFocusManagement({ isSlideDisplayed: isDisplayed, slideRef: groupRef });
 
     return (
-        <div id={id} ref={groupRef} role="group" className={CLASSNAME} aria-label={label} tabIndex={-1}>
+        <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/constants.ts

@@ -22,7 +22,3 @@ export const PAGINATION_ITEMS_MAX = 5;
  * Size of a pagination item. Used to translate wrapper.
  */
 export const PAGINATION_ITEM_SIZE = 12;
-
-
-export const NEXT_SLIDE_EVENT = 'lumx-next-slide-event';
-export const PREV_SLIDE_EVENT = 'lumx-prev-slide-event';

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -3,102 +3,90 @@ import { getFocusableElements } from '@lumx/react/utils/focus/getFocusableElemen
 
 export interface UseSlideFocusManagementProps {
     isSlideDisplayed?: boolean;
-    slidesRef?: React.RefObject<HTMLDivElement>;
+    slideRef: React.RefObject<HTMLDivElement>;
 }
 
 /**
- * Data attribute set on elements whose focus was blocked.
+ * 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 BLOCKED_FOCUS = 'data-focus-blocked';
+ * */
+const BLOCKED_FOCUS_CLASSNAME = 'focus-blocked';
 
 /**
  * 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 = ({ isSlideDisplayed, slidesRef }: UseSlideFocusManagementProps) => {
-    const [slide, setSlide] = React.useState<HTMLDivElement | null>(null);
+export const useSlideFocusManagement = ({ isSlideDisplayed, slideRef }: UseSlideFocusManagementProps) => {
+    useEffect(() => {
+        const element = slideRef?.current;
 
-    const [focusableElementSet, setFocusableElementSet] = React.useState<Set<HTMLElement>>();
-    React.useEffect(() => {
-        if (!slide) {
+        if (!element) {
             return undefined;
         }
-        // Update the slide's focusable element list (including the blocked elements)
-        const updateFocusableElements = () =>
-            setFocusableElementSet((set = new Set()) => {
-                // TODO: remove when `inert` gets sufficient browser support
-                const focusedBlocked = Array.from(slide.querySelectorAll(`[${BLOCKED_FOCUS}]`)) as HTMLElement[];
-                for (const element of focusedBlocked) {
-                    set.add(element);
-                }
-                for (const element of getFocusableElements(slide)) {
-                    set.add(element);
-                }
-                return set;
+
+        /**
+         * Display given slide to screen readers and, if focus was blocked, restore focus on elements.
+         */
+        const enableSlide = () => {
+            // Hide from screen readers
+            element.setAttribute('aria-hidden', 'false');
+            // Find elements we have blocked focus on
+            element.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`).forEach((focusableElement) => {
+                focusableElement.removeAttribute('tabindex');
+                focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
             });
+        };
+
+        /**
+         * Hide given slide from screen readers and block focus on all focusable elements within.
+         */
+        const blockSlide = () => {
+            element.setAttribute('aria-hidden', 'true');
+            getFocusableElements(element).forEach((focusableElement) => {
+                focusableElement.setAttribute('tabindex', '-1');
+                focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
+            });
+        };
 
-        // Observe changes in the content of the slide
-        const observer = new MutationObserver((mutationsList) => {
-            if (mutationsList.some((mutation) => mutation.type === 'childList')) {
-                updateFocusableElements();
+        const handleDisplay = () => {
+            if (!element) {
+                return;
             }
-        });
-
-        updateFocusableElements();
-
-        observer.observe(slide, { attributes: true, childList: true, subtree: true });
-        return observer.disconnect();
-    }, [slide]);
-
-    useEffect(() => {
-        if (!slide || !focusableElementSet) {
-            return;
-        }
-        const focusableElements = Array.from(focusableElementSet);
-
-        if (!isSlideDisplayed) {
-            /* Block slide */
-            slide.setAttribute('inert', '');
-            slide.setAttribute('aria-hidden', 'true');
-
-            // TODO: remove when `inert` gets sufficient browser support
-            for (const focusableElement of focusableElements) {
-                focusableElement.setAttribute('tabindex', '-1');
-                focusableElement.setAttribute(BLOCKED_FOCUS, '');
+            if (isSlideDisplayed) {
+                enableSlide();
+            } else {
+                blockSlide();
             }
-        } else {
-            /* Un-block slide */
-            slide.removeAttribute('inert');
-            slide.removeAttribute('aria-hidden');
-
-            // TODO: remove when `inert` gets sufficient browser support
-            for (const focusableElement of focusableElements) {
-                focusableElement.removeAttribute('tabindex');
-                focusableElement.removeAttribute(BLOCKED_FOCUS);
+        };
+
+        // Callback function to execute when mutations are observed
+        const callback: MutationCallback = (mutationsList) => {
+            if (element) {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === 'childList') {
+                        handleDisplay();
+                    }
+                }
             }
+        };
 
-            // Change focus on slide displayed
-            const isUserActivated = slidesRef?.current?.dataset.lumxUserActivated === 'true';
-            if (isUserActivated) {
-                let elementToFocus: HTMLElement | undefined = slide;
+        // Create an observer instance linked to the callback function
+        const observer = new MutationObserver(callback);
 
-                // We have exactly one focusable element => focus it
-                if (focusableElementSet.size === 1) {
-                    // eslint-disable-next-line prefer-destructuring
-                    elementToFocus = focusableElements[0];
-                }
+        if (element) {
+            handleDisplay();
 
-                // We have not focusable element => focus the pagination item
-                if (focusableElementSet.size === 0) {
-                    elementToFocus = document.querySelector(`[aria-controls="${slide?.id}"]`) as HTMLElement;
-                }
-
-                elementToFocus?.focus({ preventScroll: true });
+            /** If slide is hidden, start observing for elements to block focus  */
+            if (!isSlideDisplayed) {
+                observer.observe(element, { attributes: true, childList: true, subtree: true });
             }
         }
-    }, [focusableElementSet, isSlideDisplayed, slide, slidesRef]);
 
-    return setSlide;
+        return () => {
+            if (!isSlideDisplayed) {
+                observer.disconnect();
+            }
+        };
+    }, [isSlideDisplayed, slideRef]);
 };