@gravity-ui/page-constructor 4.1.2 → 4.4.1

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -18,6 +18,7 @@ const DEFAULT_SIZES = {
 };
 const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => {
     const theme = (0, theme_1.useTheme)();
+    const itemTitleHeadingTag = title ? 'h3' : 'h2';
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
         react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: b('header') }),
         react_1.default.createElement("div", { className: b('items') },
@@ -31,9 +32,12 @@ const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_S
                 return (react_1.default.createElement(grid_1.Col, { className: b('item'), key: text || itemTitle, sizes: colSizes },
                     iconData && react_1.default.createElement(Image_1.default, Object.assign({}, iconData, { className: b('icon') })),
                     react_1.default.createElement("div", { className: b('container') },
-                        itemTitle && (react_1.default.createElement("h5", { className: b('item-title') },
-                            react_1.default.createElement(components_1.HTML, null, itemTitle),
-                            label && (react_1.default.createElement("span", { className: b('item-label') }, label)))),
+                        itemTitle &&
+                            react_1.default.createElement(itemTitleHeadingTag, {
+                                className: b('item-title'),
+                            }, react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement(components_1.HTML, null, itemTitle),
+                                label && (react_1.default.createElement("span", { className: b('item-label') }, label)))),
                         react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
             })))));
 };

package/build/cjs/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -30,7 +30,7 @@ const PromoFeaturesBlock = (props) => {
                     [themeMod]: Boolean(themeMod),
                 }) },
                 react_1.default.createElement("div", { className: b('card-info') },
-                    react_1.default.createElement("h4", { className: b('card-title') }, cardTitle),
+                    react_1.default.createElement("h3", { className: b('card-title') }, cardTitle),
                     react_1.default.createElement("div", { className: b('card-text') },
                         react_1.default.createElement(YFMWrapper_1.default, { content: text, modifiers: { constructor: true } }))),
                 media && react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media') }, media))));

package/build/cjs/blocks/Questions/QuestionBlockItem/QuestionBlockItem.css

@@ -0,0 +1,50 @@
+.pc-QuestionsBlockItem__title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-QuestionsBlockItem {
+  padding-bottom: 32px;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pc-QuestionsBlockItem + .pc-QuestionsBlockItem {
+  padding-top: 32px;
+}
+.pc-QuestionsBlockItem__title {
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+  position: relative;
+  padding-right: 24px;
+  cursor: pointer;
+}
+.pc-QuestionsBlockItem__title a {
+  outline: none;
+  color: var(--g-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-QuestionsBlockItem__title a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-QuestionsBlockItem__title a:hover, .pc-QuestionsBlockItem__title a:active {
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
+}
+.pc-QuestionsBlockItem__arrow {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: var(--g-color-text-primary);
+}
+.pc-QuestionsBlockItem__link {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}
+.pc-QuestionsBlockItem__text {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  margin-top: 12px;
+}

package/build/cjs/blocks/Questions/QuestionBlockItem/QuestionBlockItem.d.ts

@@ -0,0 +1,2 @@
+import { QuestionBlockItemProps } from '../../../models';
+export declare const QuestionBlockItem: ({ title: itemTitle, text: itemText, link, listStyle, isOpened, onClick, }: QuestionBlockItemProps) => JSX.Element;

package/build/cjs/blocks/Questions/QuestionBlockItem/QuestionBlockItem.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuestionBlockItem = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../../components");
+const Link_1 = tslib_1.__importDefault(require("../../../components/Link/Link"));
+const utils_1 = require("../../../utils");
+const models_1 = require("../models");
+const b = (0, utils_1.block)('QuestionsBlockItem');
+const QuestionBlockItem = ({ title: itemTitle, text: itemText, link, listStyle = 'dash', isOpened, onClick, }) => {
+    const { onKeyDown } = (0, uikit_1.useActionHandlers)(onClick);
+    return (react_1.default.createElement("div", { className: b(), itemScope: true, itemProp: models_1.FaqMicrodataValues.QuestionProp, itemType: models_1.FaqMicrodataValues.QuestionType, role: 'listitem' },
+        react_1.default.createElement("h3", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, role: 'button', tabIndex: 0, onKeyDown: onKeyDown },
+            react_1.default.createElement(components_1.HTML, { itemProp: models_1.FaqMicrodataValues.QuestionNameProp }, itemTitle),
+            react_1.default.createElement(components_1.ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
+        react_1.default.createElement(components_1.Foldable, { isOpened: isOpened },
+            react_1.default.createElement("div", { className: b('text'), itemScope: true, itemProp: models_1.FaqMicrodataValues.AnswerProp, itemType: models_1.FaqMicrodataValues.AnswerType, "aria-hidden": !isOpened },
+                react_1.default.createElement(components_1.YFMWrapper, { content: itemText, modifiers: {
+                        constructor: true,
+                        constructorListStyle: true,
+                        constructorListStyleDash: listStyle === 'dash',
+                    }, itemProp: models_1.FaqMicrodataValues.QuestionTextProp }),
+                link && react_1.default.createElement(Link_1.default, Object.assign({}, link, { tabIndex: isOpened ? 0 : -1, className: b('link') }))))));
+};
+exports.QuestionBlockItem = QuestionBlockItem;

package/build/cjs/blocks/Questions/Questions.css

@@ -1,7 +1,3 @@
-.pc-QuestionsBlock__item-title {
-  margin: 0;
-}
-
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-QuestionsBlock__title {
@@ -10,50 +6,6 @@ unpredictable css rules order in build */
   margin-bottom: 32px;
   margin-right: 64px;
 }
-.pc-QuestionsBlock__item {
-  padding-bottom: 32px;
-  border-bottom: 1px solid var(--g-color-line-generic);
-}
-.pc-QuestionsBlock__item + .pc-QuestionsBlock__item {
-  padding-top: 32px;
-}
-.pc-QuestionsBlock__item-title {
-  font-size: var(--g-text-header-1-font-size);
-  line-height: var(--g-text-header-1-line-height);
-  color: var(--pc-text-header-color);
-  font-weight: var(--g-text-accent-font-weight);
-  position: relative;
-  padding-right: 24px;
-  cursor: pointer;
-}
-.pc-QuestionsBlock__item-title a {
-  outline: none;
-  color: var(--g-color-text-link);
-  text-decoration: none;
-  cursor: pointer;
-}
-.utilityfocus .pc-QuestionsBlock__item-title a:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-QuestionsBlock__item-title a:hover, .pc-QuestionsBlock__item-title a:active {
-  --pc-text-header-color: var(--g-color-text-link-hover);
-  color: var(--g-color-text-link-hover);
-}
-.pc-QuestionsBlock__text {
-  font-size: var(--g-text-body-2-font-size);
-  line-height: var(--g-text-body-2-line-height);
-  margin-top: 12px;
-}
-.pc-QuestionsBlock__arrow {
-  position: absolute;
-  right: 0;
-  top: 0;
-  color: var(--g-color-text-primary);
-}
-.pc-QuestionsBlock__link {
-  font-size: var(--g-text-body-2-font-size);
-  line-height: var(--g-text-body-2-line-height);
-}
 @media (max-width: 769px) {
   .pc-QuestionsBlock__title {
     margin-right: 0;

package/build/cjs/blocks/Questions/Questions.js

@@ -2,54 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const components_1 = require("../../components");
-const Link_1 = tslib_1.__importDefault(require("../../components/Link/Link"));
 const grid_1 = require("../../grid");
 const sub_blocks_1 = require("../../sub-blocks");
 const utils_1 = require("../../utils");
+const QuestionBlockItem_1 = require("./QuestionBlockItem/QuestionBlockItem");
+const models_1 = require("./models");
 const b = (0, utils_1.block)('QuestionsBlock');
-const FaqMicrodataValues = {
-    PageType: 'https://schema.org/FAQPage',
-    QuestionType: 'https://schema.org/Question',
-    QuestionProp: 'mainEntity',
-    QuestionNameProp: 'name',
-    QuestionTextProp: 'text',
-    AnswerType: 'https://schema.org/Answer',
-    AnswerProp: 'acceptedAnswer',
-    AnswerTextProp: 'text',
-};
 const QuestionsBlock = (props) => {
     const { title, text, additionalInfo, links, buttons, items } = props;
     const [opened, setOpened] = (0, react_1.useState)([0]);
     const toggleItem = (index) => {
         let newState;
         if (opened.includes(index)) {
-            newState = opened.filter((intemIndex) => intemIndex !== index);
+            newState = opened.filter((itemIndex) => itemIndex !== index);
         }
         else {
             newState = [...opened, index];
         }
         setOpened(newState);
     };
-    return (react_1.default.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType },
+    return (react_1.default.createElement("div", { className: b(), itemScope: true, itemType: models_1.FaqMicrodataValues.PageType },
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 4 } },
                 react_1.default.createElement("div", { className: b('title') },
                     react_1.default.createElement(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
-            react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 } }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
+            react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, role: 'list' }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
                 const isOpened = opened.includes(index);
-                return (react_1.default.createElement("div", { key: itemTitle, className: b('item'), itemScope: true, itemProp: FaqMicrodataValues.QuestionProp, itemType: FaqMicrodataValues.QuestionType },
-                    react_1.default.createElement("h4", { className: b('item-title'), onClick: () => toggleItem(index) },
-                        react_1.default.createElement(components_1.HTML, { itemProp: FaqMicrodataValues.QuestionNameProp }, itemTitle),
-                        react_1.default.createElement(components_1.ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
-                    react_1.default.createElement(components_1.Foldable, { isOpened: isOpened },
-                        react_1.default.createElement("div", { className: b('text'), itemScope: true, itemProp: FaqMicrodataValues.AnswerProp, itemType: FaqMicrodataValues.AnswerType },
-                            react_1.default.createElement(components_1.YFMWrapper, { content: itemText, modifiers: {
-                                    constructor: true,
-                                    constructorListStyle: true,
-                                    constructorListStyleDash: listStyle === 'dash',
-                                }, itemProp: FaqMicrodataValues.QuestionTextProp }),
-                            link && react_1.default.createElement(Link_1.default, Object.assign({}, link, { className: b('link') }))))));
+                const onClick = () => toggleItem(index);
+                return (react_1.default.createElement(QuestionBlockItem_1.QuestionBlockItem, { key: itemTitle, title: itemTitle, text: itemText, link: link, listStyle: listStyle, isOpened: isOpened, onClick: onClick }));
             })))));
 };
 exports.default = QuestionsBlock;

package/build/cjs/blocks/Questions/models.d.ts

@@ -0,0 +1,10 @@
+export declare const FaqMicrodataValues: {
+    readonly PageType: "https://schema.org/FAQPage";
+    readonly QuestionType: "https://schema.org/Question";
+    readonly QuestionProp: "mainEntity";
+    readonly QuestionNameProp: "name";
+    readonly QuestionTextProp: "text";
+    readonly AnswerType: "https://schema.org/Answer";
+    readonly AnswerProp: "acceptedAnswer";
+    readonly AnswerTextProp: "text";
+};

package/build/cjs/blocks/Questions/models.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FaqMicrodataValues = void 0;
+exports.FaqMicrodataValues = {
+    PageType: 'https://schema.org/FAQPage',
+    QuestionType: 'https://schema.org/Question',
+    QuestionProp: 'mainEntity',
+    QuestionNameProp: 'name',
+    QuestionTextProp: 'text',
+    AnswerType: 'https://schema.org/Answer',
+    AnswerProp: 'acceptedAnswer',
+    AnswerTextProp: 'text',
+};

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

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { ButtonSize } from '@gravity-ui/uikit';
+import { Tabbable } from '../../models';
 export type Theme = 'default' | 'special';
-export interface BackLinkProps {
+export interface BackLinkProps extends Tabbable {
     url: string;
     title: ReactNode;
     theme?: Theme;

package/build/cjs/components/BackLink/BackLink.js

@@ -9,7 +9,7 @@ const icons_1 = require("../../icons");
 const models_1 = require("../../models");
 function BackLink(props) {
     const { history } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, } = props;
+    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, tabIndex, } = props;
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ShareButton, url);
     const backActionHandler = (0, react_1.useCallback)(async () => {
         handleAnalytics();
@@ -26,7 +26,7 @@ function BackLink(props) {
             history.push({ pathname: url });
         }
     }, [handleAnalytics, history, onClick, url]);
-    return (react_1.default.createElement(uikit_1.Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined },
+    return (react_1.default.createElement(uikit_1.Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined, tabIndex: tabIndex },
         react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowSidebar, size: 24 }),
         react_1.default.createElement("span", null, title)));
 }

package/build/cjs/components/FileLink/FileLink.js

@@ -41,13 +41,13 @@ const LabelSizeMap = {
 };
 const FileLink = (props) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, } = props;
+    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, } = props;
     const fileExt = getFileExt(href);
     const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
     const labelSize = LabelSizeMap[textSize];
     return (react_1.default.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         react_1.default.createElement(uikit_1.Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         react_1.default.createElement("div", { className: b('link') },
-            react_1.default.createElement("a", Object.assign({ href: href }, (0, utils_1.getLinkProps)(href, hostname), { onClick: onClick }), text))));
+            react_1.default.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex }, (0, utils_1.getLinkProps)(href, hostname)), text))));
 };
 exports.default = FileLink;

package/build/cjs/components/FullscreenImage/FullscreenImage.js

@@ -25,7 +25,7 @@ const FullscreenImage = (props) => {
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.Fullscreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
         isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             react_1.default.createElement("div", { className: b('modal-content') },
-                react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
+                react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.default)('close') },
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };

package/build/cjs/components/FullscreenImage/i18n/en.json

@@ -1,3 +1,4 @@
 {
-  "img-alt": "Full screen image"
+  "img-alt": "Full screen image",
+  "close": "Close"
 }

package/build/cjs/components/FullscreenImage/i18n/ru.json

@@ -1,3 +1,4 @@
 {
-  "img-alt": "Полноэкранное изображение"
+  "img-alt": "Полноэкранное изображение",
+  "close": "Закрыть"
 }

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

@@ -5,12 +5,14 @@ export interface HTMLProps {
     block?: boolean;
     className?: string;
     itemProp?: string;
+    id?: string;
 }
-declare const HTML: ({ children, block, className, itemProp }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ children, block, className, itemProp, id }: WithChildren<HTMLProps>) => 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;
 }, 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 }) => {
+const HTML = ({ children, block = false, className, itemProp, id }) => {
     if (!children) {
         return null;
     }
@@ -11,6 +11,7 @@ const HTML = ({ children, block = false, className, itemProp }) => {
         dangerouslySetInnerHTML: { __html: children },
         className,
         itemProp,
+        id,
     });
 };
 exports.default = HTML;

package/build/cjs/components/Image/i18n/en.json

@@ -1,3 +1,3 @@
 {
-  "img-alt": "Image alt"
+  "img-alt": ""
 }

package/build/cjs/components/Image/i18n/ru.json

@@ -1,3 +1,3 @@
 {
-  "img-alt": "Альтернатива изображению"
+  "img-alt": ""
 }

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

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

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const localeContext_1 = require("../../context/localeContext/localeContext");
-const locationContext_1 = require("../../context/locationContext/locationContext");
+const localeContext_1 = require("../../context/localeContext");
+const locationContext_1 = require("../../context/locationContext");
 const hooks_1 = require("../../hooks");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const icons_1 = require("../../icons");
@@ -27,7 +27,7 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, } = props;
     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);
@@ -41,14 +41,14 @@ const LinkBlock = (props) => {
     const getLinkByType = () => {
         switch (theme) {
             case 'back':
-                return react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick });
+                return (react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick, tabIndex: tabIndex }));
             case 'file-link':
             case 'underline':
-                return (react_1.default.createElement(FileLink_1.default, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick }));
+                return (react_1.default.createElement(FileLink_1.default, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick, tabIndex: tabIndex }));
             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 }, 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), 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/Media/Media.js

@@ -11,8 +11,7 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, } = props;
-    const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const content = (0, react_1.useMemo)(() => {
         let result = [];

package/build/cjs/components/Media/Video/Video.js

@@ -30,8 +30,8 @@ const Video = (props) => {
         }
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
-        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
-        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height }));
+        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, } = video;
+        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel }));
     }, [
         video,
         height,
@@ -48,7 +48,7 @@ const Video = (props) => {
             react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
                 // eslint-disable-next-line react/no-unknown-property
-                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type })))))) : null;
+                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true, "aria-label": video.ariaLabel }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type })))))) : null;
     }, [video, videoClassName, hasVideoFallback, height]);
     switch (video.type) {
         case models_1.MediaVideoType.Player:

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -14,6 +14,7 @@ const icons_1 = require("../../icons");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const CustomBarControls_1 = tslib_1.__importDefault(require("./CustomBarControls"));
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
@@ -21,7 +22,7 @@ const FPS = 60;
 exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { metrika } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, } = props;
     const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -105,7 +106,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 playButtonContent = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 });
                 break;
         }
-        return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName) }, playButtonContent));
+        return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": (0, i18n_1.default)('play') }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = (0, react_1.useCallback)((isMuted) => {
         if (isMuted && playerRef) {
@@ -195,7 +196,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
     return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
-        react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
+        react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
         renderCustomBarControls(muted, playedPercent)));
 });
 function getHeight(width) {

package/build/cjs/components/ReactPlayer/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "play": "Play"
+}

package/build/cjs/components/ReactPlayer/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/components/ReactPlayer/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 = 'ReactPlayer';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/components/ReactPlayer/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "play": "Воспроизвести"
+}

package/build/cjs/components/Table/Table.js

@@ -4,28 +4,34 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const __1 = require("../");
 const utils_1 = require("../../utils");
+function getMarkerId(index) {
+    if (isNaN(index)) {
+        return undefined;
+    }
+    return `marker-${index}`;
+}
 const b = (0, utils_1.block)('table');
 class Table extends react_1.default.Component {
     render() {
-        const { content, legend, marker = 'disk', className } = this.props;
+        const { content, legend, marker = 'disk', className, caption } = this.props;
         if (!content || !content.length || !content[0].length) {
             return null;
         }
-        return (react_1.default.createElement("div", { className: b(null, className) },
+        return (react_1.default.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
             this.renderTable(content, marker, legend),
             legend && this.renderLegend(legend, marker)));
     }
     renderTable(content, marker, legend) {
         const justify = this.getDefaultJustify(content, this.props.justify);
-        return (react_1.default.createElement("div", { className: b('table') }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row') }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }) }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
+        return (react_1.default.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
     }
     renderMarker(type, cell) {
-        return react_1.default.createElement("div", { className: b('marker', { type, index: String(cell) }) });
+        return (react_1.default.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
     }
     renderLegend(legend, marker) {
         return (react_1.default.createElement("div", { className: b('legend') }, legend.map((item, index) => (react_1.default.createElement("div", { key: item, className: b('legend-item') },
             this.renderMarker(marker, String(index)),
-            react_1.default.createElement(__1.YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true } }))))));
+            react_1.default.createElement(__1.YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
     }
     getDefaultJustify(content, justify) {
         return justify || new Array(content[0].length).fill('center');

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

@@ -1,9 +1,9 @@
 import { ClassNameProps, Modifiers } from '../../models';
-export interface YFMWrapperProps {
-    className?: string;
+export interface YFMWrapperProps extends ClassNameProps {
     content: string;
     modifiers?: Modifiers;
     itemProp?: string;
+    id?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, id }: 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, }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp }, content));
+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));
 exports.default = YFMWrapper;

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

@@ -1,8 +1,4 @@
 import { Theme } from '../models';
 export declare const DEFAULT_THEME = Theme.Light;
 export declare const UIKIT_ROOT_CLASS = "g-root";
-export declare const KEY: {
-    ENTER: string;
-    TAB: string;
-};
 export declare const HEADER_HEIGHT = 64;

package/build/cjs/components/constants.js

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HEADER_HEIGHT = exports.KEY = exports.UIKIT_ROOT_CLASS = exports.DEFAULT_THEME = void 0;
+exports.HEADER_HEIGHT = exports.UIKIT_ROOT_CLASS = exports.DEFAULT_THEME = void 0;
 const models_1 = require("../models");
 exports.DEFAULT_THEME = models_1.Theme.Light;
 exports.UIKIT_ROOT_CLASS = 'g-root';
-exports.KEY = {
-    ENTER: 'Enter',
-    TAB: 'Tab',
-};
 exports.HEADER_HEIGHT = 64;