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

package/esm/_internal/Slides.js

@@ -1,6 +1,6 @@
-import { d as _slicedToArray, _ as _objectSpread2, b as _objectWithoutProperties, c as _extends, a as _defineProperty } from './_rollupPluginBabelHelpers.js';
+import { d as _slicedToArray, b as _objectWithoutProperties, c as _extends, _ as _objectSpread2, a as _defineProperty } from './_rollupPluginBabelHelpers.js';
 import { Theme, Emphasis } from './components.js';
-import React, { useRef, useEffect, useState, useCallback, useMemo, forwardRef } from 'react';
+import React, { useRef, useEffect, useState, useCallback, useMemo, forwardRef, Children } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses, e as detectHorizontalSwipe } from './getRootClassName.js';
 import { g as mdiChevronLeft, p as mdiPauseCircleOutline, q as mdiPlayCircleOutline, f as mdiChevronRight } from './Icon2.js';
 import { W as WINDOW } from './constants.js';
@@ -9,7 +9,10 @@ import { m as mergeRefs } from './mergeRefs.js';
 import { I as IconButton } from './IconButton.js';
 import isFunction from 'lodash/isFunction';
 import range from 'lodash/range';
+import { a as getFocusableElements } from './ClickAwayProvider.js';
+import { u as useRovingTabIndex } from './useRovingTabIndex.js';
 import uniqueId from 'lodash/uniqueId';
+import chunk from 'lodash/chunk';
 
 /**
  * Making setInterval Declarative with React Hooks.
@@ -242,6 +245,51 @@ var useSlideshowControls = function useSlideshowControls(_ref) {
   };
 };
 
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+var COMPONENT_NAME = 'SlideshowItemGroup';
+/**
+ * Component default class name and class prefix.
+ */
+
+var CLASSNAME = getRootClassName(COMPONENT_NAME);
+var buildSlideShowGroupId = function buildSlideShowGroupId(slidesId, index) {
+  return "".concat(slidesId, "-slide-").concat(index);
+};
+/**
+ * SlideshowItemGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+
+var SlideshowItemGroup = forwardRef(function (props, ref) {
+  var className = props.className,
+      children = props.children,
+      _props$role = props.role,
+      role = _props$role === void 0 ? 'group' : _props$role,
+      label = props.label,
+      forwardedProps = _objectWithoutProperties(props, ["className", "children", "role", "label"]);
+
+  return React.createElement("div", _extends({
+    ref: ref,
+    role: role,
+    className: classnames(className, handleBasicClasses({
+      prefix: CLASSNAME
+    })),
+    "aria-roledescription": "slide",
+    "aria-label": label
+  }, forwardedProps), children);
+});
+SlideshowItemGroup.displayName = COMPONENT_NAME;
+SlideshowItemGroup.className = CLASSNAME;
+
 /**
  * Defines the props of the component.
  */
@@ -274,7 +322,8 @@ var Slideshow = forwardRef(function (props, ref) {
       theme = props.theme,
       id = props.id,
       slidesId = props.slidesId,
-      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId"]); // Number of slideshow items.
+      slideGroupLabel = props.slideGroupLabel,
+      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId", "slideGroupLabel"]); // Number of slideshow items.
 
 
   var itemsCount = React.Children.count(children);
@@ -310,6 +359,7 @@ var Slideshow = forwardRef(function (props, ref) {
     onFocusIn: stopAutoPlay,
     onFocusOut: startAutoPlay
   });
+  var showControls = slideshowControlsProps && slidesCount > 1;
   return React.createElement(Slides, _extends({
     activeIndex: currentIndex,
     id: slideshowId,
@@ -321,8 +371,9 @@ var Slideshow = forwardRef(function (props, ref) {
     autoPlay: autoPlay,
     slidesId: slideshowSlidesId,
     toggleAutoPlay: toggleAutoPlay,
-    interval: interval,
     ref: mergeRefs(ref, setSlideshow),
+    hasControls: showControls,
+    slideGroupLabel: slideGroupLabel,
     afterSlides: slideshowControlsProps && slidesCount > 1 ? React.createElement("div", {
       className: "".concat(Slides.className, "__controls")
     }, React.createElement(SlideshowControls, _extends({}, slideshowControlsProps, {
@@ -343,7 +394,14 @@ var Slideshow = forwardRef(function (props, ref) {
       playButtonProps: autoPlay ? _objectSpread2({
         'aria-controls': slideshowSlidesId,
         onClick: toggleForcePause
-      }, slideshowControlsProps.playButtonProps) : undefined
+      }, slideshowControlsProps.playButtonProps) : undefined,
+      paginationItemProps: function paginationItemProps(index) {
+        var _slideshowControlsPro;
+
+        return _objectSpread2({
+          'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index)
+        }, (_slideshowControlsPro = slideshowControlsProps.paginationItemProps) === null || _slideshowControlsPro === void 0 ? void 0 : _slideshowControlsPro.call(slideshowControlsProps, index));
+      }
     }))) : undefined
   }, forwardedProps), children);
 });
@@ -357,12 +415,12 @@ Slideshow.defaultProps = DEFAULT_PROPS;
 /**
  * Component display name.
  */
-var COMPONENT_NAME = 'SlideshowItem';
+var COMPONENT_NAME$1 = 'SlideshowItem';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME = getRootClassName(COMPONENT_NAME);
+var CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
 /**
  * SlideshowItem component.
  *
@@ -379,14 +437,12 @@ var SlideshowItem = forwardRef(function (props, ref) {
   return React.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME
-    })),
-    "aria-roledescription": "slide",
-    role: "group"
+      prefix: CLASSNAME$1
+    }))
   }, forwardedProps), children);
 });
-SlideshowItem.displayName = COMPONENT_NAME;
-SlideshowItem.className = CLASSNAME;
+SlideshowItem.displayName = COMPONENT_NAME$1;
+SlideshowItem.className = CLASSNAME$1;
 
 var isTouchDevice = function isTouchDevice() {
   return 'ontouchstart' in window;
@@ -406,36 +462,6 @@ function useSwipeNavigate(element, onNext, onPrevious) {
   }, [onPrevious, onNext, element]);
 }
 
-/**
- * Listen keyboard to navigate left and right.
- */
-
-function useKeyNavigate(element, onNext, onPrevious) {
-  useEffect(function () {
-    if (!element) return undefined;
-
-    var onKeyNavigate = function onKeyNavigate(evt) {
-      var callback;
-
-      if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'ArrowRight') {
-        callback = onNext;
-      } else if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'ArrowLeft') {
-        callback = onPrevious;
-      }
-
-      if (!callback) return;
-      callback();
-      evt.preventDefault();
-      evt.stopPropagation();
-    };
-
-    element.addEventListener('keydown', onKeyNavigate);
-    return function () {
-      element.removeEventListener('keydown', onKeyNavigate);
-    };
-  }, [onPrevious, onNext, element]);
-}
-
 /**
  * Calculate the currently visible pagination "bullet" range.
  */
@@ -487,12 +513,12 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$1 = 'SlideshowControls';
+var COMPONENT_NAME$2 = 'SlideshowControls';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+var CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
 /**
  * Component default props.
  */
@@ -518,23 +544,24 @@ var InternalSlideshowControls = forwardRef(function (props, ref) {
       onPreviousClick = props.onPreviousClick,
       parentRef = props.parentRef,
       previousButtonProps = props.previousButtonProps,
+      paginationProps = props.paginationProps,
       slidesCount = props.slidesCount,
       theme = props.theme,
       _props$isAutoPlaying = props.isAutoPlaying,
       isAutoPlaying = _props$isAutoPlaying === void 0 ? false : _props$isAutoPlaying,
       playButtonProps = props.playButtonProps,
       paginationItemLabel = props.paginationItemLabel,
-      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "paginationItemLabel"]);
+      paginationItemProps = props.paginationItemProps,
+      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "paginationProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "paginationItemLabel", "paginationItemProps"]);
 
   var parent;
 
   if (WINDOW) {
     // Checking window object to avoid errors in SSR.
     parent = parentRef instanceof HTMLElement ? parentRef : parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
-  } // Listen to keyboard navigate left & right.
-
+  }
 
-  useKeyNavigate(parent, onNextClick, onPreviousClick); // Listen to touch swipe navigate left & right.
+  var paginationRef = React.useRef(null); // Listen to touch swipe navigate left & right.
 
   useSwipeNavigate(parent, // Go next without loopback.
   useCallback(function () {
@@ -542,7 +569,19 @@ var InternalSlideshowControls = forwardRef(function (props, ref) {
   }, [onNextClick]), // Go previous without loopback.
   useCallback(function () {
     return onPreviousClick === null || onPreviousClick === void 0 ? void 0 : onPreviousClick(false);
-  }, [onPreviousClick])); // Pagination "bullet" range.
+  }, [onPreviousClick]));
+  /**
+   * Add roving tab index pattern to pagination items and activate slide on focus.
+   */
+
+  useRovingTabIndex({
+    parentRef: paginationRef,
+    elementSelector: 'button',
+    keepTabIndex: true,
+    onElementFocus: function onElementFocus(element) {
+      element.click();
+    }
+  }); // Pagination "bullet" range.
 
   var visibleRange = usePaginationVisibleRange(activeIndex, slidesCount); // Inline style of wrapper element.
 
@@ -553,71 +592,143 @@ var InternalSlideshowControls = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$1,
+      prefix: CLASSNAME$2,
       theme: theme
-    }), _defineProperty({}, "".concat(CLASSNAME$1, "--has-infinite-pagination"), slidesCount > PAGINATION_ITEMS_MAX))
+    }), _defineProperty({}, "".concat(CLASSNAME$2, "--has-infinite-pagination"), slidesCount > PAGINATION_ITEMS_MAX))
   }), React.createElement(IconButton, _extends({}, previousButtonProps, {
     icon: mdiChevronLeft,
-    className: "".concat(CLASSNAME$1, "__navigation"),
+    className: "".concat(CLASSNAME$2, "__navigation"),
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low,
     onClick: onPreviousClick
   })), React.createElement("div", {
-    className: "".concat(CLASSNAME$1, "__pagination")
-  }, React.createElement("div", {
-    className: "".concat(CLASSNAME$1, "__pagination-items"),
-    style: wrapperStyle
-  }, useMemo(function () {
+    ref: paginationRef,
+    className: "".concat(CLASSNAME$2, "__pagination")
+  }, React.createElement("div", _extends({
+    className: "".concat(CLASSNAME$2, "__pagination-items"),
+    style: wrapperStyle,
+    role: "tablist"
+  }, paginationProps), useMemo(function () {
     return range(slidesCount).map(function (index) {
       var isOnEdge = index !== 0 && index !== slidesCount - 1 && (index === visibleRange.min || index === visibleRange.max);
       var isActive = activeIndex === index;
       var isOutRange = index < visibleRange.min || index > visibleRange.max;
+
+      var _ref = paginationItemProps ? paginationItemProps(index) : {},
+          _ref$className = _ref.className,
+          itemClassName = _ref$className === void 0 ? undefined : _ref$className,
+          itemProps = _objectWithoutProperties(_ref, ["className"]);
+
       return React.createElement("button", _extends({
         className: classnames(handleBasicClasses({
-          prefix: "".concat(CLASSNAME$1, "__pagination-item"),
+          prefix: "".concat(CLASSNAME$2, "__pagination-item"),
           isActive: isActive,
           isOnEdge: isOnEdge,
           isOutRange: isOutRange
-        })),
+        }), itemClassName),
         key: index,
         type: "button",
+        tabIndex: isActive ? undefined : -1,
+        role: "tab",
+        "aria-selected": isActive,
         onClick: function onClick() {
           return onPaginationClick === null || onPaginationClick === void 0 ? void 0 : onPaginationClick(index);
         }
       }, {
         'aria-label': paginationItemLabel ? paginationItemLabel(index) : "".concat(index + 1, " / ").concat(slidesCount)
-      }));
+      }, itemProps));
     });
-  }, [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemLabel, onPaginationClick]))), playButtonProps ? React.createElement(IconButton, _extends({}, playButtonProps, {
+  }, [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick]))), playButtonProps ? React.createElement(IconButton, _extends({}, playButtonProps, {
     icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
-    className: "".concat(CLASSNAME$1, "__play"),
+    className: "".concat(CLASSNAME$2, "__play"),
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low
   })) : null, React.createElement(IconButton, _extends({}, nextButtonProps, {
     icon: mdiChevronRight,
-    className: "".concat(CLASSNAME$1, "__navigation"),
+    className: "".concat(CLASSNAME$2, "__navigation"),
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low,
     onClick: onNextClick
   })));
 });
-InternalSlideshowControls.displayName = COMPONENT_NAME$1;
-InternalSlideshowControls.className = CLASSNAME$1;
+InternalSlideshowControls.displayName = COMPONENT_NAME$2;
+InternalSlideshowControls.className = CLASSNAME$2;
 InternalSlideshowControls.defaultProps = DEFAULT_PROPS$1;
 var SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControls: useSlideshowControls,
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
 });
 
+/**
+ * Manage how slides must behave when visible or not.
+ * When not visible, they should be hidden from screen readers and not focusable.
+ */
+var useSlideFocusManagement = function useSlideFocusManagement(_ref) {
+  var activeIndex = _ref.activeIndex,
+      _ref$groupBy = _ref.groupBy,
+      groupBy = _ref$groupBy === void 0 ? 1 : _ref$groupBy,
+      wrapperRef = _ref.wrapperRef;
+  useEffect(function () {
+    var element = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
+    var startIndexVisible = activeIndex;
+    var endIndexVisible = startIndexVisible + 1;
+    var slideshowChildren = element === null || element === void 0 ? void 0 : element.querySelectorAll(".".concat(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.
+     * */
+
+    var elementWithBlockedFocusClass = "".concat(CLASSNAME, "__no-focus");
+    /**
+     * Display given slide to screen readers and, if focus was blocked, restore focus on elements..
+     */
+
+    var enableSlide = function enableSlide(slide) {
+      // Hide from screen readers
+      slide.setAttribute('aria-hidden', 'false'); // Find elements we have blocked focus on
+
+      slide.querySelectorAll(".".concat(elementWithBlockedFocusClass)).forEach(function (focusableElement) {
+        focusableElement.removeAttribute('tabindex');
+        focusableElement.classList.remove(elementWithBlockedFocusClass);
+      });
+    };
+    /**
+     * Hide given slide from screen readers and block focus on all focusable elements within.
+     */
+
+
+    var blockSlide = function blockSlide(slide) {
+      slide.setAttribute('aria-hidden', 'true');
+      getFocusableElements(slide).forEach(function (focusableElement) {
+        focusableElement.setAttribute('tabindex', '-1');
+        focusableElement.classList.add(elementWithBlockedFocusClass);
+      });
+    };
+
+    if (slideshowChildren && (slideshowChildren === null || slideshowChildren === void 0 ? void 0 : slideshowChildren.length) > 0) {
+      Array.from(slideshowChildren).forEach(function (slide, slideIndex) {
+        var slideIsVisible = slideIndex >= startIndexVisible && slideIndex < endIndexVisible;
+
+        if (slideIsVisible) {
+          enableSlide(slide);
+        } else {
+          blockSlide(slide);
+        }
+      });
+    }
+  }, [activeIndex, groupBy, wrapperRef]);
+};
+
 /**
  * Component display name.
  */
-var COMPONENT_NAME$2 = 'Slideshow';
+var COMPONENT_NAME$3 = 'Slideshow';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+var CLASSNAME$3 = getRootClassName(COMPONENT_NAME$3);
 /**
  * Slides component.
  *
@@ -640,34 +751,53 @@ var Slides = forwardRef(function (props, ref) {
       slidesId = props.slidesId,
       children = props.children,
       afterSlides = props.afterSlides,
-      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides"]); // Inline style of wrapper element.
+      hasControls = props.hasControls,
+      slideGroupLabel = props.slideGroupLabel,
+      forwardedProps = _objectWithoutProperties(props, ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides", "hasControls", "slideGroupLabel"]);
 
+  var wrapperRef = React.useRef(null);
+  useSlideFocusManagement({
+    wrapperRef: wrapperRef,
+    activeIndex: activeIndex,
+    groupBy: groupBy
+  }); // Inline style of wrapper element.
 
   var wrapperStyle = {
     transform: "translateX(-".concat(FULL_WIDTH_PERCENT * activeIndex, "%)")
   };
+  var groups = React.useMemo(function () {
+    return groupBy && groupBy > 1 ? chunk(Children.toArray(children), groupBy) : [children];
+  }, [children, groupBy]);
   return React.createElement("section", _extends({
     id: id,
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$2,
+      prefix: CLASSNAME$3,
       theme: theme
-    }), (_classNames = {}, _defineProperty(_classNames, "".concat(CLASSNAME$2, "--fill-height"), fillHeight), _defineProperty(_classNames, "".concat(CLASSNAME$2, "--group-by-").concat(groupBy), Boolean(groupBy)), _classNames)),
+    }), (_classNames = {}, _defineProperty(_classNames, "".concat(CLASSNAME$3, "--fill-height"), fillHeight), _defineProperty(_classNames, "".concat(CLASSNAME$3, "--group-by-").concat(groupBy), Boolean(groupBy)), _classNames)),
     "aria-roledescription": "carousel"
   }), React.createElement("div", {
     id: slidesId,
-    className: "".concat(CLASSNAME$2, "__slides"),
+    className: "".concat(CLASSNAME$3, "__slides"),
     onMouseEnter: toggleAutoPlay,
     onMouseLeave: toggleAutoPlay,
     "aria-live": isAutoPlaying ? 'off' : 'polite'
   }, React.createElement("div", {
-    className: "".concat(CLASSNAME$2, "__wrapper"),
+    ref: wrapperRef,
+    className: "".concat(CLASSNAME$3, "__wrapper"),
     style: wrapperStyle
-  }, children)), afterSlides);
+  }, groups.map(function (group, index) {
+    return React.createElement(SlideshowItemGroup, {
+      key: index,
+      id: slidesId && buildSlideShowGroupId(slidesId, index),
+      role: hasControls ? 'tabpanel' : 'group',
+      label: slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined
+    }, group);
+  }))), afterSlides);
 });
-Slides.displayName = COMPONENT_NAME$2;
-Slides.className = CLASSNAME$2;
+Slides.displayName = COMPONENT_NAME$3;
+Slides.className = CLASSNAME$3;
 
 export { Slideshow as S, SlideshowItem as a, SlideshowControls as b, Slides as c };
 //# sourceMappingURL=Slides.js.map