@gravity-ui/page-constructor 5.27.0 → 5.27.1

package/build/cjs/blocks/Slider/Slider.css

@@ -105,7 +105,7 @@ unpredictable css rules order in build */
   height: auto;
 }
 .pc-SliderBlock .slick-track .slick-slide > div {
-  height: 100%;
+  display: flex;
 }
 .pc-SliderBlock .slick-arrow {
   position: absolute;

package/build/cjs/blocks/Slider/Slider.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SliderBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const get_1 = tslib_1.__importDefault(require("lodash/get"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
@@ -19,6 +20,7 @@ const useFocus_1 = tslib_1.__importDefault(require("../../hooks/useFocus"));
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const Arrow_1 = tslib_1.__importDefault(require("./Arrow/Arrow"));
+const i18n_1 = require("./i18n");
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('SliderBlock');
 const slick = (0, utils_1.block)('slick-origin');
@@ -26,12 +28,15 @@ const DOT_WIDTH = 8;
 const DOT_GAP = 16;
 const SliderBlock = (props) => {
     var _a;
-    const { animated, title, description, type, anchorId, arrows = true, adaptive, autoplay = undefined, dots = true, dotsClassName, disclaimer, children, className, blockClassName, lazyLoad, arrowSize, onAfterChange: handleAfterChange, onBeforeChange: handleBeforeChange, } = props;
+    const { animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplaySpeed, dots = true, dotsClassName, disclaimer, children, className, blockClassName, lazyLoad, arrowSize, onAfterChange: handleAfterChange, onBeforeChange: handleBeforeChange, } = props;
     const { isServer } = (0, react_1.useContext)(ssrContext_1.SSRContext);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const [breakpoint, setBreakpoint] = (0, react_1.useState)(constants_1.BREAKPOINTS.xl);
-    const disclosedChildren = (0, react_1.useMemo)(() => discloseAllNestedChildren(children), [children]);
+    const sliderId = (0, uikit_1.useUniqId)();
+    const disclosedChildren = (0, react_1.useMemo)(() => discloseAllNestedChildren(children, sliderId), [children, sliderId]);
     const childrenCount = disclosedChildren.length;
+    const isAutoplayEnabled = autoplaySpeed !== undefined && autoplaySpeed > 0;
+    const isUserInteractionRef = (0, react_1.useRef)(false);
     const [slidesToShow] = (0, react_1.useState)((0, utils_2.getSlidesToShowWithDefaults)({
         contentLength: childrenCount,
         breakpoints: props.slidesToShow,
@@ -42,8 +47,13 @@ const SliderBlock = (props) => {
     const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
     const [childStyles, setChildStyles] = (0, react_1.useState)({});
     const [slider, setSlider] = (0, react_1.useState)();
+    const prevIndexRef = (0, react_1.useRef)(0);
     const autoplayTimeId = (0, react_1.useRef)();
     const { hasFocus, unsetFocus } = (0, useFocus_1.default)((_a = slider === null || slider === void 0 ? void 0 : slider.innerSlider) === null || _a === void 0 ? void 0 : _a.list);
+    const asUserInteraction = (fn) => (...args) => {
+        isUserInteractionRef.current = true;
+        return fn(...args);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const onResize = (0, react_1.useCallback)((0, debounce_1.default)(() => {
         if (!slider) {
@@ -58,7 +68,7 @@ const SliderBlock = (props) => {
     }, 100), [slider, breakpoint]);
     const scrollLastSlide = (0, react_1.useCallback)((current) => {
         const lastSlide = childrenCount - slidesToShowCount;
-        if (autoplay && lastSlide === current) {
+        if (isAutoplayEnabled && lastSlide === current) {
             // Slick doesn't support autoplay with no infinity scroll
             autoplayTimeId.current = setTimeout(() => {
                 if (slider) {
@@ -70,9 +80,9 @@ const SliderBlock = (props) => {
                         slider.slickPlay();
                     }
                 }, 500);
-            }, autoplay);
+            }, autoplaySpeed);
         }
-    }, [autoplay, childrenCount, slider, slidesToShowCount]);
+    }, [autoplaySpeed, childrenCount, isAutoplayEnabled, slider, slidesToShowCount]);
     (0, react_1.useEffect)(() => {
         if (hasFocus && autoplayTimeId.current) {
             clearTimeout(autoplayTimeId.current);
@@ -86,7 +96,7 @@ const SliderBlock = (props) => {
         window.addEventListener('resize', onResize, { passive: true });
         return () => window.removeEventListener('resize', onResize);
     }, [onResize]);
-    const handleArrowClick = (0, react_1.useCallback)((direction) => {
+    const handleArrowClick = (direction) => {
         let nextIndex;
         if (direction === 'right') {
             nextIndex =
@@ -99,11 +109,12 @@ const SliderBlock = (props) => {
         if (slider) {
             slider.slickGoTo(nextIndex);
         }
-    }, [childrenCount, currentIndex, slider, slidesCountByBreakpoint]);
+    };
     const onBeforeChange = (0, react_1.useCallback)((current, next) => {
         if (handleBeforeChange) {
             handleBeforeChange(current, next);
         }
+        prevIndexRef.current = current;
         setCurrentIndex(Math.ceil(next));
     }, [handleBeforeChange]);
     const onAfterChange = (0, react_1.useCallback)((current) => {
@@ -116,16 +127,33 @@ const SliderBlock = (props) => {
         if (!hasFocus) {
             scrollLastSlide(current);
         }
-    }, [handleAfterChange, hasFocus, scrollLastSlide]);
-    const handleDotClick = (0, react_1.useCallback)((index) => {
+        if (isUserInteractionRef.current) {
+            const focusIndex = prevIndexRef.current >= current
+                ? current
+                : Math.max(current, prevIndexRef.current + slidesCountByBreakpoint);
+            const firstNewSlide = document.getElementById(getSlideId(sliderId, focusIndex));
+            if (firstNewSlide) {
+                const focusableChild = Array.from(firstNewSlide.querySelectorAll('*')).find(utils_2.isFocusable);
+                focusableChild === null || focusableChild === void 0 ? void 0 : focusableChild.focus();
+            }
+        }
+        isUserInteractionRef.current = false;
+    }, [handleAfterChange, hasFocus, scrollLastSlide, sliderId, slidesCountByBreakpoint]);
+    const handleDotClick = (index) => {
         const nextIndex = index > currentIndex ? index + 1 - slidesCountByBreakpoint : index;
         if (slider) {
             slider.slickGoTo(nextIndex);
         }
-    }, [slider, currentIndex, slidesCountByBreakpoint]);
-    const barSlidesCount = childrenCount - slidesToShowCount + 1;
+    };
+    const barSlidesCount = childrenCount - slidesCountByBreakpoint + 1;
     const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
     const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
+    const { getRovingItemProps, rovingListProps } = (0, utils_2.useRovingTabIndex)({
+        itemCount: barSlidesCount,
+        activeIndex: currentIndex + 1,
+        firstIndex: 1,
+        uniqId: sliderId,
+    });
     const renderBar = () => {
         return (slidesCountByBreakpoint > 1 && (react_1.default.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
@@ -136,19 +164,22 @@ const SliderBlock = (props) => {
     const renderAccessibleBar = (index) => {
         return (
         // To have this key differ from keys used in renderDot function, added `-accessible-bar` part
-        react_1.default.createElement(react_1.Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 0 && (react_1.default.createElement("li", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
+        react_1.default.createElement(react_1.Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 0 && (react_1.default.createElement("li", Object.assign({ className: b('accessible-bar'), role: "menuitemradio", "aria-checked": true, "aria-label": (0, i18n_1.i18n)('dot-label', {
+                index: currentIndex + 1,
+                count: barSlidesCount,
+            }), style: {
                 left: barPosition,
                 width: barWidth,
-            } }))));
+            } }, getRovingItemProps(currentIndex + 1))))));
     };
     const getCurrentSlideNumber = (index) => {
         const currentIndexDiff = index - currentIndex;
         let currentSlideNumber;
-        if (0 <= currentIndexDiff && currentIndexDiff < slidesToShowCount) {
+        if (0 <= currentIndexDiff && currentIndexDiff < slidesCountByBreakpoint) {
             currentSlideNumber = currentIndex + 1;
         }
-        else if (currentIndexDiff >= slidesToShowCount) {
-            currentSlideNumber = index - slidesToShowCount + 2;
+        else if (currentIndexDiff >= slidesCountByBreakpoint) {
+            currentSlideNumber = index - slidesCountByBreakpoint + 2;
         }
         else {
             currentSlideNumber = index + 1;
@@ -157,12 +188,24 @@ const SliderBlock = (props) => {
     };
     const isVisibleSlide = (index) => {
         const currentIndexDiff = index - currentIndex;
-        return (slidesCountByBreakpoint > 0 &&
+        const result = slidesCountByBreakpoint > 0 &&
             0 <= currentIndexDiff &&
-            currentIndexDiff < slidesToShowCount);
+            currentIndexDiff < slidesCountByBreakpoint;
+        return result;
     };
     const renderDot = (index) => {
-        return (react_1.default.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": isVisibleSlide(index) ? true : undefined, "aria-label": `Slide ${getCurrentSlideNumber(index)} of ${barSlidesCount}` }));
+        const isVisible = isVisibleSlide(index);
+        const currentSlideNumber = getCurrentSlideNumber(index);
+        const rovingItemProps = isVisible ? undefined : getRovingItemProps(currentSlideNumber);
+        return (react_1.default.createElement("li", Object.assign({ key: index, className: b('dot', { active: index === currentIndex }), onClick: asUserInteraction(() => handleDotClick(index)), onKeyDown: (e) => {
+                const key = e.key.toLowerCase();
+                if (key === 'space' || key === 'enter') {
+                    e.currentTarget.click();
+                }
+            }, role: "menuitemradio", "aria-checked": false, tabIndex: -1, "aria-hidden": isVisible, "aria-label": (0, i18n_1.i18n)('dot-label', {
+                index: currentSlideNumber,
+                count: barSlidesCount,
+            }) }, rovingItemProps)));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {
@@ -173,7 +216,7 @@ const SliderBlock = (props) => {
             .map((_item, index) => renderDot(index));
         dotsList.splice(currentIndex, 0, renderAccessibleBar(currentIndex));
         return (react_1.default.createElement("div", { className: b('dots', dotsClassName) },
-            react_1.default.createElement("ul", { className: b('dots-list') },
+            react_1.default.createElement("ul", Object.assign({ className: b('dots-list'), role: "menu", "aria-label": (0, i18n_1.i18n)('pagination-label') }, rovingListProps),
                 renderBar(),
                 dotsList)));
     };
@@ -192,17 +235,18 @@ const SliderBlock = (props) => {
             infinite: false,
             speed: 1000,
             adaptiveHeight: adaptive,
-            autoplay: Boolean(autoplay),
-            autoplaySpeed: autoplay,
+            autoplay: isAutoplayEnabled,
+            autoplaySpeed,
             slidesToShow: slidesToShowCount,
             slidesToScroll: 1,
             responsive: (0, utils_2.getSliderResponsiveParams)(slidesToShow),
             beforeChange: onBeforeChange,
             afterChange: onAfterChange,
             initialSlide: 0,
-            nextArrow: react_1.default.createElement(Arrow_1.default, { type: "right", handleClick: handleArrowClick, size: arrowSize }),
-            prevArrow: react_1.default.createElement(Arrow_1.default, { type: "left", handleClick: handleArrowClick, size: arrowSize }),
+            nextArrow: (react_1.default.createElement(Arrow_1.default, { type: "right", handleClick: asUserInteraction(handleArrowClick), size: arrowSize })),
+            prevArrow: (react_1.default.createElement(Arrow_1.default, { type: "left", handleClick: asUserInteraction(handleArrowClick), size: arrowSize })),
             lazyLoad,
+            accessibility: false,
         };
         return (react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: isMobile ? unsetFocus : noop_1.default },
             react_1.default.createElement(react_slick_1.default, Object.assign({}, settings), disclosedChildren),
@@ -223,23 +267,33 @@ const SliderBlock = (props) => {
             react_1.default.createElement(AnimateBlock_1.default, { className: b('animate-slides'), animate: animated }, renderSlider()))));
 };
 exports.SliderBlock = SliderBlock;
+function getSlideId(sliderId, index) {
+    return `slider-${sliderId}-child-${index}`;
+}
 // TODO remove this and rework PriceDetailed CLOUDFRONT-12230
-function discloseAllNestedChildren(children) {
+function discloseAllNestedChildren(children, sliderId) {
     if (!children) {
         return [];
     }
+    let childIndex = 0;
+    const wrapped = (child) => {
+        const id = getSlideId(sliderId, childIndex++);
+        return (react_1.default.createElement("div", { key: id, id: id }, child));
+    };
     return react_1.default.Children.map(children, (child) => {
         var _a;
         if (child) {
             // TODO: if child has 'items' then 'items' determinate like nested children for Slider.
             const nestedChildren = (_a = child.props.data) === null || _a === void 0 ? void 0 : _a.items;
             if (nestedChildren) {
-                return nestedChildren.map((nestedChild) => react_1.default.cloneElement(child, {
-                    data: Object.assign(Object.assign({}, child.props.data), { items: [nestedChild] }),
-                }));
+                return nestedChildren.map((nestedChild) => {
+                    return wrapped(react_1.default.cloneElement(child, {
+                        data: Object.assign(Object.assign({}, child.props.data), { items: [nestedChild] }),
+                    }));
+                });
             }
         }
-        return child;
+        return child && wrapped(child);
     }).filter(Boolean);
 }
 exports.default = exports.SliderBlock;

package/build/cjs/blocks/Slider/i18n/en.json

@@ -1,4 +1,6 @@
 {
   "arrow-right": "Next",
-  "arrow-left": "Previous"
+  "arrow-left": "Previous",
+  "dot-label": "Page {{index}} of {{count}}",
+  "pagination-label": "Pages"
 }

package/build/cjs/blocks/Slider/i18n/index.d.ts

@@ -1 +1 @@
-export declare const i18n: (key: "arrow-right" | "arrow-left", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "arrow-right" | "arrow-left" | "dot-label" | "pagination-label", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/cjs/blocks/Slider/i18n/ru.json

@@ -1,4 +1,6 @@
 {
   "arrow-right": "Дальше",
-  "arrow-left": "Назад"
+  "arrow-left": "Назад",
+  "dot-label": "Страница {{index}} из {{count}}",
+  "pagination-label": "Страницы"
 }

package/build/cjs/blocks/Slider/utils.d.ts

@@ -10,6 +10,7 @@ export interface GetSlidesToShowParams {
     breakpoints?: SlidesToShow;
     mobileFullscreen?: boolean;
 }
+export declare const isFocusable: (element: Element) => boolean;
 export declare function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }: GetSlidesToShowParams): {
     sm: number;
     xl: number;
@@ -24,3 +25,12 @@ export declare function getSliderResponsiveParams(breakpoints: SliderBreakpointP
 }[];
 export declare function getSlidesCountByBreakpoint(breakpoint: number, breakpoints: SliderBreakpointParams): number;
 export declare function getSlidesToShowCount(breakpoints: SliderBreakpointParams): number;
+export declare function useRovingTabIndex(props: {
+    itemCount: number;
+    activeIndex: number;
+    firstIndex?: number;
+    uniqId: string;
+}): {
+    getRovingItemProps: (index: number) => Pick<React.HTMLAttributes<HTMLElement>, 'id' | 'tabIndex' | 'onFocus'>;
+    rovingListProps: import("react").HTMLAttributes<HTMLElement>;
+};

package/build/cjs/blocks/Slider/utils.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSlidesToShowCount = exports.getSlidesCountByBreakpoint = exports.getSliderResponsiveParams = exports.getSlidesToShowWithDefaults = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
+exports.useRovingTabIndex = exports.getSlidesToShowCount = exports.getSlidesCountByBreakpoint = exports.getSliderResponsiveParams = exports.getSlidesToShowWithDefaults = exports.isFocusable = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
 const tslib_1 = require("tslib");
+const react_1 = require("react");
 const pickBy_1 = tslib_1.__importDefault(require("lodash/pickBy"));
 const constants_1 = require("../../constants");
 const models_1 = require("./models");
@@ -12,6 +13,38 @@ exports.DEFAULT_SLIDE_BREAKPOINTS = {
     [models_1.SliderBreakpointNames.Sm]: 1.15,
 };
 const BREAKPOINT_NAMES_BY_VALUES = Object.entries(constants_1.BREAKPOINTS).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [value]: key })), {});
+const isFocusable = (element) => {
+    if (!(element instanceof HTMLElement)) {
+        return false;
+    }
+    const tabIndexAttr = element.getAttribute('tabindex');
+    const hasTabIndex = tabIndexAttr !== null;
+    const tabIndex = Number(tabIndexAttr);
+    if (element.ariaHidden === 'true' || (hasTabIndex && tabIndex < 0)) {
+        return false;
+    }
+    if (hasTabIndex && tabIndex >= 0) {
+        return true;
+    }
+    // without this jest fails here for some reason
+    let htmlElement;
+    switch (true) {
+        case element instanceof HTMLAnchorElement:
+            htmlElement = element;
+            return Boolean(htmlElement.href);
+        case element instanceof HTMLInputElement:
+            htmlElement = element;
+            return htmlElement.type !== 'hidden' && !htmlElement.disabled;
+        case element instanceof HTMLSelectElement:
+        case element instanceof HTMLTextAreaElement:
+        case element instanceof HTMLButtonElement:
+            htmlElement = element;
+            return !htmlElement.disabled;
+        default:
+            return false;
+    }
+};
+exports.isFocusable = isFocusable;
 function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }) {
     let result;
     if (typeof breakpoints === 'number') {
@@ -39,3 +72,54 @@ function getSlidesToShowCount(breakpoints) {
     return Math.floor(Math.max(...Object.values(breakpoints)));
 }
 exports.getSlidesToShowCount = getSlidesToShowCount;
+const getRovingListItemId = (uniqId, index) => `${uniqId}-roving-tabindex-item-${index}`;
+function useRovingTabIndex(props) {
+    const { itemCount, activeIndex, firstIndex = 0, uniqId } = props;
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(firstIndex);
+    const hasFocusRef = (0, react_1.useRef)(false);
+    const lastIndex = itemCount + firstIndex - 1;
+    const getRovingItemProps = (index) => {
+        return {
+            id: getRovingListItemId(uniqId, index),
+            tabIndex: index === activeIndex ? 0 : -1,
+            onFocus: () => {
+                setCurrentIndex(index);
+                hasFocusRef.current = true;
+            },
+        };
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!hasFocusRef.current) {
+            return;
+        }
+        (_a = document.getElementById(getRovingListItemId(uniqId, currentIndex))) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex, currentIndex, uniqId]);
+    const setNextIndex = () => setCurrentIndex((prev) => (prev >= lastIndex ? firstIndex : prev + 1));
+    const setPrevIndex = () => setCurrentIndex((prev) => (prev <= firstIndex ? lastIndex : prev - 1));
+    const onRovingListKeyDown = (e) => {
+        const key = e.key.toLowerCase();
+        if (key !== 'tab' && key !== 'enter') {
+            e.preventDefault();
+        }
+        switch (key) {
+            case 'arrowleft':
+            case 'arrowup':
+                setPrevIndex();
+                return;
+            case 'arrowright':
+            case 'arrowdown':
+                setNextIndex();
+                return;
+        }
+    };
+    const onRovingListBlur = () => {
+        hasFocusRef.current = false;
+    };
+    const rovingListProps = {
+        onKeyDown: onRovingListKeyDown,
+        onBlur: onRovingListBlur,
+    };
+    return { getRovingItemProps, rovingListProps };
+}
+exports.useRovingTabIndex = useRovingTabIndex;

package/build/cjs/blocks/SliderNew/Arrow/Arrow.d.ts

@@ -1,9 +1,11 @@
+import React from 'react';
 import { ClassNameProps } from '../../../models';
 export type ArrowType = 'left' | 'right';
 export interface ArrowProps {
     type: ArrowType;
     onClick?: () => void;
     size?: number;
+    extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
-declare const Arrow: ({ type, onClick, className, size }: ArrowProps & ClassNameProps) => JSX.Element;
+declare const Arrow: ({ type, onClick, className, size, extraProps }: ArrowProps & ClassNameProps) => JSX.Element;
 export default Arrow;

package/build/cjs/blocks/SliderNew/Arrow/Arrow.js

@@ -6,8 +6,8 @@ const ToggleArrow_1 = tslib_1.__importDefault(require("../../../components/Toggl
 const utils_1 = require("../../../utils");
 const i18n_1 = require("../i18n");
 const b = (0, utils_1.block)('slider-new-block-arrow');
-const Arrow = ({ type, onClick, className, size = 16 }) => (react_1.default.createElement("div", { className: b({ type }, className) },
-    react_1.default.createElement("button", { className: b('button'), onClick: onClick, "aria-label": (0, i18n_1.i18n)(`arrow-${type}`) },
+const Arrow = ({ type, onClick, className, size = 16, extraProps }) => (react_1.default.createElement("div", { className: b({ type }, className) },
+    react_1.default.createElement("button", Object.assign({ className: b('button'), onClick: onClick, "aria-label": (0, i18n_1.i18n)(`arrow-${type}`) }, extraProps),
         react_1.default.createElement("span", { className: b('icon-wrapper') },
             react_1.default.createElement(ToggleArrow_1.default, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 exports.default = Arrow;

package/build/cjs/blocks/SliderNew/Slider.js

@@ -10,17 +10,29 @@ const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/Animate
 const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title"));
 const utils_1 = require("../../utils");
 const Arrow_1 = tslib_1.__importDefault(require("./Arrow/Arrow"));
+const i18n_1 = require("./i18n");
 const useSlider_1 = require("./useSlider");
+const useSliderPagination_1 = require("./useSliderPagination");
 require("swiper/swiper-bundle.css");
 const b = (0, utils_1.block)('SliderNewBlock');
 swiper_1.default.use([swiper_1.Autoplay, swiper_1.A11y, swiper_1.Pagination]);
 const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, dots = true, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
-    const { childrenCount, breakpoints, autoplay, onSwiper, onPrev, onNext, isLocked, setIsLocked } = (0, useSlider_1.useSlider)({
+    const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, onPrev, onNext, setIsLocked } = (0, useSlider_1.useSlider)({
         slidesToShow,
         children,
         type,
         autoplayMs,
     });
+    const isA11yControlHidden = Boolean(autoplay);
+    const controlTabIndex = isA11yControlHidden ? -1 : 0;
+    const paginationProps = (0, useSliderPagination_1.useSliderPagination)({
+        enabled: dots,
+        isA11yControlHidden,
+        controlTabIndex,
+        bulletClass: b('dot', dotsClassName),
+        bulletActiveClass: b('dot_active'),
+        paginationLabel: (0, i18n_1.i18n)('pagination-label'),
+    });
     return (react_1.default.createElement("div", { className: b({
             'one-slide': childrenCount === 1,
             'only-arrows': !(title === null || title === void 0 ? void 0 : title.text) && !description && arrows,
@@ -30,14 +42,14 @@ const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows =
         anchorId && react_1.default.createElement(Anchor_1.default, { id: anchorId }),
         react_1.default.createElement(Title_1.default, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
         react_1.default.createElement(AnimateBlock_1.default, { className: b('animate-slides'), animate: animated },
-            react_1.default.createElement(react_2.Swiper, { className: b('slider', className), onSwiper: onSwiper, pagination: dots && {
-                    clickable: true,
-                    bulletClass: b('dot', dotsClassName),
-                    bulletActiveClass: b('dot_active'),
-                }, speed: 1000, autoplay: autoplay, autoHeight: adaptive, initialSlide: 0, noSwiping: false, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), watchSlidesVisibility: true, watchOverflow: true }, react_1.default.Children.map(children, (elem, index) => (react_1.default.createElement(react_2.SwiperSlide, { className: b('slide'), key: index }, elem)))),
+            react_1.default.createElement(react_2.Swiper, Object.assign({ className: b('slider', className), onSwiper: onSwiper, speed: 1000, autoplay: autoplay, autoHeight: adaptive, initialSlide: 0, noSwiping: false, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), watchSlidesVisibility: true, watchOverflow: true, a11y: {
+                    slideLabelMessage: '',
+                    paginationBulletMessage: (0, i18n_1.i18n)('dot-label', { index: '{{index}}' }),
+                } }, paginationProps), react_1.default.Children.map(children, (elem, index) => (react_1.default.createElement(react_2.SwiperSlide, { className: b('slide'), key: index }, ({ isVisible }) => (react_1.default.createElement("div", { "aria-hidden": !isA11yControlHidden && !isVisible }, elem)))))),
             arrows && !isLocked && (react_1.default.createElement(react_1.Fragment, null,
-                react_1.default.createElement(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", onClick: onPrev, size: arrowSize }),
-                react_1.default.createElement(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", onClick: onNext, size: arrowSize }))),
+                react_1.default.createElement("div", { "aria-hidden": isA11yControlHidden },
+                    react_1.default.createElement(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }),
+                    react_1.default.createElement(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } })))),
             react_1.default.createElement("div", { className: b('footer') }, disclaimer ? (react_1.default.createElement("div", { className: b('disclaimer', { size: (disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.size) || 'm' }) }, disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.text)) : null))));
 };
 exports.SliderNewBlock = SliderNewBlock;

package/build/cjs/blocks/SliderNew/i18n/en.json

@@ -1,4 +1,6 @@
 {
   "arrow-right": "Next",
-  "arrow-left": "Previous"
+  "arrow-left": "Previous",
+  "dot-label": "Page {{index}}",
+  "pagination-label": "Pages"
 }

package/build/cjs/blocks/SliderNew/i18n/index.d.ts

@@ -1 +1 @@
-export declare const i18n: (key: "arrow-right" | "arrow-left", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "arrow-right" | "arrow-left" | "dot-label" | "pagination-label", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/cjs/blocks/SliderNew/i18n/ru.json

@@ -1,4 +1,6 @@
 {
   "arrow-right": "Дальше",
-  "arrow-left": "Назад"
+  "arrow-left": "Назад",
+  "dot-label": "Страница {{index}}",
+  "pagination-label": "Страницы"
 }

package/build/cjs/blocks/SliderNew/useSlider.d.ts

@@ -1,11 +1,12 @@
 import React, { PropsWithChildren } from 'react';
 import type { Swiper } from 'swiper';
 import { SlidesToShow } from '../../models';
-export declare const useSlider: ({ children, autoplayMs, type, slidesToShow, }: React.PropsWithChildren<{
-    autoplayMs?: number | undefined;
-    type?: string | undefined;
-    slidesToShow?: SlidesToShow | undefined;
-}>) => {
+type UseSliderProps = PropsWithChildren<{
+    autoplayMs?: number;
+    type?: string;
+    slidesToShow?: SlidesToShow;
+}>;
+export declare const useSlider: ({ children, autoplayMs, type, ...props }: UseSliderProps) => {
     slider: Swiper | undefined;
     onSwiper: React.Dispatch<React.SetStateAction<Swiper | undefined>>;
     onNext: () => void;
@@ -15,7 +16,8 @@ export declare const useSlider: ({ children, autoplayMs, type, slidesToShow, }:
     isLocked: boolean;
     setIsLocked: React.Dispatch<React.SetStateAction<boolean>>;
     autoplay: false | {
-        delay: number | undefined;
+        delay: number;
         disableOnInteraction: boolean;
     };
 };
+export {};

package/build/cjs/blocks/SliderNew/useSlider.js

@@ -5,11 +5,13 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const models_1 = require("../../models");
 const utils_1 = require("./utils");
-const useSlider = ({ children, autoplayMs, type, slidesToShow, }) => {
+const useSlider = (_a) => {
+    var { children, autoplayMs, type } = _a, props = tslib_1.__rest(_a, ["children", "autoplayMs", "type"]);
     const [slider, setSlider] = (0, react_1.useState)();
     const [isLocked, setIsLocked] = (0, react_1.useState)(false);
+    const slidesToShow = (0, utils_1.useMemoized)(props.slidesToShow);
     const childrenCount = react_1.default.Children.count(children);
-    const autoplayEnabled = (0, react_1.useMemo)(() => Boolean(autoplayMs), [autoplayMs]);
+    const autoplayEnabled = autoplayMs !== undefined && autoplayMs > 0;
     const breakpoints = (0, react_1.useMemo)(() => {
         return (0, utils_1.getSliderResponsiveParams)({
             contentLength: childrenCount,

package/build/cjs/blocks/SliderNew/useSliderPagination.d.ts

@@ -0,0 +1,9 @@
+import { Swiper as SwiperProps } from 'swiper/swiper-react';
+export declare const useSliderPagination: (props: {
+    enabled: boolean;
+    isA11yControlHidden: boolean;
+    controlTabIndex: number;
+    bulletClass: string;
+    bulletActiveClass: string;
+    paginationLabel: string;
+}) => Pick<SwiperProps, 'pagination' | 'onPaginationUpdate'> | undefined;

package/build/cjs/blocks/SliderNew/useSliderPagination.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSliderPagination = void 0;
+const utils_1 = require("./utils");
+const useSliderPagination = (props) => {
+    if (!props.enabled) {
+        return undefined;
+    }
+    const { isA11yControlHidden, controlTabIndex, bulletClass, bulletActiveClass, paginationLabel } = props;
+    return {
+        pagination: {
+            clickable: true,
+            bulletClass,
+            bulletActiveClass,
+        },
+        onPaginationUpdate: (slider) => {
+            const pagination = slider.pagination.el;
+            (0, utils_1.setElementAtrributes)(pagination, {
+                role: 'menu',
+                'aria-hidden': isA11yControlHidden,
+                'aria-label': paginationLabel,
+            });
+            const bullets = pagination.querySelectorAll(`.${bulletClass}`);
+            bullets.forEach((bullet) => {
+                const isActive = bullet.classList.contains(bulletActiveClass);
+                (0, utils_1.setElementAtrributes)(bullet, {
+                    role: 'menuitemradio',
+                    'aria-hidden': isA11yControlHidden,
+                    'aria-checked': isActive,
+                    tabindex: controlTabIndex,
+                });
+            });
+        },
+    };
+};
+exports.useSliderPagination = useSliderPagination;

package/build/cjs/blocks/SliderNew/utils.d.ts

@@ -12,3 +12,5 @@ export interface GetSlidesToShowParams {
     mobileFullscreen?: boolean;
 }
 export declare function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }: GetSlidesToShowParams): Record<number, SwiperOptions>;
+export declare const useMemoized: <T>(value: T) => T;
+export declare const setElementAtrributes: (element: Element, attributes: Record<string, unknown>) => void;

package/build/cjs/blocks/SliderNew/utils.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSliderResponsiveParams = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
+exports.setElementAtrributes = exports.useMemoized = exports.getSliderResponsiveParams = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
 const tslib_1 = require("tslib");
+const react_1 = require("react");
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const pickBy_1 = tslib_1.__importDefault(require("lodash/pickBy"));
 const constants_1 = require("../../constants");
 const models_1 = require("./models");
@@ -29,3 +31,13 @@ function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscre
     }, {});
 }
 exports.getSliderResponsiveParams = getSliderResponsiveParams;
+const useMemoized = (value) => {
+    const [memoizedValue, setMemoizedValue] = (0, react_1.useState)(value);
+    (0, react_1.useEffect)(() => {
+        setMemoizedValue((memoized) => value && typeof value === 'object' && (0, isEqual_1.default)(memoized, value) ? memoized : value);
+    }, [value]);
+    return memoizedValue;
+};
+exports.useMemoized = useMemoized;
+const setElementAtrributes = (element, attributes) => Object.entries(attributes).forEach(([attribute, value]) => element.setAttribute(attribute, String(value)));
+exports.setElementAtrributes = setElementAtrributes;