@lumx/react 3.9.4-alpha.0 → 3.9.4-alpha.2

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.4-alpha.0",
-        "@lumx/icons": "^3.9.4-alpha.0",
+        "@lumx/core": "^3.9.4-alpha.2",
+        "@lumx/icons": "^3.9.4-alpha.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -111,5 +111,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.4-alpha.0"
+    "version": "3.9.4-alpha.2"
 }

package/src/components/slideshow/Slides.tsx

@@ -3,10 +3,11 @@ import chunk from 'lodash/chunk';
 
 import classNames from 'classnames';
 
-import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
+import { FULL_WIDTH_PERCENT, NEXT_SLIDE_EVENT } from '@lumx/react/components/slideshow/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useKeyNavigate } from '@lumx/react/components/slideshow/useKeyNavigate';
 import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
 export interface SlidesProps extends GenericProps, HasTheme {
@@ -84,6 +85,11 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
 
     const slidesRef = React.useRef<HTMLDivElement>(null);
 
+    const slide = slidesRef.current;
+    const onNextSlide = React.useCallback(() => slide?.dispatchEvent(new CustomEvent(NEXT_SLIDE_EVENT)), [slide]);
+    const onPrevSlide = React.useCallback(() => slide?.dispatchEvent(new CustomEvent(NEXT_SLIDE_EVENT)), [slide]);
+    useKeyNavigate(slide, onNextSlide, onPrevSlide);
+
     return (
         <section
             id={id}
@@ -107,7 +113,7 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
                         <SlideshowItemGroup
                             key={index}
                             id={slidesId && buildSlideShowGroupId(slidesId, index)}
-                            label={slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined}
+                            label={slideGroupLabel?.(index + 1, groups.length)}
                             isDisplayed={index >= startIndexVisible && index < endIndexVisible}
                             slidesRef={slidesRef}
                         >

package/src/components/slideshow/constants.ts

@@ -22,3 +22,7 @@ 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

@@ -7,11 +7,11 @@ export interface UseSlideFocusManagementProps {
 }
 
 /**
- * Classname set on elements whose focus was blocked.
+ * Data attribute 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_CLASSNAME = 'focus-blocked';
+ */
+const BLOCKED_FOCUS = 'data-focus-blocked';
 
 /**
  * Manage how slides must behave when visible or not.
@@ -19,89 +19,86 @@ const BLOCKED_FOCUS_CLASSNAME = 'focus-blocked';
  */
 export const useSlideFocusManagement = ({ isSlideDisplayed, slidesRef }: UseSlideFocusManagementProps) => {
     const [slide, setSlide] = React.useState<HTMLDivElement | null>(null);
-    useEffect(() => {
+
+    const [focusableElementSet, setFocusableElementSet] = React.useState<Set<HTMLElement>>();
+    React.useEffect(() => {
         if (!slide) {
             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;
+            });
 
-        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 = () => {
-            slide.removeAttribute('inert');
-            slide.setAttribute('aria-hidden', 'false');
-            // Find elements we have blocked focus on
-            // (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);
+        // Observe changes in the content of the slide
+        const observer = new MutationObserver((mutationsList) => {
+            if (mutationsList.some((mutation) => mutation.type === 'childList')) {
+                updateFocusableElements();
             }
-        };
+        });
+
+        updateFocusableElements();
 
-        /**
-         * Hide given slide from screen readers and block focus on all focusable elements within.
-         */
-        const blockSlide = () => {
+        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');
-            focusableElements = getFocusableElements(slide);
+
+            // TODO: remove when `inert` gets sufficient browser support
             for (const focusableElement of focusableElements) {
                 focusableElement.setAttribute('tabindex', '-1');
-                focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
+                focusableElement.setAttribute(BLOCKED_FOCUS, '');
             }
-        };
-
-        const handleDisplay = () => {
-            if (isSlideDisplayed) {
-                enableSlide();
-            } else {
-                blockSlide();
-            }
-        };
+        } else {
+            /* Un-block slide */
+            slide.removeAttribute('inert');
+            slide.removeAttribute('aria-hidden');
 
-        // 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();
-                }
+            // TODO: remove when `inert` gets sufficient browser support
+            for (const focusableElement of focusableElements) {
+                focusableElement.removeAttribute('tabindex');
+                focusableElement.removeAttribute(BLOCKED_FOCUS);
             }
-        });
 
-        handleDisplay();
+            // Change focus on slide displayed
+            const isUserActivated = slidesRef?.current?.dataset.lumxUserActivated === 'true';
+            if (isUserActivated) {
+                let elementToFocus: HTMLElement | undefined = slide;
 
-        // Change focus on slide displayed
-        if (isSlideDisplayed && isUserActivated) {
-            let elementToFocus: HTMLElement | undefined = slide;
+                // We have exactly one focusable element => focus it
+                if (focusableElementSet.size === 1) {
+                    // eslint-disable-next-line prefer-destructuring
+                    elementToFocus = focusableElements[0];
+                }
 
-            // We have exactly one focusable element => focus it
-            if (focusableElements.length === 1) {
-                // eslint-disable-next-line prefer-destructuring
-                elementToFocus = focusableElements[0];
-            }
+                // We have not focusable element => focus the pagination item
+                if (focusableElementSet.size === 0) {
+                    elementToFocus = document.querySelector(`[aria-controls="${slide?.id}"]`) as HTMLElement;
+                }
 
-            // We have not focusable element => focus the pagination item
-            if (focusableElements.length === 0) {
-                elementToFocus = document.querySelector(`[aria-controls="${slide?.id}"]`) as HTMLElement;
+                elementToFocus?.focus({ preventScroll: true });
             }
-
-            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]);
+    }, [focusableElementSet, isSlideDisplayed, slide, slidesRef]);
 
     return setSlide;
 };

package/src/components/slideshow/useSlideshowControls.ts

@@ -3,7 +3,7 @@ import { clamp } from '@lumx/react';
 import { useInterval } from '@lumx/react/hooks/useInterval';
 import { useId } from '@lumx/react/hooks/useId';
 
-import { AUTOPLAY_DEFAULT_INTERVAL } from './constants';
+import { AUTOPLAY_DEFAULT_INTERVAL, NEXT_SLIDE_EVENT, PREV_SLIDE_EVENT } from './constants';
 
 export interface UseSlideshowControlsOptions {
     /** default active index to be displayed */
@@ -179,6 +179,18 @@ export const useSlideshowControls = ({
         [goTo, stopAutoPlay],
     );
 
+    // Listen to custom next/prev slide events
+    useEffect(() => {
+        if (!element) return undefined;
+
+        element.addEventListener(NEXT_SLIDE_EVENT, onNextClick);
+        element.addEventListener(PREV_SLIDE_EVENT, onPreviousClick);
+        return () => {
+            element.removeEventListener(NEXT_SLIDE_EVENT, onNextClick);
+            element.removeEventListener(PREV_SLIDE_EVENT, onPreviousClick);
+        };
+    }, [element, onNextClick, onPreviousClick]);
+
     // If the activeIndex props changes, update the current slide
     useEffect(() => {
         setActiveIndex(activeIndex as number);