yet-another-react-lightbox 3.23.4 → 3.24.0

package/dist/index.d.ts

@@ -12,7 +12,10 @@ declare function cssClass(name: string): string;
 declare function cssVar(name: string): string;
 declare function composePrefix(base: string, prefix?: string): string;
 declare function makeComposePrefix(base: string): (prefix?: string) => string;
+declare function translateLabel(labels: Labels | undefined, defaultLabel: Label): string;
+/** @deprecated - use `translateLabel` instead */
 declare function label(labels: Labels | undefined, defaultLabel: Label): string;
+declare function translateSlideCounter(labels: Labels | undefined, slides: Slide[], index: number): string;
 declare function cleanup(...cleaners: (() => void)[]): () => void;
 declare function makeUseContext<T>(name: string, contextName: string, context: React.Context<T | null>): () => NonNullable<T>;
 declare function hasWindow(): boolean;
@@ -111,6 +114,19 @@ declare function useSensors<T extends Element>(): UseSensors<T>;
 
 declare function useThrottle(callback: (...args: unknown[]) => void, delay: number): (...args: unknown[]) => void;
 
+type A11yContextType = {
+    focusWithin: boolean;
+    trackFocusWithin: (onFocus?: React.FocusEventHandler, onBlur?: React.FocusEventHandler) => {
+        onFocus: React.FocusEventHandler;
+        onBlur: React.FocusEventHandler;
+    };
+    autoPlaying: boolean;
+    setAutoPlaying: (value: boolean) => void;
+};
+declare const A11yContext: React.Context<A11yContextType | null>;
+declare const useA11yContext: () => A11yContextType;
+declare function A11yContextProvider({ children }: React.PropsWithChildren): React.JSX.Element;
+
 type DocumentContextType = {
     getOwnerDocument: (node?: Node | null) => Document;
     getOwnerWindow: (node?: Node | null) => Window;
@@ -215,7 +231,7 @@ declare function ImageSlide({ slide: image, offset, render, rect, imageFit, imag
 
 declare const LightboxRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-declare function Carousel({ carousel }: ComponentProps): React.JSX.Element;
+declare function Carousel({ carousel, labels }: ComponentProps): React.JSX.Element;
 declare const CarouselModule: Module;
 
 declare enum SwipeState {
@@ -275,7 +291,7 @@ declare function useNavigationState(): {
 declare function NoScroll({ noScroll: { disabled }, children }: ComponentProps): React.JSX.Element;
 declare const NoScrollModule: Module;
 
-declare function Portal({ children, animation, styles, className, on, portal, close }: ComponentProps): React.ReactPortal | null;
+declare function Portal({ children, animation, styles, className, on, portal, close, labels }: ComponentProps): React.ReactPortal | null;
 declare const PortalModule: Module;
 
 declare function Root({ children }: ComponentProps): React.JSX.Element;
@@ -284,5 +300,5 @@ declare const RootModule: Module;
 declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose }, styles }: ComponentProps): React.JSX.Element;
 declare const ToolbarModule: Module;
 
-export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, ContainerRect, Controller, ControllerContext, ControllerModule, ControllerRef, ControllerSettings, DocumentContext, DocumentContextProvider, ErrorIcon, EventTypes, EventsContext, EventsProvider, IconButton, ImageSlide, Label, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxState, LightboxStateContext, LightboxStateProvider, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node$1 as Node, Plugin, Portal, PortalModule, PreviousIcon, Render, RenderFunction, Root, RootModule, Slide, SlideImage, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
-export type { ComputeAnimation, ControllerContextType, DocumentContextProviderProps, DocumentContextType, Event, EventCallback, EventsContextType, IconButtonProps, ImageSlideProps, KeyboardEventType, LightboxDispatchContextType, LightboxPropsContextType, LightboxStateAction, LightboxStateContextType, LightboxStateProviderProps, NavigationButtonProps, PointerEventType, Publish, ReactEventType, RegisterSensors, SensorCallback, Subscribe, SubscribeSensors, SupportedEventType, TimeoutsContextType, Topic, Unsubscribe, UseSensors, WheelEventType };
+export { A11yContext, A11yContextProvider, Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, ContainerRect, Controller, ControllerContext, ControllerModule, ControllerRef, ControllerSettings, DocumentContext, DocumentContextProvider, ErrorIcon, EventTypes, EventsContext, EventsProvider, IconButton, ImageSlide, Label, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxState, LightboxStateContext, LightboxStateProvider, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node$1 as Node, Plugin, Portal, PortalModule, PreviousIcon, Render, RenderFunction, Root, RootModule, Slide, SlideImage, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, translateLabel, translateSlideCounter, useA11yContext, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export type { A11yContextType, ComputeAnimation, ControllerContextType, DocumentContextProviderProps, DocumentContextType, Event, EventCallback, EventsContextType, IconButtonProps, ImageSlideProps, KeyboardEventType, LightboxDispatchContextType, LightboxPropsContextType, LightboxStateAction, LightboxStateContextType, LightboxStateProviderProps, NavigationButtonProps, PointerEventType, Publish, ReactEventType, RegisterSensors, SensorCallback, Subscribe, SubscribeSensors, SupportedEventType, TimeoutsContextType, Topic, Unsubscribe, UseSensors, WheelEventType };

package/dist/index.js

@@ -20,10 +20,18 @@ function composePrefix(base, prefix) {
 function makeComposePrefix(base) {
     return (prefix) => composePrefix(base, prefix);
 }
-function label(labels, defaultLabel) {
+function translateLabel(labels, defaultLabel) {
     var _a;
     return (_a = labels === null || labels === void 0 ? void 0 : labels[defaultLabel]) !== null && _a !== void 0 ? _a : defaultLabel;
 }
+function label(labels, defaultLabel) {
+    return translateLabel(labels, defaultLabel);
+}
+function translateSlideCounter(labels, slides, index) {
+    return translateLabel(labels, "{index} of {total}")
+        .replace(/\{index}/g, `${getSlideIndex(index, slides.length) + 1}`)
+        .replace(/\{total}/g, `${slides.length}`);
+}
 function cleanup(...cleaners) {
     return () => {
         cleaners.forEach((cleaner) => {
@@ -263,6 +271,30 @@ function withPlugins(root, plugins = [], augmentations = []) {
     };
 }
 
+const A11yContext = React.createContext(null);
+const useA11yContext = makeUseContext("useA11yContext", "A11yContext", A11yContext);
+function A11yContextProvider({ children }) {
+    const [focusWithin, setFocusWithin] = React.useState(false);
+    const [autoPlaying, setAutoPlaying] = React.useState(false);
+    const context = React.useMemo(() => {
+        const trackFocusWithin = (onFocus, onBlur) => {
+            const trackAndDelegate = (focusWithinValue) => (event) => {
+                var _a;
+                if (!event.currentTarget.contains(event.relatedTarget)) {
+                    setFocusWithin(focusWithinValue);
+                }
+                (_a = (focusWithinValue ? onFocus : onBlur)) === null || _a === void 0 ? void 0 : _a(event);
+            };
+            return {
+                onFocus: trackAndDelegate(true),
+                onBlur: trackAndDelegate(false),
+            };
+        };
+        return { focusWithin, trackFocusWithin, autoPlaying, setAutoPlaying };
+    }, [focusWithin, autoPlaying]);
+    return React.createElement(A11yContext.Provider, { value: context }, children);
+}
+
 const DocumentContext = React.createContext(null);
 const useDocumentContext = makeUseContext("useDocument", "DocumentContext", DocumentContext);
 function DocumentContextProvider({ nodeRef, children }) {
@@ -389,9 +421,9 @@ function TimeoutsProvider({ children }) {
     return React.createElement(TimeoutsContext.Provider, { value: context }, children);
 }
 
-const IconButton = React.forwardRef(function IconButton({ label: label$1, className, icon: Icon, renderIcon, onClick, style, ...rest }, ref) {
+const IconButton = React.forwardRef(function IconButton({ label, className, icon: Icon, renderIcon, onClick, style, ...rest }, ref) {
     const { styles, labels } = useLightboxProps();
-    const buttonLabel = label(labels, label$1);
+    const buttonLabel = translateLabel(labels, label);
     return (React.createElement("button", { ref: ref, type: "button", title: buttonLabel, "aria-label": buttonLabel, className: clsx(cssClass(ELEMENT_BUTTON), className), onClick: onClick, style: { ...style, ...styles.button }, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass(ELEMENT_ICON), style: styles.icon })));
 });
 
@@ -634,7 +666,7 @@ function useThrottle(callback, delay) {
 const slidePrefix = makeComposePrefix("slide");
 const slideImagePrefix = makeComposePrefix("slide_image");
 function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps, onClick, onLoad, onError, style, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const { publish } = useEvents();
     const { setTimeout } = useTimeouts();
@@ -688,7 +720,7 @@ function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps,
     const sizes = srcSet && rect && hasWindow() ? `${Math.round(Math.min(estimateActualWidth(), rect.width))}px` : undefined;
     const { style: imagePropsStyle, className: imagePropsClassName, ...restImageProps } = imageProps || {};
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: handleOnLoad, onError: handleOnError, onClick: onClick, draggable: false, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading")), imagePropsClassName), style: { ...defaultStyle, ...style, ...imagePropsStyle }, ...restImageProps, alt: image.alt, sizes: sizes, srcSet: srcSet, src: image.src }),
+        React.createElement("img", { ref: setImageRef, onLoad: handleOnLoad, onError: handleOnError, onClick: onClick, draggable: false, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading")), imagePropsClassName), style: { ...defaultStyle, ...style, ...imagePropsStyle }, ...restImageProps, alt: (_h = image.alt) !== null && _h !== void 0 ? _h : "", sizes: sizes, srcSet: srcSet, src: image.src }),
         status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass(slidePrefix(SLIDE_STATUS_PLACEHOLDER)) },
             status === SLIDE_STATUS_LOADING &&
                 ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_LOADING))) }))),
@@ -696,10 +728,11 @@ function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps,
                 ((render === null || render === void 0 ? void 0 : render.iconError) ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_ERROR))) })))))));
 }
 
-const LightboxRoot = React.forwardRef(function LightboxRoot({ className, children, ...rest }, ref) {
+const LightboxRoot = React.forwardRef(function LightboxRoot({ className, children, onFocus, onBlur, ...rest }, ref) {
     const nodeRef = React.useRef(null);
+    const { trackFocusWithin } = useA11yContext();
     return (React.createElement(DocumentContextProvider, { nodeRef: nodeRef },
-        React.createElement("div", { ref: useForkRef(ref, nodeRef), className: clsx(cssClass("root"), className), ...rest }, children)));
+        React.createElement("div", { ref: useForkRef(ref, nodeRef), className: clsx(cssClass("root"), className), ...trackFocusWithin(onFocus, onBlur), ...rest }, children)));
 });
 
 var SwipeState;
@@ -1224,7 +1257,7 @@ function Controller({ children, ...props }) {
                 : null),
             ...(controller.touchAction !== "none" ? { [cssVar("controller_touch_action")]: controller.touchAction } : null),
             ...styles.container,
-        }, ...(controller.aria ? { role: "region", "aria-live": "polite", "aria-roledescription": "carousel" } : null), tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context },
+        }, tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context },
         children, (_a = render.controls) === null || _a === void 0 ? void 0 :
         _a.call(render)))));
 }
@@ -1238,9 +1271,9 @@ function cssSlidePrefix(value) {
 }
 function CarouselSlide({ slide, offset }) {
     const containerRef = React.useRef(null);
-    const { currentIndex } = useLightboxState();
+    const { currentIndex, slides } = useLightboxState();
     const { slideRect, focus } = useController();
-    const { render, carousel: { imageFit, imageProps }, on: { click: onClick }, styles: { slide: style }, } = useLightboxProps();
+    const { render, carousel: { imageFit, imageProps }, on: { click: onClick }, styles: { slide: style }, labels, } = useLightboxProps();
     const { getOwnerDocument } = useDocumentContext();
     const offscreen = offset !== 0;
     React.useEffect(() => {
@@ -1260,15 +1293,16 @@ function CarouselSlide({ slide, offset }) {
             ((_c = render.slideContainer) !== null && _c !== void 0 ? _c : (({ children }) => children))({ slide, children: rendered }), (_d = render.slideFooter) === null || _d === void 0 ? void 0 :
             _d.call(render, { slide }))) : null;
     };
-    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssSlidePrefix()), !offscreen && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), ...makeInertWhen(offscreen), style: style, role: "region", "aria-roledescription": "slide" }, renderSlide()));
+    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssSlidePrefix()), !offscreen && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), ...makeInertWhen(offscreen), style: style, role: "group", "aria-roledescription": translateLabel(labels, "Slide"), "aria-label": translateSlideCounter(labels, slides, currentIndex + offset) }, renderSlide()));
 }
 function Placeholder() {
     const style = useLightboxProps().styles.slide;
     return React.createElement("div", { className: cssClass(CLASS_SLIDE), style: style });
 }
-function Carousel({ carousel }) {
+function Carousel({ carousel, labels }) {
     const { slides, currentIndex, globalIndex } = useLightboxState();
     const { setCarouselRef } = useController();
+    const { autoPlaying, focusWithin } = useA11yContext();
     const spacingValue = parseLengthPercentage(carousel.spacing);
     const paddingValue = parseLengthPercentage(carousel.padding);
     const preload = calculatePreload(carousel, slides, 1);
@@ -1293,7 +1327,7 @@ function Carousel({ carousel }) {
             [`${cssVar(cssPrefix$2("spacing_percent"))}`]: spacingValue.percent || 0,
             [`${cssVar(cssPrefix$2("padding_px"))}`]: paddingValue.pixel || 0,
             [`${cssVar(cssPrefix$2("padding_percent"))}`]: paddingValue.percent || 0,
-        } }, items.map(({ key, slide, offset }) => slide ? React.createElement(CarouselSlide, { key: key, slide: slide, offset: offset }) : React.createElement(Placeholder, { key: key }))));
+        }, role: "region", "aria-live": autoPlaying && !focusWithin ? "off" : "polite", "aria-roledescription": translateLabel(labels, "Carousel"), "aria-label": translateLabel(labels, "Photo gallery") }, items.map(({ key, slide, offset }) => slide ? React.createElement(CarouselSlide, { key: key, slide: slide, offset: offset }) : React.createElement(Placeholder, { key: key }))));
 }
 const CarouselModule = createModule(MODULE_CAROUSEL, Carousel);
 
@@ -1413,7 +1447,7 @@ function setAttribute(element, attribute, value) {
         }
     };
 }
-function Portal({ children, animation, styles, className, on, portal, close }) {
+function Portal({ children, animation, styles, className, on, portal, close, labels }) {
     const [mounted, setMounted] = React.useState(false);
     const [visible, setVisible] = React.useState(false);
     const cleanup = React.useRef([]);
@@ -1476,7 +1510,7 @@ function Portal({ children, animation, styles, className, on, portal, close }) {
         }
     }, [handleEnter, handleCleanup]);
     return mounted
-        ? createPortal(React.createElement(LightboxRoot, { ref: handleRef, className: clsx(className, cssClass(cssPrefix$1()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix$1("open"))), "aria-modal": true, role: "dialog", "aria-live": "polite", "aria-roledescription": "lightbox", style: {
+        ? createPortal(React.createElement(LightboxRoot, { ref: handleRef, className: clsx(className, cssClass(cssPrefix$1()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix$1("open"))), "aria-modal": true, role: "dialog", "aria-label": translateLabel(labels, "Lightbox"), style: {
                 ...(animation.fade !== LightboxDefaultProps.animation.fade
                     ? { [cssVar("fade_animation_duration")]: `${animationDuration}ms` }
                     : null),
@@ -1558,7 +1592,8 @@ function Lightbox({ carousel, animation, render, toolbar, controller, noScroll,
     return (React.createElement(LightboxPropsProvider, { ...props },
         React.createElement(LightboxStateProvider, { slides: slides || defaultSlides, index: parseInt(index || defaultIndex) },
             React.createElement(TimeoutsProvider, null,
-                React.createElement(EventsProvider, null, renderNode(createNode(RootModule, config), props))))));
+                React.createElement(EventsProvider, null,
+                    React.createElement(A11yContextProvider, null, renderNode(createNode(RootModule, config), props)))))));
 }
 
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, DocumentContext, DocumentContextProvider, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerEvents, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export { A11yContext, A11yContextProvider, ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, DocumentContext, DocumentContextProvider, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, translateLabel, translateSlideCounter, useA11yContext, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerEvents, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

package/dist/plugins/captions/index.d.ts

@@ -48,7 +48,11 @@ declare module "yet-another-react-lightbox" {
         buttonCaptions?: RenderFunction<CaptionsRef>;
     }
     interface Labels {
+        /** Slide description ARIA role description */
+        Caption?: string;
+        /** `Show captions` button title */
         "Show captions"?: string;
+        /** `Hide captions` button title */
         "Hide captions"?: string;
     }
     /** Captions plugin ref */

package/dist/plugins/captions/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { cssClass, useLightboxProps, makeUseContext, useController, clsx, cssVar, createIcon, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { cssClass, useLightboxProps, makeUseContext, useController, clsx, cssVar, translateLabel, createIcon, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import { PLUGIN_CAPTIONS } from '../../types.js';
 
 const cssPrefix = (className) => cssClass(`slide_${className}`);
@@ -39,7 +39,7 @@ function Title({ title }) {
     const { visible } = useCaptions();
     if (!visible)
         return null;
-    return (React.createElement("div", { style: styles.captionsTitleContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
+    return (React.createElement("div", { role: "heading", "aria-level": 2, style: styles.captionsTitleContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
         React.createElement("div", { className: cssPrefix("title"), style: {
                 ...(toolbarWidth ? { [cssVar("toolbar_width")]: `${toolbarWidth}px` } : null),
                 ...styles.captionsTitle,
@@ -48,7 +48,7 @@ function Title({ title }) {
 
 function Description({ description }) {
     const { descriptionTextAlign, descriptionMaxLines } = useCaptionsProps();
-    const { styles } = useLightboxProps();
+    const { styles, labels } = useLightboxProps();
     const { visible } = useCaptions();
     if (!visible)
         return null;
@@ -62,7 +62,7 @@ function Description({ description }) {
                     }
                     : null),
                 ...styles.captionsDescription,
-            } }, typeof description === "string"
+            }, role: "paragraph", "aria-roledescription": translateLabel(labels, "Caption") }, typeof description === "string"
             ? description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line])
             : description)));
 }

package/dist/plugins/counter/index.js

@@ -16,7 +16,7 @@ function CounterComponent({ counter }) {
     const { separator, container: { className, ...rest }, className: legacyClassName, ...legacyRest } = resolveCounterProps(counter);
     if (slides.length === 0)
         return null;
-    return (React.createElement("div", { className: clsx(cssClass("counter"), className || legacyClassName), ...legacyRest, ...rest },
+    return (React.createElement("div", { className: clsx(cssClass("counter"), className || legacyClassName), ...legacyRest, ...rest, "aria-hidden": true },
         currentIndex + 1,
         " ",
         separator,

package/dist/plugins/download/index.d.ts

@@ -30,6 +30,7 @@ declare module "yet-another-react-lightbox" {
         iconDownload?: RenderFunction;
     }
     interface Labels {
+        /** `Download` button title */
         Download?: string;
     }
     interface Callbacks {

package/dist/plugins/fullscreen/index.d.ts

@@ -23,7 +23,9 @@ declare module "yet-another-react-lightbox" {
         iconExitFullscreen?: RenderFunction;
     }
     interface Labels {
+        /** `Enter Fullscreen` button title */
         "Enter Fullscreen"?: string;
+        /** `Exit Fullscreen` button title */
         "Exit Fullscreen"?: string;
     }
     interface Callbacks {

package/dist/plugins/share/index.d.ts

@@ -30,6 +30,7 @@ declare module "yet-another-react-lightbox" {
         iconShare?: RenderFunction;
     }
     interface Labels {
+        /** `Share` button title */
         Share?: string;
     }
     interface Callbacks {

package/dist/plugins/slideshow/index.d.ts

@@ -25,7 +25,9 @@ declare module "yet-another-react-lightbox" {
         buttonSlideshow?: RenderFunction<SlideshowRef>;
     }
     interface Labels {
+        /** `Play` button title */
         Play?: string;
+        /** `Pause` button title */
         Pause?: string;
     }
     interface Callbacks {

package/dist/plugins/slideshow/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeUseContext, useLightboxState, useTimeouts, useEvents, useController, useEventCallback, cleanup, createIcon, useLightboxProps, useLoseFocus, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { makeUseContext, useLightboxState, useTimeouts, useEvents, useController, useA11yContext, useEventCallback, cleanup, createIcon, useLightboxProps, useLoseFocus, IconButton, addToolbarButton, createModule } from '../../index.js';
 import { SLIDE_STATUS_LOADING, SLIDE_STATUS_PLAYING, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, ACTIVE_SLIDE_ERROR, SLIDE_STATUS_ERROR, ACTIVE_SLIDE_COMPLETE, SLIDE_STATUS_COMPLETE, PLUGIN_SLIDESHOW } from '../../types.js';
 
 const defaultSlideshowProps = {
@@ -24,6 +24,8 @@ function SlideshowContextProvider({ slideshow, carousel: { finite }, on, childre
     const { setTimeout, clearTimeout } = useTimeouts();
     const { subscribe } = useEvents();
     const { next } = useController();
+    const { setAutoPlaying } = useA11yContext();
+    React.useEffect(() => setAutoPlaying(playing), [playing, setAutoPlaying]);
     const disabled = slides.length === 0 || (finite && currentIndex === slides.length - 1);
     const play = React.useCallback(() => {
         if (!playing && !disabled) {

package/dist/plugins/thumbnails/index.d.ts

@@ -53,7 +53,11 @@ declare module "yet-another-react-lightbox" {
         buttonThumbnails?: RenderFunction<ThumbnailsRef>;
     }
     interface Labels {
+        /** Thumbnails ARIA label */
+        Thumbnails?: string;
+        /** `Show thumbnails` button title */
         "Show thumbnails"?: string;
+        /** `Hide thumbnails` button title */
         "Hide thumbnails"?: string;
     }
     /** `render.thumbnail` render function props */

package/dist/plugins/thumbnails/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLightboxProps, composePrefix, createIcon, ImageSlide, isImageSlide, cssClass, makeComposePrefix, useDocumentContext, useEventCallback, cssVar, clsx, getSlideKey, useRTL, useEvents, useLightboxState, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { useLightboxProps, composePrefix, createIcon, ImageSlide, isImageSlide, cssClass, makeComposePrefix, useLightboxState, useDocumentContext, useEventCallback, translateSlideCounter, cssVar, clsx, getSlideKey, useRTL, useEvents, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, translateLabel, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
 
 const defaultThumbnailsProps = {
@@ -57,12 +57,14 @@ const fadeOutPrefix = makeComposePrefix("fadeout");
 const placeholderPrefix = makeComposePrefix("placeholder");
 const DELAY = "delay";
 const DURATION = "duration";
-function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder, onLoseFocus }) {
+function Thumbnail({ slide, index, onClick, fadeIn, fadeOut, placeholder, onLoseFocus }) {
     const ref = React.useRef(null);
-    const { render, styles } = useLightboxProps();
+    const { render, styles, labels } = useLightboxProps();
+    const { slides, globalIndex } = useLightboxState();
     const { getOwnerDocument } = useDocumentContext();
     const { width, height, imageFit } = useThumbnailsProps();
     const rect = { width, height };
+    const active = index === globalIndex;
     const onLoseFocusCallback = useEventCallback(onLoseFocus);
     React.useEffect(() => {
         if (fadeOut && getOwnerDocument().activeElement === ref.current) {
@@ -83,7 +85,7 @@ function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder, onLos
                 }
                 : null),
             ...styles.thumbnail,
-        }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
+        }, onClick: onClick, "aria-current": active ? true : undefined, "aria-label": translateSlideCounter(labels, slides, index) }, slide && renderThumbnail({ slide, render, rect, imageFit })));
 }
 
 function isHorizontal(position) {
@@ -103,7 +105,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
     const track = React.useRef(null);
     const isRTL = useRTL();
     const { publish, subscribe } = useEvents();
-    const { carousel, styles } = useLightboxProps();
+    const { carousel, styles, labels } = useLightboxProps();
     const { slides, globalIndex, animation } = useLightboxState();
     const { registerSensors, subscribeSensors } = useSensors();
     useKeyboardNavigation(subscribeSensors);
@@ -180,7 +182,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
             ...(gap !== defaultThumbnailsProps.gap ? { [cssVar(cssThumbnailPrefix("gap"))]: `${gap}px` } : null),
             ...styles.thumbnailsContainer,
         } },
-        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)), tabIndex: -1, ...registerSensors }, items.map(({ key, index, slide }) => {
+        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)), "aria-label": translateLabel(labels, "Thumbnails"), tabIndex: -1, ...registerSensors }, items.map(({ key, index, slide }) => {
             const fadeAnimationDuration = animationDuration / Math.abs(offset || 1);
             const fadeIn = (offset > 0 && index > globalIndex + preload - offset && index <= globalIndex + preload) ||
                 (offset < 0 && index < globalIndex - preload - offset && index >= globalIndex - preload)
@@ -199,7 +201,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
                         : -offset - (index - (globalIndex + preload))) * fadeAnimationDuration,
                 }
                 : undefined;
-            return (React.createElement(Thumbnail, { key: key, slide: slide, active: index === globalIndex, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: !slide, onClick: handleClick(index), onLoseFocus: () => { var _a; return (_a = track.current) === null || _a === void 0 ? void 0 : _a.focus(); } }));
+            return (React.createElement(Thumbnail, { key: key, index: index, slide: slide, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: !slide, onClick: handleClick(index), onLoseFocus: () => { var _a; return (_a = track.current) === null || _a === void 0 ? void 0 : _a.focus(); } }));
         })),
         vignette && React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));
 }

package/dist/plugins/zoom/index.d.ts

@@ -43,7 +43,9 @@ declare module "yet-another-react-lightbox" {
         iconZoomOut?: RenderFunction;
     }
     interface Labels {
+        /** `Zoom in` button title */
         "Zoom in"?: string;
+        /** `Zoom out` button title */
         "Zoom out"?: string;
     }
     interface RenderSlideProps {

package/dist/types.d.ts

@@ -229,7 +229,7 @@ interface ControllerSettings {
     focus: boolean;
     /** @deprecated for internal use only */
     touchAction: "none" | "pan-y";
-    /** if `true`, set ARIA attributes on the controller div */
+    /** @deprecated for internal use only */
     aria: boolean;
     /** if `true`, close the lightbox on pull-up gesture */
     closeOnPullUp: boolean;
@@ -378,11 +378,30 @@ interface Callbacks {
     /** a callback called when the portal closes */
     exited?: Callback;
 }
-/** Custom UI labels / translations */
+/** Custom UI labels / translations / localization */
 interface Labels {
+    /** `Previous` button title */
     Previous?: string;
+    /** `Next` button title */
     Next?: string;
+    /** `Close` button title */
     Close?: string;
+    /** Slide ARIA role description */
+    Slide?: string;
+    /** Carousel ARIA role description */
+    Carousel?: string;
+    /** Lightbox ARIA label */
+    Lightbox?: string;
+    /** Carousel ARIA label */
+    "Photo gallery"?: string;
+    /**
+     * Slide ARIA label
+     *
+     * The value is a template string supporting the following placeholders:
+     * - {index} - current slide index
+     * - {total} - total number of slides
+     */
+    "{index} of {total}"?: string;
 }
 type Label = keyof Labels;
 /** Toolbar settings */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.23.4",
+  "version": "3.24.0",
   "description": "Modern React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",