@lumx/react 3.9.2 → 3.9.4-alpha.0

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -3,7 +3,7 @@ import { getFocusableElements } from '@lumx/react/utils/focus/getFocusableElemen
 
 export interface UseSlideFocusManagementProps {
     isSlideDisplayed?: boolean;
-    slideRef: React.RefObject<HTMLDivElement>;
+    slidesRef?: React.RefObject<HTMLDivElement>;
 }
 
 /**
@@ -17,42 +17,45 @@ 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, slideRef }: UseSlideFocusManagementProps) => {
+export const useSlideFocusManagement = ({ isSlideDisplayed, slidesRef }: UseSlideFocusManagementProps) => {
+    const [slide, setSlide] = React.useState<HTMLDivElement | null>(null);
     useEffect(() => {
-        const element = slideRef?.current;
-
-        if (!element) {
+        if (!slide) {
             return undefined;
         }
 
+        const isUserActivated = slidesRef?.current?.dataset.lumxUserActivated === 'true';
+        let focusableElements: Array<HTMLElement> = [];
+
         /**
          * 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');
+            slide.removeAttribute('inert');
+            slide.setAttribute('aria-hidden', 'false');
             // Find elements we have blocked focus on
-            element.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`).forEach((focusableElement) => {
+            // (won't be necessary once "inert" gets sufficient browser support)
+            focusableElements = Array.from(slide.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`));
+            for (const focusableElement of focusableElements) {
                 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) => {
+            slide.setAttribute('inert', '');
+            slide.setAttribute('aria-hidden', 'true');
+            focusableElements = getFocusableElements(slide);
+            for (const focusableElement of focusableElements) {
                 focusableElement.setAttribute('tabindex', '-1');
                 focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
-            });
+            }
         };
 
         const handleDisplay = () => {
-            if (!element) {
-                return;
-            }
             if (isSlideDisplayed) {
                 enableSlide();
             } else {
@@ -60,33 +63,45 @@ export const useSlideFocusManagement = ({ isSlideDisplayed, slideRef }: UseSlide
             }
         };
 
-        // Callback function to execute when mutations are observed
-        const callback: MutationCallback = (mutationsList) => {
-            if (element) {
-                for (const mutation of mutationsList) {
-                    if (mutation.type === 'childList') {
-                        handleDisplay();
-                    }
+        // Create an observer instance linked to the callback function
+        // (won't be necessary once "inert" gets sufficient browser support)
+        const observer = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    handleDisplay();
                 }
             }
-        };
+        });
 
-        // Create an observer instance linked to the callback function
-        const observer = new MutationObserver(callback);
+        handleDisplay();
 
-        if (element) {
-            handleDisplay();
+        // Change focus on slide displayed
+        if (isSlideDisplayed && isUserActivated) {
+            let elementToFocus: HTMLElement | undefined = slide;
 
-            /** If slide is hidden, start observing for elements to block focus  */
-            if (!isSlideDisplayed) {
-                observer.observe(element, { attributes: true, childList: true, subtree: true });
+            // We have exactly one focusable element => focus it
+            if (focusableElements.length === 1) {
+                // eslint-disable-next-line prefer-destructuring
+                elementToFocus = focusableElements[0];
             }
-        }
 
-        return () => {
-            if (!isSlideDisplayed) {
-                observer.disconnect();
+            // We have not focusable element => focus the pagination item
+            if (focusableElements.length === 0) {
+                elementToFocus = document.querySelector(`[aria-controls="${slide?.id}"]`) as HTMLElement;
             }
-        };
-    }, [isSlideDisplayed, slideRef]);
+
+            elementToFocus?.focus({ preventScroll: true });
+        }
+
+        /** If slide is hidden, start observing for elements to block focus  */
+        if (!isSlideDisplayed) {
+            observer.observe(slide, { attributes: true, childList: true, subtree: true });
+
+            return () => observer.disconnect();
+        }
+
+        return undefined;
+    }, [isSlideDisplayed, slide, slidesRef]);
+
+    return setSlide;
 };

package/src/{hooks → components/slideshow}/useSlideshowControls.ts

@@ -1,9 +1,10 @@
-import { useState, useCallback, useEffect } from 'react';
-
+import { SetStateAction, useCallback, useEffect, useState } from 'react';
+import { clamp } from '@lumx/react';
 import { useInterval } from '@lumx/react/hooks/useInterval';
-import { AUTOPLAY_DEFAULT_INTERVAL } from '@lumx/react/components/slideshow/constants';
 import { useId } from '@lumx/react/hooks/useId';
 
+import { AUTOPLAY_DEFAULT_INTERVAL } from './constants';
+
 export interface UseSlideshowControlsOptions {
     /** default active index to be displayed */
     defaultActiveIndex?: number;
@@ -43,9 +44,9 @@ export interface UseSlideshowControls {
     /** id to be used for the wrapper that contains the slides */
     slideshowSlidesId: string;
     /** callback that triggers the previous slide while using the slideshow controls  */
-    onPreviousClick: (loopback: boolean) => void;
+    onPreviousClick: (loopBack: boolean) => void;
     /** callback that triggers the next slide while using the slideshow controls */
-    onNextClick: (loopback: boolean) => void;
+    onNextClick: (loopBack: boolean) => void;
     /** callback that triggers a specific page while using the slideshow controls */
     onPaginationClick: (index: number) => void;
     /** whether the slideshow is autoplaying or not */
@@ -54,16 +55,18 @@ export interface UseSlideshowControls {
     isForcePaused: boolean;
     /** callback to change whether the slideshow is autoplaying or not */
     toggleAutoPlay: () => void;
-    /** calback to change whether the slideshow should be force paused or not */
+    /** callback to change whether the slideshow should be force paused or not */
     toggleForcePause: () => void;
     /** current active slide index  */
     activeIndex: number;
     /** set the current index as the active one */
     setActiveIndex: (index: number) => void;
-    /** callback that stops the auto play */
+    /** callback that stops the autoplay */
     stopAutoPlay: () => void;
-    /** callback that starts the auto play */
+    /** callback that starts the autoplay */
     startAutoPlay: () => void;
+    /** True if the last slide change is user activated */
+    isUserActivated?: boolean;
 }
 
 export const DEFAULT_OPTIONS: Partial<UseSlideshowControlsOptions> = {
@@ -90,40 +93,34 @@ export const useSlideshowControls = ({
     // Number of slides when using groupBy prop.
     const slidesCount = Math.ceil(itemsCount / Math.min(groupBy as number, itemsCount));
 
-    // Change current index to display next slide.
-    const goToNextSlide = useCallback(
-        (loopback = true) => {
-            setCurrentIndex((index) => {
-                if (loopback && index === slidesCount - 1) {
-                    // Loopback to the start.
-                    return 0;
-                }
-                if (index < slidesCount - 1) {
-                    // Next slide.
-                    return index + 1;
-                }
-                return index;
-            });
+    // Set current active index (& if is user activated)
+    const setActiveIndex = useCallback(
+        (setStateAction: SetStateAction<number>, isUser?: boolean) => {
+            // Store on element a boolean value when the slide change was not from a user action.
+            const elementDataset = element?.dataset as any;
+            if (elementDataset) {
+                if (isUser) elementDataset.lumxUserActivated = true;
+                else delete elementDataset.lumxUserActivated;
+            }
+
+            setCurrentIndex(setStateAction);
         },
-        [slidesCount, setCurrentIndex],
+        [element],
     );
 
-    // Change current index to display previous slide.
-    const goToPreviousSlide = useCallback(
-        (loopback = true) => {
-            setCurrentIndex((index) => {
-                if (loopback && index === 0) {
-                    // Loopback to the end.
-                    return slidesCount - 1;
+    // Change slide given delta (-1/+1) with or without loop back.
+    const goTo = useCallback(
+        (delta: -1 | 1 = 1, loopBack = true, isUser?: boolean) => {
+            setActiveIndex((index) => {
+                if (loopBack) {
+                    const newIndex = (index + delta) % slidesCount;
+                    if (newIndex < 0) return slidesCount + newIndex;
+                    return newIndex;
                 }
-                if (index > 0) {
-                    // Previous slide.
-                    return index - 1;
-                }
-                return index;
-            });
+                return clamp(index + delta, 0, slidesCount - 1);
+            }, isUser);
         },
-        [slidesCount, setCurrentIndex],
+        [slidesCount, setActiveIndex],
     );
 
     // Auto play
@@ -132,22 +129,22 @@ export const useSlideshowControls = ({
 
     const isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying;
     // Start
-    useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? (interval as number) : null);
+    useInterval(goTo, isSlideshowAutoPlaying && slidesCount > 1 ? (interval as number) : null);
 
-    // Reset current index if it become invalid.
+    // Reset current index if it becomes invalid.
     useEffect(() => {
         if (currentIndex > slidesCount - 1) {
-            setCurrentIndex(defaultActiveIndex as number);
+            setActiveIndex(defaultActiveIndex as number);
         }
-    }, [currentIndex, slidesCount, defaultActiveIndex]);
+    }, [currentIndex, slidesCount, defaultActiveIndex, setActiveIndex]);
 
-    const startAutoPlay = () => {
+    const startAutoPlay = useCallback(() => {
         setIsAutoPlaying(Boolean(autoPlay));
-    };
+    }, [autoPlay]);
 
-    const stopAutoPlay = () => {
+    const stopAutoPlay = useCallback(() => {
         setIsAutoPlaying(false);
-    };
+    }, []);
 
     // Handle click on a bullet to go to a specific slide.
     const onPaginationClick = useCallback(
@@ -156,36 +153,36 @@ export const useSlideshowControls = ({
             setIsForcePaused(true);
 
             if (index >= 0 && index < slidesCount) {
-                setCurrentIndex(index);
+                setActiveIndex(index, true);
             }
         },
-        [slidesCount, setCurrentIndex],
+        [stopAutoPlay, slidesCount, setActiveIndex],
     );
 
     // Handle click or keyboard event to go to next slide.
     const onNextClick = useCallback(
-        (loopback = true) => {
+        (loopBack = true) => {
             stopAutoPlay();
             setIsForcePaused(true);
-            goToNextSlide(loopback);
+            goTo(1, loopBack, true);
         },
-        [goToNextSlide],
+        [goTo, stopAutoPlay],
     );
 
     // Handle click or keyboard event to go to previous slide.
     const onPreviousClick = useCallback(
-        (loopback = true) => {
+        (loopBack = true) => {
             stopAutoPlay();
             setIsForcePaused(true);
-            goToPreviousSlide(loopback);
+            goTo(-1, loopBack, true);
         },
-        [goToPreviousSlide],
+        [goTo, stopAutoPlay],
     );
 
     // If the activeIndex props changes, update the current slide
     useEffect(() => {
-        setCurrentIndex(activeIndex as number);
-    }, [activeIndex]);
+        setActiveIndex(activeIndex as number);
+    }, [activeIndex, setActiveIndex]);
 
     // If the slide changes, with autoplay for example, trigger "onChange"
     useEffect(() => {
@@ -199,15 +196,15 @@ export const useSlideshowControls = ({
     const generatedSlidesId = useId();
     const slideshowSlidesId = slidesId || generatedSlidesId;
 
-    const toggleAutoPlay = () => {
+    const toggleAutoPlay = useCallback(() => {
         if (isSlideshowAutoPlaying) {
             stopAutoPlay();
         } else {
             startAutoPlay();
         }
-    };
+    }, [isSlideshowAutoPlaying, startAutoPlay, stopAutoPlay]);
 
-    const toggleForcePause = () => {
+    const toggleForcePause = useCallback(() => {
         const shouldBePaused = !isForcePaused;
 
         setIsForcePaused(shouldBePaused);
@@ -217,7 +214,7 @@ export const useSlideshowControls = ({
         } else {
             stopAutoPlay();
         }
-    };
+    }, [isForcePaused, startAutoPlay, stopAutoPlay]);
 
     // Start index and end index of visible slides.
     const startIndexVisible = currentIndex * (groupBy as number);
@@ -237,7 +234,7 @@ export const useSlideshowControls = ({
         toggleAutoPlay,
         activeIndex: currentIndex,
         slidesCount,
-        setActiveIndex: setCurrentIndex,
+        setActiveIndex,
         startAutoPlay,
         stopAutoPlay,
         isForcePaused,

package/src/components/tooltip/Tooltip.test.tsx

@@ -5,8 +5,9 @@ import { screen, render } from '@testing-library/react';
 import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
-
 import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
+
 import { Tooltip, TooltipProps } from './Tooltip';
 
 const CLASSNAME = Tooltip.className as string;
@@ -142,11 +143,11 @@ describe(`<${Tooltip.displayName}>`, () => {
                     forceOpen: false,
                 });
                 expect(tooltip).toBeInTheDocument();
-                expect(tooltip).toHaveClass('lumx-tooltip--is-hidden');
+                expect(tooltip).toHaveClass(VISUALLY_HIDDEN);
 
                 const anchor = screen.getByRole('button', { name: 'Anchor' });
                 await userEvent.hover(anchor);
-                expect(tooltip).not.toHaveClass('lumx-tooltip--is-hidden');
+                expect(tooltip).not.toHaveClass(VISUALLY_HIDDEN);
             });
         });
 

package/src/components/tooltip/Tooltip.tsx

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
-import { DOCUMENT } from '@lumx/react/constants';
+import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
 import { Comp, GenericProps, HasCloseMode } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -106,6 +106,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
     const isOpen = (isActivated || forceOpen) && !!label;
     const isMounted = !!label && (isOpen || closeMode === 'hide');
+    const isHidden = !isOpen && closeMode === 'hide';
     const wrappedChildren = useInjectTooltipRef({
         children,
         setAnchorElement,
@@ -139,8 +140,8 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
                             handleBasicClasses({
                                 prefix: CLASSNAME,
                                 position,
-                                hidden: !isOpen && closeMode === 'hide',
                             }),
+                            isHidden && VISUALLY_HIDDEN,
                         )}
                         style={{ ...styles.popper, zIndex }}
                         {...attributes.popper}

package/src/constants.ts

@@ -20,3 +20,8 @@ export const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
  * Check if we are running in a true browser
  */
 export const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
+
+/**
+ * Visually hidden a11y utility class name
+ */
+export const VISUALLY_HIDDEN = 'visually-hidden';

package/src/utils/DOM/startViewTransition.ts

@@ -5,9 +5,21 @@ import { MaybeElementOrRef } from '@lumx/react/utils/type';
 import { unref } from '../react/unref';
 import { getPrefersReducedMotion } from '../browser/getPrefersReducedMotion';
 
-function setTransitionViewName(elementRef: MaybeElementOrRef<HTMLElement>, name: string | null | undefined) {
-    const element = unref(elementRef) as any;
-    if (element) element.style.viewTransitionName = name;
+function setupViewTransitionName(elementRef: MaybeElementOrRef<HTMLElement>, name: string) {
+    let originalName: string | null = null;
+    return {
+        set() {
+            const element = unref(elementRef);
+            if (!element) return;
+            originalName = element.style.viewTransitionName;
+            element.style.viewTransitionName = name;
+        },
+        unset() {
+            const element = unref(elementRef);
+            if (!element || originalName === null) return;
+            element.style.viewTransitionName = originalName;
+        },
+    };
 }
 
 /**
@@ -37,20 +49,20 @@ export async function startViewTransition({
         return;
     }
 
-    // Set transition name on source element
-    setTransitionViewName(viewTransitionName.source, viewTransitionName.name);
+    // Setup set/unset transition name on source & target
+    const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);
+    const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);
+
+    sourceTransitionName.set();
 
     // Start view transition, apply changes & flush to DOM
     await start(() => {
-        // Un-set transition name on source element
-        setTransitionViewName(viewTransitionName.source, null);
+        sourceTransitionName.unset();
 
         flushSync(changes);
 
-        // Set transition name on target element
-        setTransitionViewName(viewTransitionName.target, viewTransitionName.name);
+        targetTransitionName.set();
     }).updateCallbackDone;
 
-    // Un-set transition name on target element
-    setTransitionViewName(viewTransitionName.target, null);
+    targetTransitionName.unset();
 }