@gravity-ui/page-constructor 4.1.2 → 4.3.12-alpha.3

package/build/esm/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/esm/blocks/Questions/Questions.js

@@ -1,28 +1,18 @@
 import React, { useState } from 'react';
-import { Foldable, HTML, ToggleArrow, YFMWrapper } from '../../components';
-import Link from '../../components/Link/Link';
 import { Col, Row } from '../../grid';
 import { Content } from '../../sub-blocks';
 import { block } from '../../utils';
+import { QuestionBlockItem } from './QuestionBlockItem/QuestionBlockItem';
+import { FaqMicrodataValues } from './models';
 import './Questions.css';
 const b = 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] = 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];
@@ -34,20 +24,10 @@ const QuestionsBlock = (props) => {
             React.createElement(Col, { sizes: { all: 12, md: 4 } },
                 React.createElement("div", { className: b('title') },
                     React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
-            React.createElement(Col, { sizes: { all: 12, md: 8 } }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
+            React.createElement(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.createElement("div", { key: itemTitle, className: b('item'), itemScope: true, itemProp: FaqMicrodataValues.QuestionProp, itemType: FaqMicrodataValues.QuestionType },
-                    React.createElement("h4", { className: b('item-title'), onClick: () => toggleItem(index) },
-                        React.createElement(HTML, { itemProp: FaqMicrodataValues.QuestionNameProp }, itemTitle),
-                        React.createElement(ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
-                    React.createElement(Foldable, { isOpened: isOpened },
-                        React.createElement("div", { className: b('text'), itemScope: true, itemProp: FaqMicrodataValues.AnswerProp, itemType: FaqMicrodataValues.AnswerType },
-                            React.createElement(YFMWrapper, { content: itemText, modifiers: {
-                                    constructor: true,
-                                    constructorListStyle: true,
-                                    constructorListStyleDash: listStyle === 'dash',
-                                }, itemProp: FaqMicrodataValues.QuestionTextProp }),
-                            link && React.createElement(Link, Object.assign({}, link, { className: b('link') }))))));
+                const onClick = () => toggleItem(index);
+                return (React.createElement(QuestionBlockItem, { key: itemTitle, title: itemTitle, text: itemText, link: link, listStyle: listStyle, isOpened: isOpened, onClick: onClick }));
             })))));
 };
 export default QuestionsBlock;

package/build/esm/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/esm/blocks/Questions/models.js

@@ -0,0 +1,10 @@
+export 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',
+};

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": "Назад"
+}

package/build/esm/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/esm/components/BackLink/BackLink.js

@@ -6,7 +6,7 @@ import { ArrowSidebar } from '../../icons';
 import { DefaultEventNames } from '../../models';
 export default function BackLink(props) {
     const { history } = useContext(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 = useAnalytics(DefaultEventNames.ShareButton, url);
     const backActionHandler = useCallback(async () => {
         handleAnalytics();
@@ -23,7 +23,7 @@ export default function BackLink(props) {
             history.push({ pathname: url });
         }
     }, [handleAnalytics, history, onClick, url]);
-    return (React.createElement(Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined },
+    return (React.createElement(Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined, tabIndex: tabIndex },
         React.createElement(Icon, { data: ArrowSidebar, size: 24 }),
         React.createElement("span", null, title)));
 }

package/build/esm/components/BackgroundImage/BackgroundImage.d.ts

@@ -1,4 +1,5 @@
 import { BackgroundImageProps, WithChildren } from '../../models';
 import './BackgroundImage.css';
+export declare const qaIdByDefault = "background-image";
 declare const BackgroundImage: (props: WithChildren<BackgroundImageProps>) => JSX.Element;
 export default BackgroundImage;

package/build/esm/components/BackgroundImage/BackgroundImage.js

@@ -1,12 +1,14 @@
 import React from 'react';
-import { block } from '../../utils';
+import { block, getQaAttrubutes } from '../../utils';
 import Image from '../Image/Image';
 import './BackgroundImage.css';
+export const qaIdByDefault = 'background-image';
 const b = block('storage-background-image');
 const BackgroundImage = (props) => {
     const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
-    return (React.createElement("div", { className: b(null, className), style: style, "data-qa": qa },
-        (src || desktop) && !hide && React.createElement(Image, Object.assign({}, props, { className: b('img', imageClassName) })),
+    const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);
+    return (React.createElement("div", { className: b(null, className), style: style, "data-qa": qa || qaIdByDefault },
+        (src || desktop) && !hide && (React.createElement(Image, Object.assign({}, props, { className: b('img', imageClassName), qa: qaAttributes.image }))),
         children && React.createElement("div", { className: b('container') }, children)));
 };
 export default BackgroundImage;

package/build/esm/components/BackgroundMedia/BackgroundMedia.d.ts

@@ -1,4 +1,4 @@
 import { BackgroundMediaProps } from '../../models';
 import './BackgroundMedia.css';
-declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, fullWidthMedia, ...props }: BackgroundMediaProps) => JSX.Element;
+declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, fullWidthMedia, qa, ...props }: BackgroundMediaProps) => JSX.Element;
 export default BackgroundMedia;

package/build/esm/components/BackgroundMedia/BackgroundMedia.js

@@ -1,16 +1,17 @@
 import { __rest } from "tslib";
 import React, { useContext } from 'react';
 import { MobileContext } from '../../context/mobileContext';
-import { block } from '../../utils';
+import { block, getQaAttrubutes } from '../../utils';
 import AnimateBlock from '../AnimateBlock/AnimateBlock';
 import Media from '../Media/Media';
 import './BackgroundMedia.css';
 const b = block('BackgroundMedia');
 const BackgroundMedia = (_a) => {
-    var { className, color, animated, parallax = true, video, mediaClassName, fullWidthMedia } = _a, props = __rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName", "fullWidthMedia"]);
+    var { className, color, animated, parallax = true, video, mediaClassName, fullWidthMedia, qa } = _a, props = __rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName", "fullWidthMedia", "qa"]);
     const isMobile = useContext(MobileContext);
-    return (React.createElement(AnimateBlock, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
-        React.createElement(Media, Object.assign({ className: b('media', { 'full-width-media': fullWidthMedia }, mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
+    const qaAttributes = getQaAttrubutes(qa, 'media');
+    return (React.createElement(AnimateBlock, { className: b(null, className), style: { backgroundColor: color }, animate: animated, qa: qaAttributes.animate },
+        React.createElement(Media, Object.assign({ className: b('media', { 'full-width-media': fullWidthMedia }, mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, qa: qaAttributes.media }, Object.assign({ height: 720, color,
             parallax, video: isMobile ? undefined : video }, props)))));
 };
 export default BackgroundMedia;

package/build/esm/components/ButtonTabs/ButtonTabs.js

@@ -15,6 +15,11 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', q
             onSelectTab(tabId, e);
         }
     }, [onSelectTab]);
-    return (React.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => (React.createElement(Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: handleClick(id) })))));
+    return (React.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => {
+        const isActive = id === activeTabId;
+        return (React.createElement(Button, { text: title, className: b('item', { active: isActive }), key: title, size: tabSize, onClick: handleClick(id), extraProps: {
+                'aria-current': isActive,
+            } }));
+    })));
 };
 export default ButtonTabs;

package/build/esm/components/CardBase/CardBase.css

@@ -22,9 +22,6 @@ unpredictable css rules order in build */
 .pc-card-base-block_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
-.pc-card-base-block_border_line, .pc-card-base-block_border_none {
-  cursor: default;
-}
 @media (min-width: 577px) {
   .slick-slide:not(.slick-active) .pc-card-base-block {
     box-shadow: none;
@@ -80,7 +77,10 @@ a.pc-card-base-block_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
 a.pc-card-base-block_border_line, a.pc-card-base-block_border_none {
-  cursor: default;
+  transition: transform 0.3s ease-out;
+}
+a.pc-card-base-block_border_line:hover, a.pc-card-base-block_border_none:hover {
+  transform: translateY(-8px);
 }
 a.pc-card-base-block_border_shadow {
   transition: transform 0.3s ease-out;

package/build/esm/components/FileLink/FileLink.js

@@ -37,13 +37,13 @@ const LabelSizeMap = {
 };
 const FileLink = (props) => {
     const { hostname } = useContext(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.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         React.createElement(Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         React.createElement("div", { className: b('link') },
-            React.createElement("a", Object.assign({ href: href }, getLinkProps(href, hostname), { onClick: onClick }), text))));
+            React.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex }, getLinkProps(href, hostname)), text))));
 };
 export default FileLink;

package/build/esm/components/FullscreenImage/FullscreenImage.js

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

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

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

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

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

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

@@ -1,16 +1,20 @@
 import React from 'react';
 import { WithChildren } from '../../models';
+import { QAProps } from '../../models/common';
 export interface HTMLProps {
     children?: string;
     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, 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/esm/components/HTML/HTML.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { hasBlockTag } from '../../utils';
-const HTML = ({ children, block = false, className, itemProp }) => {
+const HTML = ({ children, block = false, className, itemProp, id, qa, }) => {
     if (!children) {
         return null;
     }
@@ -8,6 +8,8 @@ const HTML = ({ children, block = false, className, itemProp }) => {
         dangerouslySetInnerHTML: { __html: children },
         className,
         itemProp,
+        id,
+        'data-qa': qa,
     });
 };
 export default HTML;

package/build/esm/components/Image/Image.js

@@ -1,6 +1,7 @@
 import React, { Fragment, useContext, useState } from 'react';
 import { BREAKPOINTS } from '../../constants';
 import { ProjectSettingsContext } from '../../context/projectSettingsContext';
+import { getQaAttrubutes } from '../../utils';
 import { isCompressible } from '../../utils/imageCompress';
 import ImageBase from '../ImageBase/ImageBase';
 import i18n from './i18n';
@@ -15,18 +16,19 @@ const Image = (props) => {
     if (!src) {
         return null;
     }
+    const qaAttributes = getQaAttrubutes(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'display-source');
     const disableWebp = projectSettings.disableCompress ||
         disableCompress ||
         !isCompressible(src) ||
         imgLoadingError;
     return (React.createElement("picture", { className: containerClassName, "data-qa": qa },
         mobile && (React.createElement(Fragment, null,
-            !disableWebp && (React.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${BREAKPOINTS.sm}px)` })),
-            React.createElement("source", { srcSet: mobile, media: `(max-width: ${BREAKPOINTS.sm}px)` }))),
+            !disableWebp && (React.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${BREAKPOINTS.sm}px)`, "data-qa": qaAttributes.mobileWebpSource })),
+            React.createElement("source", { srcSet: mobile, media: `(max-width: ${BREAKPOINTS.sm}px)`, "data-qa": qaAttributes.mobileSource }))),
         tablet && (React.createElement(Fragment, null,
-            !disableWebp && (React.createElement("source", { srcSet: checkWebP(tablet), type: "image/webp", media: `(max-width: ${BREAKPOINTS.md}px)` })),
-            React.createElement("source", { srcSet: tablet, media: `(max-width: ${BREAKPOINTS.md}px)` }))),
-        src && !disableWebp && React.createElement("source", { srcSet: checkWebP(src), type: "image/webp" }),
+            !disableWebp && (React.createElement("source", { srcSet: checkWebP(tablet), type: "image/webp", media: `(max-width: ${BREAKPOINTS.md}px)`, "data-qa": qaAttributes.tabletWebpSource })),
+            React.createElement("source", { srcSet: tablet, media: `(max-width: ${BREAKPOINTS.md}px)`, "data-qa": qaAttributes.tabletSource }))),
+        src && !disableWebp && (React.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.displaySource })),
         React.createElement(ImageBase, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
 };
 export default Image;

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

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

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

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

package/build/esm/components/Image/schema.d.ts

@@ -34,6 +34,25 @@ export declare const ImageObjectProps: {
             type: string;
             pattern: string;
         };
+        style: {
+            type: string;
+            additionalProperties: boolean;
+            required: never[];
+            properties: {
+                backgroundColor: {
+                    type: string;
+                };
+                height: {
+                    type: string[];
+                };
+                width: {
+                    type: string[];
+                };
+                color: {
+                    type: string;
+                };
+            };
+        };
         alt: {
             type: string;
             contentType: string;

package/build/esm/components/Image/schema.js

@@ -9,6 +9,17 @@ const ImageBase = {
         type: 'boolean',
     },
 };
+const StyleBase = {
+    type: 'object',
+    additionalProperties: false,
+    required: [],
+    properties: {
+        backgroundColor: { type: 'string' },
+        height: { type: ['string', 'number'] },
+        width: { type: ['string', 'number'] },
+        color: { type: 'string' },
+    },
+};
 export const ImageDeviceProps = {
     type: 'object',
     additionalProperties: false,
@@ -28,7 +39,7 @@ export const ImageObjectProps = {
     properties: Object.assign(Object.assign({}, ImageBase), { src: {
             type: 'string',
             pattern: imageUrlPattern,
-        } }),
+        }, style: StyleBase }),
 };
 export const ImageProps = {
     oneOf: [

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

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

package/build/esm/components/Link/Link.js

@@ -1,12 +1,13 @@
 import React, { Fragment, useContext } from 'react';
 import { Icon } from '@gravity-ui/uikit';
-import { LocaleContext } from '../../context/localeContext/localeContext';
-import { LocationContext } from '../../context/locationContext/locationContext';
+import { LocaleContext } from '../../context/localeContext';
+import { LocationContext } from '../../context/locationContext';
 import { useAnalytics } from '../../hooks';
 import { useMetrika } from '../../hooks/useMetrika';
 import { Chevron } from '../../icons';
-import { DefaultEventNames } from '../../models';
+import { DefaultEventNames, } from '../../models';
 import { block, getLinkProps, setUrlTld } from '../../utils';
+import { getQaAttrubutes } from '../../utils/index';
 import BackLink from '../BackLink/BackLink';
 import FileLink from '../FileLink/FileLink';
 import './Link.css';
@@ -25,7 +26,8 @@ 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, qa, } = props;
+    const qaAttributes = getQaAttrubutes(qa, ['normal']);
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.Link, url);
     const { hostname } = useContext(LocationContext);
@@ -39,14 +41,14 @@ const LinkBlock = (props) => {
     const getLinkByType = () => {
         switch (theme) {
             case 'back':
-                return React.createElement(BackLink, { title: children || text, url: href, onClick: onClick });
+                return (React.createElement(BackLink, { title: children || text, url: href, onClick: onClick, tabIndex: tabIndex }));
             case 'file-link':
             case 'underline':
-                return (React.createElement(FileLink, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick }));
+                return (React.createElement(FileLink, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick, tabIndex: tabIndex }));
             case 'normal': {
                 const linkProps = getLinkProps(url, hostname, target);
                 const content = children || text;
-                return (React.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick }, linkProps), arrow ? (React.createElement(Fragment, null,
+                return (React.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.createElement(Fragment, null,
                     React.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     React.createElement(Icon, { className: b('arrow'), data: Chevron, size: getArrowSize(textSize) }))) : (content)));