@lumx/react 4.22.1-alpha.0 → 4.22.1-next.1

package/index.d.ts

@@ -3362,6 +3362,7 @@ declare function useImageLightbox<P extends Partial<ImageLightboxProps>>(props:
     getTriggerProps: (options?: TriggerOptions) => {
         onClick: (ev?: React__default.MouseEvent) => void;
         ref: React__default.Ref<any>;
+        'aria-haspopup': 'dialog';
     };
     /** Props to forward to the ImageLightbox */
     imageLightboxProps: ManagedProps & P;
@@ -4909,7 +4910,7 @@ type SlideMode = ValueOf$1<typeof SlideMode>;
 /**
  * Defines the props of the component.
  */
-interface SlideshowProps extends GenericProps$1, Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {
+interface SlideshowProps extends GenericProps$1, Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel' | 'slideGroupRoleDescription'> {
     /** Whether to use CSS transform translate or native scroll snap. */
     slideMode?: SlideMode;
     /** current slide active */
@@ -5084,6 +5085,11 @@ interface SlidesProps extends GenericProps$1, HasTheme$1 {
      * Receives the group position starting from 1 and the total number of groups.
      * */
     slideGroupLabel?: (groupPosition: number, groupTotal: number) => string;
+    /**
+     * Accessible role description to set on every slide group (`aria-roledescription`).
+     * Applies identically to every group.
+     * */
+    slideGroupRoleDescription?: string;
     /** Whether to use CSS transform translate or native scroll snap. */
     slideMode?: SlideMode;
     /** On slide change (only triggered on scroll when slideMode=scroll-snap) */

package/index.js

@@ -2760,37 +2760,20 @@ const useOverflowTooltipLabel = content => {
  */
 const isComponentType = type => node => /*#__PURE__*/React__default.isValidElement(node) && node.type === type;
 
-/**
- * Recursively wrap icons with spaces.
- *
- * `isFirst`/`isLast` tell whether the given children are at the very start/end of the whole
- * children tree, so that an icon on an edge is detected even when nested in a fragment or element.
- */
-function wrap(children, isFirst, isLast) {
+/** Force wrap spaces around icons to make sure they are never stuck against text. */
+function wrapChildrenIconWithSpaces(children) {
   if (children === null || children === undefined) return undefined;
-  const childArray = Children.toArray(children);
-  return childArray.flatMap((child, index) => {
-    const childIsFirst = isFirst && index === 0;
-    const childIsLast = isLast && index === childArray.length - 1;
+  return Children.toArray(children).flatMap(child => {
     if (isComponentType(Icon)(child)) {
-      // No space on the edges of the text: the icon is not stuck against anything there.
-      return [...(childIsFirst ? [] : [' ']), child, ...(childIsLast ? [] : [' '])];
+      return [' ', child, ' '];
     }
     if (/*#__PURE__*/React__default.isValidElement(child) && child.props && typeof child.props === 'object' && 'children' in child.props) {
-      return /*#__PURE__*/React__default.cloneElement(child, undefined, wrap(child.props.children, childIsFirst, childIsLast));
+      return /*#__PURE__*/React__default.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));
     }
     return child;
   });
 }
 
-/**
- * Force wrap spaces around icons to make sure they are never stuck against text.
- * Icons at the very start or end of the text are not padded on that side.
- */
-function wrapChildrenIconWithSpaces(children) {
-  return wrap(children, true, true);
-}
-
 /**
  * Defines the props of the component.
  */
@@ -14591,7 +14574,8 @@ function useImageLightbox(props) {
       },
       onClick(e) {
         open(e?.target, options);
-      }
+      },
+      'aria-haspopup': 'dialog'
     }));
   }, []);
   return {
@@ -20203,6 +20187,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
     role = 'group',
     label,
     isDisplayed,
+    'aria-roledescription': ariaRoleDescription,
     ...forwardedProps
   } = props;
   const groupRef = React__default.useRef(null);
@@ -20214,7 +20199,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
     ref: mergeRefs(groupRef, ref),
     role: role,
     className: classNames.join(className, CLASSNAME$g),
-    "aria-roledescription": "slide",
+    "aria-roledescription": ariaRoleDescription ?? 'slide',
     "aria-label": label,
     ...forwardedProps,
     children: children
@@ -20254,6 +20239,7 @@ const Slideshow = forwardRef((props, ref) => {
     id,
     slidesId,
     slideGroupLabel,
+    slideGroupRoleDescription,
     slideMode = DEFAULT_PROPS$h.slideMode,
     ...forwardedProps
   } = props;
@@ -20310,6 +20296,7 @@ const Slideshow = forwardRef((props, ref) => {
     ref: mergeRefs(ref, setSlideshow),
     hasControls: showControls,
     slideGroupLabel: slideGroupLabel,
+    slideGroupRoleDescription: slideGroupRoleDescription,
     afterSlides: slideshowControlsProps && slidesCount > 1 ? /*#__PURE__*/jsx("div", {
       className: `${Slides.className}__controls`,
       children: /*#__PURE__*/jsx(SlideshowControls, {
@@ -20742,8 +20729,10 @@ const Slides = forwardRef((props, ref) => {
     afterSlides,
     hasControls,
     slideGroupLabel,
+    slideGroupRoleDescription,
     slideMode = DEFAULT_PROPS$f.slideMode,
     onChange,
+    'aria-roledescription': ariaRoleDescription,
     ...forwardedProps
   } = props;
   const wrapperRef = React__default.useRef(null);
@@ -20785,7 +20774,7 @@ const Slides = forwardRef((props, ref) => {
       'fill-height': fillHeight,
       [`group-by-${groupBy}`]: Boolean(groupBy)
     })),
-    "aria-roledescription": "carousel",
+    "aria-roledescription": ariaRoleDescription ?? 'carousel',
     children: [/*#__PURE__*/jsx("div", {
       id: slidesId,
       className: element$6('slides'),
@@ -20802,6 +20791,7 @@ const Slides = forwardRef((props, ref) => {
           id: slidesId && buildSlideShowGroupId(slidesId, index),
           role: hasControls ? 'tabpanel' : 'group',
           label: slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined,
+          "aria-roledescription": slideGroupRoleDescription,
           isDisplayed: index >= startIndexVisible && index < endIndexVisible,
           children: group
         }, index))