@gravity-ui/page-constructor 2.12.0-alpha → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.12.0](https://github.com/gravity-ui/page-constructor/compare/v2.11.0...v2.12.0) (2023-04-25)
+
+
+### Features
+
+* add alt to img ([#309](https://github.com/gravity-ui/page-constructor/issues/309)) ([a1e5587](https://github.com/gravity-ui/page-constructor/commit/a1e5587ada92b53097ac77f16c1cdad7a4899219))
+
 ## [2.11.0](https://github.com/gravity-ui/page-constructor/compare/v2.10.0...v2.11.0) (2023-04-25)
 
 

package/build/cjs/blocks/Security/Security.js

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const components_1 = require("../../components");
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, utils_1.block)('SecurityBlock');
 const SecurityBlock = (props) => {
     const { backgroundColor, theme = 'dark', title, points, media, animated } = props;
@@ -17,7 +18,7 @@ const SecurityBlock = (props) => {
                     react_1.default.createElement(grid_1.Col, null,
                         react_1.default.createElement("h2", { className: b('title') }, title))),
                 points && (react_1.default.createElement(grid_1.Row, { className: b('points') }, points.map(({ text, link, img }, index) => (react_1.default.createElement(grid_1.Col, { key: index, className: b('point'), sizes: { sm: 4, all: 12 } },
-                    react_1.default.createElement(components_1.ImageBase, { className: b('point-icon'), src: img }),
+                    react_1.default.createElement(components_1.ImageBase, { className: b('point-icon'), src: img, alt: text || (0, i18n_1.default)('image-alt') }),
                     react_1.default.createElement(components_1.HTML, { className: b('point-text'), block: true }, text),
                     link && (react_1.default.createElement(components_1.Link, { className: b('point-link'), text: link.text, url: link.url, theme: 'normal', arrow: true }))))))),
                 media && (react_1.default.createElement(grid_1.Row, { className: b('media') },

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

@@ -0,0 +1,3 @@
+{
+  "image-alt": "Point icon"
+}

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

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

@@ -0,0 +1,3 @@
+{
+  "image-alt": "Иконка"
+}

package/build/cjs/components/Button/Button.js

@@ -9,7 +9,7 @@ const useMetrika_1 = require("../../hooks/useMetrika");
 const icons_1 = require("../../icons");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
-const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase"));
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('button-block');
 const Button = (props) => {
@@ -37,7 +37,7 @@ const Button = (props) => {
         return react_1.default.createElement(uikit_1.StoreBadge, { className: buttonClass, platform: platform, lang: lang, url: url });
     }
     let icon;
-    let image = img && react_1.default.createElement(ImageBase_1.default, { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
+    let image = img && (react_1.default.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt || (0, i18n_1.default)('image-alt') }));
     if (theme === 'github') {
         icon = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.Github, size: 24, qa: utils_2.ICON_QA });
         image = undefined;

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

@@ -0,0 +1,3 @@
+{
+  "image-alt": "Button image"
+}

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

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

@@ -0,0 +1,3 @@
+{
+  "image-alt": "Иконка кнопки"
+}

package/build/cjs/components/Control/Control.js

@@ -4,10 +4,11 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, utils_1.block)('control');
 const Control = (props) => {
     const { icon, theme = 'primary', size = 's', iconSize = 16, disabled = false, onClick, className, } = props;
-    return (react_1.default.createElement("button", { type: "button", className: b({ size, theme, disabled }, className), onClick: disabled ? undefined : onClick, disabled: disabled },
+    return (react_1.default.createElement("button", { type: "button", "aria-label": (0, i18n_1.default)('aria-label'), className: b({ size, theme, disabled }, className), onClick: disabled ? undefined : onClick, disabled: disabled },
         react_1.default.createElement(uikit_1.Icon, { data: icon, size: iconSize })));
 };
 exports.default = Control;

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

@@ -0,0 +1,3 @@
+{
+  "aria-label": "Button label"
+}

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

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

@@ -0,0 +1,3 @@
+{
+  "aria-label": "Лейбл кнопки"
+}

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

@@ -6,11 +6,12 @@ const uikit_1 = require("@gravity-ui/uikit");
 const icons_1 = require("../../icons");
 const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, utils_1.block)('FullScreenImage');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 const FullScreenImage = (props) => {
-    const { imageClassName, modalImageClass, imageStyle } = props;
+    const { imageClassName, modalImageClass, imageStyle, alt = (0, i18n_1.default)('img-alt') } = props;
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const [isMouseEnter, setIsMouseEnter] = (0, react_1.useState)(false);
     const openModal = () => setIsOpened(true);
@@ -19,7 +20,7 @@ const FullScreenImage = (props) => {
     const hideFullScreenIcon = () => setIsMouseEnter(false);
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullScreenIcon, onMouseLeave: hideFullScreenIcon },
-            react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
+            react_1.default.createElement(Image_1.default, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             react_1.default.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal },
                 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') },

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

@@ -0,0 +1,3 @@
+{
+  "img-alt": "Full screen image"
+}

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

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

@@ -0,0 +1,3 @@
+{
+  "img-alt": "Полноэкранное изображение"
+}

package/build/cjs/components/Image/Image.js

@@ -6,12 +6,13 @@ const constants_1 = require("../../constants");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
 const imageCompress_1 = require("../../utils/imageCompress");
 const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase"));
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
 const Image = (props) => {
     const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
-    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
+    const { src: imageSrc, alt = (0, i18n_1.default)('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
     const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
     const src = imageSrc || desktop;
     if (!src) {

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

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

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

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

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

package/build/cjs/components/Map/GoogleMap.js

@@ -39,6 +39,6 @@ const GoogleMap = (props) => {
     }
     return (react_1.default.createElement("iframe", { className: b(), ref: ref, style: {
             height,
-        }, loading: "lazy", allowFullScreen: true, referrerPolicy: "no-referrer-when-downgrade", src: src }));
+        }, title: "Google Map", loading: "lazy", allowFullScreen: true, referrerPolicy: "no-referrer-when-downgrade", src: src }));
 };
 exports.default = GoogleMap;

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

@@ -3,12 +3,13 @@ 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 i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('media-component-data-lens');
 const DataLens = (props) => {
     const { dataLens } = props;
     const dataLensData = (0, utils_2.unifyDataLensToObject)(dataLens);
     return dataLens ? (react_1.default.createElement("div", { className: b('wrap') },
-        react_1.default.createElement("iframe", { src: `https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}`, className: b('iframe'), frameBorder: 0 }))) : null;
+        react_1.default.createElement("iframe", { src: `https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}`, className: b('iframe'), loading: "lazy", title: (0, i18n_1.default)('iframe-title'), frameBorder: 0 }))) : null;
 };
 exports.default = DataLens;

package/build/cjs/components/Media/DataLens/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Datalens frame"
+}

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

package/build/cjs/components/Media/DataLens/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм данных"
+}

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

@@ -4,8 +4,6 @@ export interface OverflowScrollerProps {
     className?: string;
     onScrollStart?: () => void;
     onScrollEnd?: () => void;
-    arrowSize?: number;
-    arrowClassName?: string;
 }
 export interface OverflowScrollerState {
     arrows: Arrow[];

package/build/cjs/components/OverflowScroller/OverflowScroller.js

@@ -8,7 +8,6 @@ const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('overflow-scroller');
 const TRANSITION_TIME = 300;
 const PADDING_SIZE = 24;
-const DEFAULT_ARROW_SIZE = 18;
 class OverflowScroller extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -73,7 +72,7 @@ class OverflowScroller extends react_1.default.Component {
         window.removeEventListener('resize', this.checkOverflow);
     }
     render() {
-        const { className, arrowClassName, children, arrowSize = DEFAULT_ARROW_SIZE } = this.props;
+        const { className, children } = this.props;
         const { arrows, scrollValue } = this.state;
         const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
         const paddingLeft = arrows.includes('left');
@@ -84,8 +83,8 @@ class OverflowScroller extends react_1.default.Component {
             }) },
             react_1.default.createElement("div", { className: b(null, className), ref: this.containerRef },
                 react_1.default.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
-            arrows.map((direction) => (react_1.default.createElement("div", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction) },
-                react_1.default.createElement(__1.ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }))))));
+            arrows.map((direction) => (react_1.default.createElement("div", { key: direction, className: b('arrow', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
+                react_1.default.createElement(__1.ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
     }
 }
 exports.default = OverflowScroller;

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -9,6 +9,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const icons_1 = require("../../icons");
 const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const RECORD_URL = 'https://www.youtube.com/embed/';
 const STREAM_URL = 'https://www.youtube.com/embed/live_stream?channel=';
 const RECORD_RE = /[0-9A-Za-z_-]{11}/;
@@ -73,9 +74,11 @@ const VideoBlock = (props) => {
             iframe.src = fullSrc;
             iframe.width = '100%';
             iframe.height = '100%';
+            iframe.title = (0, i18n_1.default)('iframe-title');
             iframe.frameBorder = '0';
             iframe.setAttribute('allowfullscreen', 'true');
             iframe.setAttribute('allow', 'autoplay');
+            iframe.setAttribute('loading', 'lazy');
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }

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

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Video frame"
+}

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

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

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм видеоблока"
+}

package/build/cjs/components/YandexForm/YandexForm.js

@@ -48,6 +48,7 @@ const YandexForm = (props) => {
             iframeRef.current.src = src;
             iframeRef.current.id = containerId;
             iframeRef.current.name = `form${id}`;
+            iframeRef.current.setAttribute('loading', 'lazy');
             iframeRef.current.frameBorder = '0';
             iframeRef.current.scrolling = 'no';
             iframeRef.current.width = '100%';

package/build/esm/blocks/Security/Security.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { AnimateBlock, FullWidthBackground, HTML, ImageBase, Link, Media } from '../../components';
 import { Col, Grid, Row } from '../../grid';
 import { block } from '../../utils';
+import i18n from './i18n';
 import './Security.css';
 const b = block('SecurityBlock');
 export const SecurityBlock = (props) => {
@@ -14,7 +15,7 @@ export const SecurityBlock = (props) => {
                     React.createElement(Col, null,
                         React.createElement("h2", { className: b('title') }, title))),
                 points && (React.createElement(Row, { className: b('points') }, points.map(({ text, link, img }, index) => (React.createElement(Col, { key: index, className: b('point'), sizes: { sm: 4, all: 12 } },
-                    React.createElement(ImageBase, { className: b('point-icon'), src: img }),
+                    React.createElement(ImageBase, { className: b('point-icon'), src: img, alt: text || i18n('image-alt') }),
                     React.createElement(HTML, { className: b('point-text'), block: true }, text),
                     link && (React.createElement(Link, { className: b('point-link'), text: link.text, url: link.url, theme: 'normal', arrow: true }))))))),
                 media && (React.createElement(Row, { className: b('media') },

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

@@ -0,0 +1,3 @@
+{
+  "image-alt": "Point icon"
+}

package/build/esm/blocks/Security/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/Security/i18n/index.js

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

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

@@ -0,0 +1,3 @@
+{
+  "image-alt": "Иконка"
+}

package/build/esm/components/Button/Button.js

@@ -7,7 +7,7 @@ import { useMetrika } from '../../hooks/useMetrika';
 import { Github } from '../../icons';
 import { DefaultEventNames } from '../../models';
 import { block, setUrlTld } from '../../utils';
-import ImageBase from '../ImageBase/ImageBase';
+import i18n from './i18n';
 import { ICON_QA, toCommonSize, toCommonView } from './utils';
 import './Button.css';
 const b = block('button-block');
@@ -36,7 +36,7 @@ const Button = (props) => {
         return React.createElement(StoreBadge, { className: buttonClass, platform: platform, lang: lang, url: url });
     }
     let icon;
-    let image = img && React.createElement(ImageBase, { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
+    let image = img && (React.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt || i18n('image-alt') }));
     if (theme === 'github') {
         icon = React.createElement(Icon, { className: b('icon'), data: Github, size: 24, qa: ICON_QA });
         image = undefined;

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

@@ -0,0 +1,3 @@
+{
+  "image-alt": "Button image"
+}

package/build/esm/components/Button/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/components/Button/i18n/index.js

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

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

@@ -0,0 +1,3 @@
+{
+  "image-alt": "Иконка кнопки"
+}

package/build/esm/components/Control/Control.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../utils';
+import i18n from './i18n';
 import './Control.css';
 const b = block('control');
 const Control = (props) => {
     const { icon, theme = 'primary', size = 's', iconSize = 16, disabled = false, onClick, className, } = props;
-    return (React.createElement("button", { type: "button", className: b({ size, theme, disabled }, className), onClick: disabled ? undefined : onClick, disabled: disabled },
+    return (React.createElement("button", { type: "button", "aria-label": i18n('aria-label'), className: b({ size, theme, disabled }, className), onClick: disabled ? undefined : onClick, disabled: disabled },
         React.createElement(Icon, { data: icon, size: iconSize })));
 };
 export default Control;

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

@@ -0,0 +1,3 @@
+{
+  "aria-label": "Button label"
+}

package/build/esm/components/Control/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/components/Control/i18n/index.js

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

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

@@ -0,0 +1,3 @@
+{
+  "aria-label": "Лейбл кнопки"
+}

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

@@ -3,12 +3,13 @@ import { Icon, Modal } from '@gravity-ui/uikit';
 import { FullScreen, PreviewClose } from '../../icons';
 import { block } from '../../utils';
 import Image from '../Image/Image';
+import i18n from './i18n';
 import './FullScreenImage.css';
 const b = block('FullScreenImage');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 const FullScreenImage = (props) => {
-    const { imageClassName, modalImageClass, imageStyle } = props;
+    const { imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt') } = props;
     const [isOpened, setIsOpened] = useState(false);
     const [isMouseEnter, setIsMouseEnter] = useState(false);
     const openModal = () => setIsOpened(true);
@@ -17,7 +18,7 @@ const FullScreenImage = (props) => {
     const hideFullScreenIcon = () => setIsMouseEnter(false);
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullScreenIcon, onMouseLeave: hideFullScreenIcon },
-            React.createElement(Image, Object.assign({}, props, { className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
+            React.createElement(Image, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             React.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal },
                 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') },

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

@@ -0,0 +1,3 @@
+{
+  "img-alt": "Full screen image"
+}

package/build/esm/components/FullscreenImage/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/components/FullscreenImage/i18n/index.js

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

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

@@ -0,0 +1,3 @@
+{
+  "img-alt": "Полноэкранное изображение"
+}

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

@@ -3,12 +3,13 @@ import { BREAKPOINTS } from '../../constants';
 import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { isCompressible } from '../../utils/imageCompress';
 import ImageBase from '../ImageBase/ImageBase';
+import i18n from './i18n';
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
 const Image = (props) => {
     const projectSettings = useContext(ProjectSettingsContext);
-    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
+    const { src: imageSrc, alt = i18n('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
     const src = imageSrc || desktop;
     if (!src) {

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

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

package/build/esm/components/Image/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/components/Image/i18n/index.js

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

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

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

package/build/esm/components/Map/GoogleMap.js

@@ -36,6 +36,6 @@ const GoogleMap = (props) => {
     }
     return (React.createElement("iframe", { className: b(), ref: ref, style: {
             height,
-        }, loading: "lazy", allowFullScreen: true, referrerPolicy: "no-referrer-when-downgrade", src: src }));
+        }, title: "Google Map", loading: "lazy", allowFullScreen: true, referrerPolicy: "no-referrer-when-downgrade", src: src }));
 };
 export default GoogleMap;

package/build/esm/components/Media/DataLens/DataLens.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { block } from '../../../utils';
+import i18n from './i18n';
 import { unifyDataLensToObject } from './utils';
 import './DataLens.css';
 const b = block('media-component-data-lens');
@@ -7,6 +8,6 @@ const DataLens = (props) => {
     const { dataLens } = props;
     const dataLensData = unifyDataLensToObject(dataLens);
     return dataLens ? (React.createElement("div", { className: b('wrap') },
-        React.createElement("iframe", { src: `https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}`, className: b('iframe'), frameBorder: 0 }))) : null;
+        React.createElement("iframe", { src: `https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}`, className: b('iframe'), loading: "lazy", title: i18n('iframe-title'), frameBorder: 0 }))) : null;
 };
 export default DataLens;

package/build/esm/components/Media/DataLens/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Datalens frame"
+}

package/build/esm/components/Media/DataLens/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/components/Media/DataLens/i18n/index.js

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

package/build/esm/components/Media/DataLens/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм данных"
+}

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

@@ -5,8 +5,6 @@ export interface OverflowScrollerProps {
     className?: string;
     onScrollStart?: () => void;
     onScrollEnd?: () => void;
-    arrowSize?: number;
-    arrowClassName?: string;
 }
 export interface OverflowScrollerState {
     arrows: Arrow[];

package/build/esm/components/OverflowScroller/OverflowScroller.js

@@ -6,7 +6,6 @@ import './OverflowScroller.css';
 const b = block('overflow-scroller');
 const TRANSITION_TIME = 300;
 const PADDING_SIZE = 24;
-const DEFAULT_ARROW_SIZE = 18;
 export default class OverflowScroller extends React.Component {
     constructor() {
         super(...arguments);
@@ -71,7 +70,7 @@ export default class OverflowScroller extends React.Component {
         window.removeEventListener('resize', this.checkOverflow);
     }
     render() {
-        const { className, arrowClassName, children, arrowSize = DEFAULT_ARROW_SIZE } = this.props;
+        const { className, children } = this.props;
         const { arrows, scrollValue } = this.state;
         const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
         const paddingLeft = arrows.includes('left');
@@ -82,7 +81,7 @@ export default class OverflowScroller extends React.Component {
             }) },
             React.createElement("div", { className: b(null, className), ref: this.containerRef },
                 React.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
-            arrows.map((direction) => (React.createElement("div", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction) },
-                React.createElement(ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }))))));
+            arrows.map((direction) => (React.createElement("div", { key: direction, className: b('arrow', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
+                React.createElement(ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
     }
 }

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -5,6 +5,7 @@ import { Icon } from '@gravity-ui/uikit';
 import { PlayVideo } from '../../icons';
 import { block, getPageSearchParams } from '../../utils';
 import Image from '../Image/Image';
+import i18n from './i18n';
 import './VideoBlock.css';
 const RECORD_URL = 'https://www.youtube.com/embed/';
 const STREAM_URL = 'https://www.youtube.com/embed/live_stream?channel=';
@@ -69,9 +70,11 @@ const VideoBlock = (props) => {
             iframe.src = fullSrc;
             iframe.width = '100%';
             iframe.height = '100%';
+            iframe.title = i18n('iframe-title');
             iframe.frameBorder = '0';
             iframe.setAttribute('allowfullscreen', 'true');
             iframe.setAttribute('allow', 'autoplay');
+            iframe.setAttribute('loading', 'lazy');
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }

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

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Video frame"
+}

package/build/esm/components/VideoBlock/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/components/VideoBlock/i18n/index.js

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

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

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм видеоблока"
+}

package/build/esm/components/YandexForm/YandexForm.js

@@ -44,6 +44,7 @@ const YandexForm = (props) => {
             iframeRef.current.src = src;
             iframeRef.current.id = containerId;
             iframeRef.current.name = `form${id}`;
+            iframeRef.current.setAttribute('loading', 'lazy');
             iframeRef.current.frameBorder = '0';
             iframeRef.current.scrolling = 'no';
             iframeRef.current.width = '100%';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.12.0-alpha",
+  "version": "2.12.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {