@gravity-ui/page-constructor 4.5.2 → 4.6.0

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

@@ -4,9 +4,10 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const ToggleArrow_1 = tslib_1.__importDefault(require("../../../components/ToggleArrow/ToggleArrow"));
 const utils_1 = require("../../../utils");
+const i18n_1 = tslib_1.__importDefault(require("../i18n"));
 const b = (0, utils_1.block)('slider-block-arrow');
 const Arrow = ({ type, handleClick, className, size = 16 }) => (react_1.default.createElement("div", { className: b({ type }, className) },
-    react_1.default.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
+    react_1.default.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type), "aria-label": (0, i18n_1.default)(`arrow-${type}`) },
         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/Slider/Slider.css

@@ -134,6 +134,7 @@ unpredictable css rules order in build */
   justify-content: center;
 }
 .pc-SliderBlock__dots-list li.pc-SliderBlock__bar,
+.pc-SliderBlock__dots-list li.pc-SliderBlock__accessible-bar,
 .pc-SliderBlock__dots-list li.pc-SliderBlock__dot {
   margin: calc(12px / 2) 8px;
   top: 0;
@@ -155,13 +156,15 @@ unpredictable css rules order in build */
 .pc-SliderBlock__dot_active {
   background-color: var(--g-color-line-generic-active);
 }
-.pc-SliderBlock__bar {
+.pc-SliderBlock__bar, .pc-SliderBlock__accessible-bar {
   position: absolute;
   top: 12px;
   left: 0;
   width: 24px;
   height: 8px;
   border-radius: var(--pc-border-radius);
+}
+.pc-SliderBlock__bar {
   transition: left 0.3s;
   background-color: var(--pc-color-line-generic-active-solid);
 }

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

@@ -121,27 +121,53 @@ const SliderBlock = (props) => {
             slider.slickGoTo(nextIndex);
         }
     }, [slider, currentIndex, slidesCountByBreakpoint]);
+    const barSlidesCount = childrenCount - slidesToShowCount + 1;
+    const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
+    const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
     const renderBar = () => {
-        const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
-        const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
         return (slidesCountByBreakpoint > 1 && (react_1.default.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
                 width: barWidth,
             } })));
     };
+    // renders additional bar, not visible in the layout but visible for screenreaders
+    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 > 1 && (react_1.default.createElement("li", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
+                left: barPosition,
+                width: barWidth,
+            } }))));
+    };
     const renderDot = (index) => {
-        return (react_1.default.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
+        const currentIndexDiff = index - currentIndex;
+        let currentSlideNumber;
+        if (0 <= currentIndexDiff && currentIndexDiff < slidesToShowCount) {
+            currentSlideNumber = currentIndex + 1;
+        }
+        else if (currentIndexDiff >= slidesToShowCount) {
+            currentSlideNumber = index - slidesToShowCount + 2;
+        }
+        else {
+            currentSlideNumber = index + 1;
+        }
+        return (react_1.default.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": (slidesCountByBreakpoint > 1 &&
+                0 <= currentIndexDiff &&
+                currentIndexDiff < slidesToShowCount) ||
+                undefined, "aria-label": `Slide ${currentSlideNumber} of ${barSlidesCount}` }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {
             return null;
         }
+        const dotsList = Array(childrenCount)
+            .fill(null)
+            .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') },
                 renderBar(),
-                Array(childrenCount)
-                    .fill(null)
-                    .map((_item, index) => renderDot(index)))));
+                dotsList)));
     };
     const renderDisclaimer = () => {
         return disclaimer ? (react_1.default.createElement("div", { className: b('disclaimer', { size: disclaimer.size || 'm' }) }, disclaimer.text)) : null;

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

@@ -0,0 +1,4 @@
+{
+  "arrow-right": "Next",
+  "arrow-left": "Previous"
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'SliderBlock';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

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

@@ -0,0 +1,4 @@
+{
+  "arrow-right": "Дальше",
+  "arrow-left": "Назад"
+}

package/build/cjs/components/HTML/HTML.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WithChildren } from '../../models';
+import { QAProps } from '../../models/common';
 export interface HTMLProps {
     children?: string;
     block?: boolean;
@@ -7,12 +8,13 @@ export interface HTMLProps {
     itemProp?: string;
     id?: string;
 }
-declare const HTML: ({ children, block, className, itemProp, id }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ children, block, className, itemProp, id, qa, }: WithChildren<HTMLProps & QAProps>) => React.DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
         __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
     };
     className: string | undefined;
     itemProp: string | undefined;
     id: string | undefined;
+    'data-qa': string | undefined;
 }, HTMLElement> | null;
 export default HTML;

package/build/cjs/components/HTML/HTML.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
-const HTML = ({ children, block = false, className, itemProp, id }) => {
+const HTML = ({ children, block = false, className, itemProp, id, qa, }) => {
     if (!children) {
         return null;
     }
@@ -12,6 +12,7 @@ const HTML = ({ children, block = false, className, itemProp, id }) => {
         className,
         itemProp,
         id,
+        'data-qa': qa,
     });
 };
 exports.default = HTML;

package/build/cjs/components/Link/Link.d.ts

@@ -1,4 +1,5 @@
 import { ClassNameProps, LinkProps, Tabbable, WithChildren } from '../../models';
-export type LinkFullProps = LinkProps & ClassNameProps & Tabbable;
+import { QAProps } from '../../models/common';
+export type LinkFullProps = LinkProps & ClassNameProps & Tabbable & QAProps;
 declare const LinkBlock: (props: WithChildren<LinkFullProps>) => JSX.Element;
 export default LinkBlock;

package/build/cjs/components/Link/Link.js

@@ -10,6 +10,7 @@ const useMetrika_1 = require("../../hooks/useMetrika");
 const icons_1 = require("../../icons");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
+const index_1 = require("../../utils/index");
 const BackLink_1 = tslib_1.__importDefault(require("../BackLink/BackLink"));
 const FileLink_1 = tslib_1.__importDefault(require("../FileLink/FileLink"));
 const b = (0, utils_1.block)('link-block');
@@ -27,7 +28,8 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, } = props;
+    const qaAttributes = (0, index_1.getQaAttrubutes)(qa, ['normal']);
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Link, url);
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
@@ -48,7 +50,7 @@ const LinkBlock = (props) => {
             case 'normal': {
                 const linkProps = (0, utils_1.getLinkProps)(url, hostname, target);
                 const content = children || text;
-                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex }, linkProps), arrow ? (react_1.default.createElement(react_1.Fragment, null,
+                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex }, linkProps, { "data-qa": qaAttributes.normal }), arrow ? (react_1.default.createElement(react_1.Fragment, null,
                     react_1.default.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     react_1.default.createElement(uikit_1.Icon, { className: b('arrow'), data: icons_1.Chevron, size: getArrowSize(textSize) }))) : (content)));

package/build/cjs/components/YFMWrapper/YFMWrapper.d.ts

@@ -1,9 +1,10 @@
 import { ClassNameProps, Modifiers } from '../../models';
-export interface YFMWrapperProps extends ClassNameProps {
+import { QAProps } from '../../models/common';
+export interface YFMWrapperProps extends ClassNameProps, QAProps {
     content: string;
     modifiers?: Modifiers;
     itemProp?: string;
     id?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className, itemProp, id }: YFMWrapperProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, id, qa }: YFMWrapperProps) => JSX.Element;
 export default YFMWrapper;

package/build/cjs/components/YFMWrapper/YFMWrapper.js

@@ -8,5 +8,5 @@ const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const snakecase_keys_1 = tslib_1.__importDefault(require("snakecase-keys"));
 const components_1 = require("../../components");
 const yfm = (0, bem_cn_lite_1.default)('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, id }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp, id: id }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa }, content));
 exports.default = YFMWrapper;

package/build/cjs/constructor-items.d.ts

@@ -26,7 +26,7 @@ export declare const subBlockMap: {
     "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
-    content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;
+    content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
     quote: (props: import("./models").QuoteProps) => JSX.Element;
 };
 export declare const navItemMap: {

package/build/cjs/editor/components/AddBlock/AddBlock.css

@@ -23,7 +23,7 @@ unpredictable css rules order in build */
   transition: transform 0.2s;
   width: 76px;
   height: 40px;
-  color: var(--g-color-text-primary);
+  color: var(--pc-editor-control-icon-color);
   background-color: var(--pc-editor-base-color);
   border-radius: 8px;
 }

package/build/cjs/editor/components/EditBlock/EditBlock.css

@@ -45,6 +45,7 @@ unpredictable css rules order in build */
   width: 48px;
   height: 32px;
   border-radius: 8px;
+  color: var(--pc-editor-control-icon-color);
   background-color: var(--pc-editor-control-color);
 }
 .pc-edit-block__control:hover {

package/build/cjs/editor/components/Layout/Layout.css

@@ -4,7 +4,8 @@ body {
   --pc-editor-header-height: 48px;
   --pc-editor-divider-width: 12px;
   --pc-editor-base-color: var(--g-color-base-brand);
-  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
   --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }
 

package/build/cjs/editor/containers/Form/Form.css

@@ -1,46 +1,26 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-editor-form {
-  --top-level-font-size: var(--g-text-display-2-font-size);
-  --top-level-line-height: var(--g-text-display-2-line-height);
-  --block-level-complex-propery-font-size: var(--g-text-body-3-font-size);
-  --block-level-complex-property-line-height: var(--g-text-body-3-line-height);
-  --complex-property-font-size: var(--g-text-body-2-font-size);
-  --complex-property-line-height: var(--g-text-body-2-line-height);
-  --property-font-size: var(--g-text-body-1-font-size);
-  --property-line-height: var(--g-text-body-1-line-height);
+  --block-name-font-size: var(--g-text-display-1-font-size);
+  --block-name-line-height: var(--g-text-display-1-line-height);
+  --property-name-font-size: var(--g-text-body-1-font-size);
+  --property-name-line-height: var(--g-text-body-1-line-height);
   --input-min-width: 150px;
   --property-title-width: 96px;
   --button-height: 48px;
-  --icon-size: 32px;
-  --icon-margin: 42px;
+  --icon-size: 28px;
+  --icon-margin: 8px;
   --property-font-weight: 500;
-  --header-text-size: var(--top-level-font-size);
-  --header-line-height: var(--top-level-line-height);
-  --text-size: var(--top-level-font-size);
-  --line-height: var(--top-level-line-height);
+  --header-text-size: var(--block-name-font-size);
+  --header-line-height: var(--block-name-line-height);
 }
 .pc-editor-form .df-use-search .df-use-search {
-  --button-height: 32px;
-  --icon-size: 20px;
-  --icon-margin: 30px;
-  --header-text-size: var(--block-level-complex-propery-font-size);
-  --header-line-height: var(--block-level-complex-property-line-height);
-  --text-size: var(--property-font-size);
-  --line-height: var(--property-line-height);
-  --property-font-weight: 400;
-}
-.pc-editor-form .df-use-search .df-use-search .df-use-search {
   --button-height: 28px;
   --icon-size: 16px;
-  --icon-margin: 25px;
+  --icon-margin: 0px;
+  --header-text-size: var(--property-name-font-size);
+  --header-line-height: var(--property-name-line-height);
   --property-font-weight: 400;
-  --header-text-size: var(--complex-property-font-size);
-  --header-line-height: var(--complex-property-line-height);
-  --text-size: var(--property-font-size);
-  --line-height: var(--property-line-height);
-  --oneof-text-size: var(--complex-propery-font-size);
-  --oneof-line-height: var(--complex-property-line-height);
 }
 .pc-editor-form .df-row {
   width: inherit;
@@ -49,8 +29,6 @@ unpredictable css rules order in build */
   width: var(--property-title-width);
 }
 .pc-editor-form .df-row__title {
-  font-size: var(--text-size);
-  line-height: var(--line-height);
   font-weight: var(--property-font-weight);
   white-space: nowrap;
 }
@@ -58,12 +36,13 @@ unpredictable css rules order in build */
   min-width: var(--input-min-width);
   min-height: var(--input-min-width);
 }
-.pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
+.pc-editor-form .df-simple-vertical-accordeon__header .yc-button,
+.pc-editor-form .df-simple-vertical-accordeon__title {
   font-size: var(--header-text-size);
   line-height: var(--header-line-height);
 }
 .pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
-  --g-button-height: var(--button-height);
+  --yc-button-height: var(--button-height);
   display: flex;
   justify-content: center;
   align-items: center;

package/build/cjs/editor/styles/root.css

@@ -2,6 +2,7 @@ body {
   --pc-editor-header-height: 48px;
   --pc-editor-divider-width: 12px;
   --pc-editor-base-color: var(--g-color-base-brand);
-  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
   --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }

package/build/cjs/sub-blocks/Content/Content.d.ts

@@ -1,3 +1,5 @@
 import { ClassNameProps, ContentBlockProps } from '../../models';
-declare const Content: (props: ContentBlockProps & ClassNameProps) => JSX.Element;
+import { QAProps } from '../../models/common';
+export type ContentProps = ContentBlockProps & ClassNameProps & QAProps;
+declare const Content: (props: ContentProps) => JSX.Element;
 export default Content;

package/build/cjs/sub-blocks/Content/Content.js

@@ -6,6 +6,7 @@ const components_1 = require("../../components");
 const Link_1 = tslib_1.__importDefault(require("../../components/Link/Link"));
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
+const blocks_1 = require("../../utils/blocks");
 const ContentList_1 = tslib_1.__importDefault(require("./ContentList/ContentList"));
 const b = (0, utils_1.block)('content');
 function getTextSize(size) {
@@ -36,23 +37,24 @@ function getButtonSize(size) {
     }
 }
 const Content = (props) => {
-    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, } = props;
+    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, qa, } = props;
+    const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, ['links', 'link', 'buttons', 'button', 'list']);
     const titleProps = !title || typeof title === 'string'
         ? { text: title, textSize: getTextSize(size) }
         : title;
     const hasTitle = Boolean(title);
-    return (react_1.default.createElement(grid_1.Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes },
+    return (react_1.default.createElement(grid_1.Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes, qa: qaAttributes.container },
         title && react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: { all: 12 } }),
         text && (react_1.default.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
             react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true } }))),
-        (list === null || list === void 0 ? void 0 : list.length) ? react_1.default.createElement(ContentList_1.default, { list: list, size: size }) : null,
+        (list === null || list === void 0 ? void 0 : list.length) ? react_1.default.createElement(ContentList_1.default, { list: list, size: size, qa: qaAttributes.list }) : null,
         additionalInfo && (react_1.default.createElement("div", { className: b('notice') },
             react_1.default.createElement(components_1.YFMWrapper, { content: additionalInfo, modifiers: {
                     constructor: true,
                     'constructor-notice': true,
                     [`constructor-size-${size}`]: true,
                 } }))),
-        links && (react_1.default.createElement("div", { className: b('links') }, links.map((link) => (react_1.default.createElement(Link_1.default, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url })))))),
-        buttons && (react_1.default.createElement("div", { className: b('buttons') }, buttons.map((item) => (react_1.default.createElement(components_1.Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size) }))))))));
+        links && (react_1.default.createElement("div", { className: b('links'), "data-qa": qaAttributes.links }, links.map((link) => (react_1.default.createElement(Link_1.default, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url, qa: qaAttributes.link })))))),
+        buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": qaAttributes.buttons }, buttons.map((item) => (react_1.default.createElement(components_1.Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size), qa: qaAttributes.button }))))))));
 };
 exports.default = Content;

package/build/cjs/sub-blocks/Content/ContentList/ContentList.d.ts

@@ -1,7 +1,8 @@
 import { ContentItemProps, ContentSize } from '../../../models';
+import { QAProps } from '../../../models/common';
 interface ContentListProps {
     list: ContentItemProps[];
     size: ContentSize;
 }
-declare const ContentList: ({ list, size }: ContentListProps) => JSX.Element;
+declare const ContentList: ({ list, size, qa }: ContentListProps & QAProps) => JSX.Element;
 export default ContentList;

package/build/cjs/sub-blocks/Content/ContentList/ContentList.js

@@ -8,6 +8,7 @@ const Image_1 = tslib_1.__importDefault(require("../../../components/Image/Image
 const utils_1 = require("../../../components/Media/Image/utils");
 const theme_1 = require("../../../context/theme");
 const utils_2 = require("../../../utils");
+const blocks_1 = require("../../../utils/blocks");
 const b = (0, utils_2.block)('content-list');
 function getHeadingLevel(size) {
     switch (size) {
@@ -18,18 +19,19 @@ function getHeadingLevel(size) {
             return 'h3';
     }
 }
-const ContentList = ({ list, size }) => {
+const ContentList = ({ list, size, qa }) => {
     const theme = (0, theme_1.useTheme)();
-    return (react_1.default.createElement("div", { className: b({ size }) }, list === null || list === void 0 ? void 0 : list.map((item) => {
+    const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, ['image', 'title', 'text']);
+    return (react_1.default.createElement("div", { className: b({ size }), "data-qa": qa }, list === null || list === void 0 ? void 0 : list.map((item) => {
         const { icon, title, text } = item;
         const iconThemed = (0, utils_2.getThemedValue)(icon, theme);
         const iconData = (0, utils_1.getMediaImage)(iconThemed);
         return (react_1.default.createElement("div", { className: b('item'), key: (0, uuid_1.v4)() },
-            react_1.default.createElement(Image_1.default, Object.assign({}, iconData, { className: b('icon') })),
+            react_1.default.createElement(Image_1.default, Object.assign({}, iconData, { className: b('icon'), qa: qaAttributes.image })),
             react_1.default.createElement("div", null,
                 title &&
-                    react_1.default.createElement(getHeadingLevel(size), { className: b('title') }, title),
-                text && (react_1.default.createElement(components_1.YFMWrapper, { className: b('text'), content: text, modifiers: { constructor: true } })))));
+                    react_1.default.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, title),
+                text && (react_1.default.createElement(components_1.YFMWrapper, { className: b('text'), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
     })));
 };
 exports.default = ContentList;

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

@@ -7,3 +7,4 @@ export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlock
 export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
 export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
+export declare const getQaAttrubutes: (qa?: string, customKeys?: Array<string>) => Record<string, string>;

package/build/cjs/utils/blocks.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+exports.getQaAttrubutes = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+const lodash_1 = require("lodash");
 const models_1 = require("../models");
 const BLOCK_ELEMENTS = [
     'div',
@@ -39,6 +40,7 @@ const BLOCK_ELEMENTS = [
     'td',
 ];
 const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -120,3 +122,14 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
+const getQaAttrubutes = (qa, customKeys = []) => {
+    const attributes = {};
+    if (qa) {
+        const keys = QA_ATTRIBUTES_KEYS.concat(customKeys);
+        keys.forEach((key) => {
+            attributes[(0, lodash_1.camelCase)(key)] = `${qa}-${key}`;
+        });
+    }
+    return attributes;
+};
+exports.getQaAttrubutes = getQaAttrubutes;

package/build/esm/blocks/Slider/Arrow/Arrow.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';
 import { block } from '../../../utils';
+import i18n from '../i18n';
 import './Arrow.css';
 const b = block('slider-block-arrow');
 const Arrow = ({ type, handleClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },
-    React.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
+    React.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type), "aria-label": i18n(`arrow-${type}`) },
         React.createElement("span", { className: b('icon-wrapper') },
             React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 export default Arrow;

package/build/esm/blocks/Slider/Slider.css

@@ -134,6 +134,7 @@ unpredictable css rules order in build */
   justify-content: center;
 }
 .pc-SliderBlock__dots-list li.pc-SliderBlock__bar,
+.pc-SliderBlock__dots-list li.pc-SliderBlock__accessible-bar,
 .pc-SliderBlock__dots-list li.pc-SliderBlock__dot {
   margin: calc(12px / 2) 8px;
   top: 0;
@@ -155,13 +156,15 @@ unpredictable css rules order in build */
 .pc-SliderBlock__dot_active {
   background-color: var(--g-color-line-generic-active);
 }
-.pc-SliderBlock__bar {
+.pc-SliderBlock__bar, .pc-SliderBlock__accessible-bar {
   position: absolute;
   top: 12px;
   left: 0;
   width: 24px;
   height: 8px;
   border-radius: var(--pc-border-radius);
+}
+.pc-SliderBlock__bar {
   transition: left 0.3s;
   background-color: var(--pc-color-line-generic-active-solid);
 }

package/build/esm/blocks/Slider/Slider.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import _ from 'lodash';
 import SlickSlider from 'react-slick';
 import Anchor from '../../components/Anchor/Anchor';
@@ -118,27 +118,53 @@ export const SliderBlock = (props) => {
             slider.slickGoTo(nextIndex);
         }
     }, [slider, currentIndex, slidesCountByBreakpoint]);
+    const barSlidesCount = childrenCount - slidesToShowCount + 1;
+    const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
+    const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
     const renderBar = () => {
-        const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
-        const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
         return (slidesCountByBreakpoint > 1 && (React.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
                 width: barWidth,
             } })));
     };
+    // renders additional bar, not visible in the layout but visible for screenreaders
+    const renderAccessibleBar = (index) => {
+        return (
+        // To have this key differ from keys used in renderDot function, added `-accessible-bar` part
+        React.createElement(Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 1 && (React.createElement("li", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
+                left: barPosition,
+                width: barWidth,
+            } }))));
+    };
     const renderDot = (index) => {
-        return (React.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
+        const currentIndexDiff = index - currentIndex;
+        let currentSlideNumber;
+        if (0 <= currentIndexDiff && currentIndexDiff < slidesToShowCount) {
+            currentSlideNumber = currentIndex + 1;
+        }
+        else if (currentIndexDiff >= slidesToShowCount) {
+            currentSlideNumber = index - slidesToShowCount + 2;
+        }
+        else {
+            currentSlideNumber = index + 1;
+        }
+        return (React.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": (slidesCountByBreakpoint > 1 &&
+                0 <= currentIndexDiff &&
+                currentIndexDiff < slidesToShowCount) ||
+                undefined, "aria-label": `Slide ${currentSlideNumber} of ${barSlidesCount}` }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {
             return null;
         }
+        const dotsList = Array(childrenCount)
+            .fill(null)
+            .map((_item, index) => renderDot(index));
+        dotsList.splice(currentIndex, 0, renderAccessibleBar(currentIndex));
         return (React.createElement("div", { className: b('dots', dotsClassName) },
             React.createElement("ul", { className: b('dots-list') },
                 renderBar(),
-                Array(childrenCount)
-                    .fill(null)
-                    .map((_item, index) => renderDot(index)))));
+                dotsList)));
     };
     const renderDisclaimer = () => {
         return disclaimer ? (React.createElement("div", { className: b('disclaimer', { size: disclaimer.size || 'm' }) }, disclaimer.text)) : null;

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

@@ -0,0 +1,4 @@
+{
+  "arrow-right": "Next",
+  "arrow-left": "Previous"
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/blocks/Slider/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'SliderBlock';
+export default registerKeyset({ en, ru }, COMPONENT);

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

@@ -0,0 +1,4 @@
+{
+  "arrow-right": "Дальше",
+  "arrow-left": "Назад"
+}