@gravity-ui/page-constructor 5.30.0-alpha.0 → 5.30.1

package/README.md

@@ -165,12 +165,6 @@ To use mixins and constructor style variables when creating custom blocks, add i
 @import '~@gravity-ui/page-constructor/styles/styles.scss';
 ```
 
-To use default font, add import in your file:
-
-```css
-@import '@gravity-ui/uikit/styles/fonts.css';
-```
-
 ### Loadable blocks
 
 It's sometimes necessary that a block renders itself based on data to be loaded. In this case, loadable blocks are used.

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

@@ -12,12 +12,24 @@ unpredictable css rules order in build */
   padding-top: 32px;
 }
 .pc-QuestionsBlockItem__title {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   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;
+  display: block;
+  width: 100%;
   padding-right: 24px;
+  text-align: start;
   cursor: pointer;
   border-radius: var(--g-focus-border-radius);
 }

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

@@ -12,10 +12,7 @@ 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, 
-            // TODO fix in https://github.com/gravity-ui/page-constructor/issues/966
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-            role: 'button', tabIndex: 0, onKeyDown: onKeyDown },
+        react_1.default.createElement("button", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, 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 },

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

@@ -7,5 +7,5 @@ export interface ImageBaseProps extends Partial<ImageObjectProps> {
     onLoad?: ReactEventHandler<HTMLDivElement>;
     onError?: () => void;
 }
-export declare const ImageBase: ({ fetchPriority, ...props }: ImageBaseProps) => JSX.Element;
+export declare const ImageBase: ({ fetchPriority, alt, ...props }: ImageBaseProps) => JSX.Element;
 export default ImageBase;

package/build/cjs/components/ImageBase/ImageBase.js

@@ -5,15 +5,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const imageContext_1 = require("../../context/imageContext/imageContext");
 const ImageBase = (_a) => {
-    var { fetchPriority } = _a, props = tslib_1.__rest(_a, ["fetchPriority"]);
+    var { fetchPriority, alt } = _a, props = tslib_1.__rest(_a, ["fetchPriority", "alt"]);
     const { Image } = react_1.default.useContext(imageContext_1.ImageContext);
-    return Image ? (react_1.default.createElement(Image, Object.assign({ fetchPriority: fetchPriority }, props))) : (
+    return Image ? (react_1.default.createElement(Image, Object.assign({ fetchPriority: fetchPriority, alt: alt }, props))) : (
     // There is an issue with fetchpriority attr in img in React.
     // It is still not supported. However it's nice to have ability to manage
     // this prop is good to have to improve Core Web Vitals.
     // So, here is a workaround to assign the attr.
-    // eslint-disable-next-line jsx-a11y/alt-text
-    react_1.default.createElement("img", Object.assign({}, { fetchpriority: fetchPriority }, props)));
+    react_1.default.createElement("img", Object.assign({}, { fetchpriority: fetchPriority }, { alt: alt }, props)));
 };
 exports.ImageBase = ImageBase;
 exports.default = exports.ImageBase;

package/build/cjs/components/OutsideClick/OutsideClick.js

@@ -1,11 +1,9 @@
 "use strict";
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 //TODO move into cloud components?
 const react_1 = tslib_1.__importStar(require("react"));
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 class OutsideClick extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -26,8 +24,8 @@ class OutsideClick extends react_1.default.Component {
         document.removeEventListener('click', this.handleOutsideClick);
     }
     render() {
-        const { className, onClick, children } = this.props;
-        return (react_1.default.createElement("div", { className: className, ref: this.ref, onClick: onClick }, children));
+        const { children, className, onClick } = this.props;
+        return (react_1.default.createElement("div", { className: className, ref: this.ref, onClick: onClick, onKeyDown: noop_1.default, role: onClick ? 'button' : 'group', tabIndex: onClick ? 0 : -1 }, children));
     }
 }
 exports.default = OutsideClick;

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

@@ -1,7 +1,4 @@
 "use strict";
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReactPlayerBlock = void 0;
 const tslib_1 = require("tslib");
@@ -31,6 +28,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const mute = initiallyMuted || autoPlay;
     const { playingVideoRef, setProps } = (0, react_1.useContext)(videoContext_1.VideoContext);
     const ref = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
     const [playerRef, setPlayerRef] = (0, react_1.useState)();
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(autoPlay);
     const [playedPercent, setPlayedPercent] = (0, react_1.useState)(0);
@@ -129,7 +127,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 playButtonContent = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: 24 });
                 break;
         }
-        return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": (0, i18n_1.i18n)('play') }, playButtonContent));
+        return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": (0, i18n_1.i18n)('play'), ref: buttonRef }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = (0, react_1.useCallback)((isMuted) => {
         if (isMuted &&
@@ -220,6 +218,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         }
     }, [isPlaying, onPlay, onPause]);
     const handleClick = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         if (controls === models_1.MediaVideoControlsType.Custom) {
             if (customControlsType === models_1.CustomControlsType.WithMuteButton) {
                 changeMute(muted);
@@ -228,7 +228,14 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 onPlayClick();
             }
         }
-    }, [changeMute, customControlsType, muted, onPlayClick, controls]);
+    }, [controls, customControlsType, changeMute, muted, onPlayClick]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        var _a;
+        const key = e.key.toLowerCase();
+        if (key === 'enter') {
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }, []);
     const onFocusIn = (0, react_1.useCallback)(() => setHovered(true), []);
     const onFocusOut = (0, react_1.useCallback)(() => setHovered(false), []);
     return (react_1.default.createElement("div", { className: b({
@@ -236,7 +243,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             controls,
             contain,
             'auto-ratio': autoRatio,
-        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
+        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
         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: onReady, onPlay: onPlay, onPause: autoPlay && customControlsType !== models_1.CustomControlsType.WithMuteButton
                 ? undefined
                 : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {

package/build/cjs/components/Title/TitleItem.css

@@ -59,6 +59,15 @@ unpredictable css rules order in build */
   margin-top: 4px;
 }
 .pc-title-item__link {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   color: inherit;
   text-decoration: none;
   padding-right: 8px;

package/build/cjs/components/Title/TitleItem.js

@@ -1,7 +1,4 @@
 "use strict";
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getArrowSize = void 0;
 const tslib_1 = require("tslib");
@@ -48,7 +45,7 @@ const TitleItem = (props) => {
         content = (react_1.default.createElement("a", Object.assign({ className: b('link'), href: url }, (0, utils_1.getLinkProps)(url, hostname), { onClick: onClick, title: urlTitle }), insideClickableContent));
     }
     else if (onClick) {
-        content = (react_1.default.createElement("span", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
+        content = (react_1.default.createElement("button", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
     }
     return (react_1.default.createElement(react_1.Fragment, null,
         anchor && react_1.default.createElement(Anchor_1.default, { id: anchor, className: b('anchor') }),

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

@@ -14,6 +14,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     className?: string;
     previewImg?: string;
     playButton?: React.ReactNode;
+    playButtonId?: string;
     height?: number;
     fullscreen?: boolean;
     autoplay?: boolean;

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

@@ -1,7 +1,4 @@
 "use strict";
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getHeight = exports.AUTOPLAY_ATTRIBUTES = void 0;
 const tslib_1 = require("tslib");
@@ -47,13 +44,14 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
+    const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonId, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
     const handleAnalytics = (0, useAnalytics_1.useAnalytics)(common_1.DefaultEventNames.VideoPreview);
     const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
     const [hidePreview, setHidePreview] = (0, react_1.useState)(false);
     const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height || undefined);
     const fullId = (0, react_1.useMemo)(() => id || (0, uuid_1.v4)(), [id]);
+    const buttonId = (0, uikit_1.useUniqId)();
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(!previewImg);
     const iframeSrc = src && isPlaying
         ? `${src}?${(0, utils_1.getPageSearchParams)(Object.assign(Object.assign({}, (attributes || {})), (previewImg || autoplay ? exports.AUTOPLAY_ATTRIBUTES : NO_AUTOPLAY_ATTRIBUTES)))}`
@@ -63,6 +61,7 @@ const VideoBlock = (props) => {
         setIsPlaying(true);
         setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
     }, [handleAnalytics, analyticsEvents]);
+    const { onKeyDown: onPreviewKeyDown } = (0, uikit_1.useActionHandlers)(onPreviewClick);
     (0, react_1.useEffect)(() => {
         const updateSize = (0, debounce_1.default)(() => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
@@ -84,9 +83,9 @@ const VideoBlock = (props) => {
     }
     return (react_1.default.createElement("div", { className: b(null, className), style: { height: currentHeight }, ref: ref },
         iframeContent,
-        previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+        previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId },
             react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }),
-            playButton || (react_1.default.createElement("button", { title: "Play", className: b('button') },
+            playButton || (react_1.default.createElement("button", { title: "Play", id: buttonId, className: b('button') },
                 react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: 24 })))))));
 };
 exports.default = VideoBlock;

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

@@ -51,12 +51,22 @@ unpredictable css rules order in build */
   overflow-y: auto;
 }
 .pc-add-block__popup .pc-add-block__block {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: transform 0.2s;
   margin-top: 20px;
   justify-content: flex-start;
+  text-align: start;
   cursor: pointer;
 }
 .pc-add-block__popup .pc-add-block__block:hover {

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

@@ -1,7 +1,4 @@
 "use strict";
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
@@ -49,7 +46,7 @@ const AddBlock = ({ onAdd, className }) => {
                     return null;
                 }
                 const Preview = blockData.preview;
-                return (react_1.default.createElement("div", { key: blockName, className: b('block'), onClick: () => {
+                return (react_1.default.createElement("button", { key: blockName, className: b('block'), onClick: () => {
                         onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
                         setIsOpened(false);
                     } },

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

@@ -38,6 +38,15 @@ unpredictable css rules order in build */
   transform: translateX(-50%);
 }
 .pc-edit-block__control {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,12 +1,10 @@
 "use strict";
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditBlockControls = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('edit-block');
 var EditBlockControls;
@@ -30,20 +28,22 @@ const editBlockControlsIcons = {
 };
 const EditBlock = ({ actions, isActive, onSelect, isHeader, children, resetPaddings, }) => {
     const ref = (0, react_1.useRef)(null);
+    const stopPropagationProps = (0, react_1.useMemo)(() => ({ onClick: (e) => e.stopPropagation() }), []);
+    const { onKeyDown } = (0, uikit_1.useActionHandlers)(onSelect);
     (0, react_1.useEffect)(() => {
         if (isActive && ref.current) {
             //TODO: add behavior 'smooth' after addiiton of dynamic form layout open/close managing support
             ref.current.scrollIntoView({ block: 'center' });
         }
     }, [isActive]);
-    return (react_1.default.createElement("div", { className: b({ active: isActive }), onClick: onSelect, ref: ref },
+    return (react_1.default.createElement("div", { className: b({ active: isActive }), onClick: onSelect, onKeyDown: onKeyDown, ref: ref, role: "button", "aria-current": isActive, tabIndex: 0 },
         react_1.default.createElement("div", { className: b('controls', {
                 active: isActive,
                 isHeader,
                 'reset-paddings': resetPaddings,
-            }) }, isActive && (react_1.default.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() }, actionsOrder.map((action) => {
+            }) }, isActive && (react_1.default.createElement("div", Object.assign({ className: b('controls-content') }, stopPropagationProps), actionsOrder.map((action) => {
             const Icon = editBlockControlsIcons[action];
-            return actions[action] ? (react_1.default.createElement("div", { key: action, className: b('control'), onClick: actions[action] },
+            return actions[action] ? (react_1.default.createElement("button", { key: action, className: b('control'), onClick: actions[action] },
                 react_1.default.createElement(Icon, null))) : null;
         })))),
         children));

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

@@ -12,12 +12,24 @@ unpredictable css rules order in build */
   padding-top: 32px;
 }
 .pc-QuestionsBlockItem__title {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   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;
+  display: block;
+  width: 100%;
   padding-right: 24px;
+  text-align: start;
   cursor: pointer;
   border-radius: var(--g-focus-border-radius);
 }

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

@@ -9,10 +9,7 @@ const b = block('QuestionsBlockItem');
 export const QuestionBlockItem = ({ title: itemTitle, text: itemText, link, listStyle = 'dash', isOpened, onClick, }) => {
     const { onKeyDown } = useActionHandlers(onClick);
     return (React.createElement("div", { className: b(), itemScope: true, itemProp: FaqMicrodataValues.QuestionProp, itemType: FaqMicrodataValues.QuestionType, role: 'listitem' },
-        React.createElement("h3", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, 
-            // TODO fix in https://github.com/gravity-ui/page-constructor/issues/966
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-            role: 'button', tabIndex: 0, onKeyDown: onKeyDown },
+        React.createElement("button", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, onKeyDown: onKeyDown },
             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 },

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

@@ -7,5 +7,5 @@ export interface ImageBaseProps extends Partial<ImageObjectProps> {
     onLoad?: ReactEventHandler<HTMLDivElement>;
     onError?: () => void;
 }
-export declare const ImageBase: ({ fetchPriority, ...props }: ImageBaseProps) => JSX.Element;
+export declare const ImageBase: ({ fetchPriority, alt, ...props }: ImageBaseProps) => JSX.Element;
 export default ImageBase;

package/build/esm/components/ImageBase/ImageBase.js

@@ -2,14 +2,13 @@ import { __rest } from "tslib";
 import React from 'react';
 import { ImageContext } from '../../context/imageContext/imageContext';
 export const ImageBase = (_a) => {
-    var { fetchPriority } = _a, props = __rest(_a, ["fetchPriority"]);
+    var { fetchPriority, alt } = _a, props = __rest(_a, ["fetchPriority", "alt"]);
     const { Image } = React.useContext(ImageContext);
-    return Image ? (React.createElement(Image, Object.assign({ fetchPriority: fetchPriority }, props))) : (
+    return Image ? (React.createElement(Image, Object.assign({ fetchPriority: fetchPriority, alt: alt }, props))) : (
     // There is an issue with fetchpriority attr in img in React.
     // It is still not supported. However it's nice to have ability to manage
     // this prop is good to have to improve Core Web Vitals.
     // So, here is a workaround to assign the attr.
-    // eslint-disable-next-line jsx-a11y/alt-text
-    React.createElement("img", Object.assign({}, { fetchpriority: fetchPriority }, props)));
+    React.createElement("img", Object.assign({}, { fetchpriority: fetchPriority }, { alt: alt }, props)));
 };
 export default ImageBase;

package/build/esm/components/OutsideClick/OutsideClick.js

@@ -1,8 +1,6 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 //TODO move into cloud components?
 import React, { createRef } from 'react';
+import noop from 'lodash/noop';
 export default class OutsideClick extends React.Component {
     constructor() {
         super(...arguments);
@@ -23,7 +21,7 @@ export default class OutsideClick extends React.Component {
         document.removeEventListener('click', this.handleOutsideClick);
     }
     render() {
-        const { className, onClick, children } = this.props;
-        return (React.createElement("div", { className: className, ref: this.ref, onClick: onClick }, children));
+        const { children, className, onClick } = this.props;
+        return (React.createElement("div", { className: className, ref: this.ref, onClick: onClick, onKeyDown: noop, role: onClick ? 'button' : 'group', tabIndex: onClick ? 0 : -1 }, children));
     }
 }

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -1,6 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { PlayFill } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
@@ -28,6 +25,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const mute = initiallyMuted || autoPlay;
     const { playingVideoRef, setProps } = useContext(VideoContext);
     const ref = useRef(null);
+    const buttonRef = useRef(null);
     const [playerRef, setPlayerRef] = useState();
     const [isPlaying, setIsPlaying] = useState(autoPlay);
     const [playedPercent, setPlayedPercent] = useState(0);
@@ -126,7 +124,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 playButtonContent = React.createElement(Icon, { className: b('icon'), data: PlayFill, size: 24 });
                 break;
         }
-        return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play') }, playButtonContent));
+        return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play'), ref: buttonRef }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = useCallback((isMuted) => {
         if (isMuted &&
@@ -217,6 +215,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
     }, [isPlaying, onPlay, onPause]);
     const handleClick = useCallback(() => {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         if (controls === MediaVideoControlsType.Custom) {
             if (customControlsType === CustomControlsType.WithMuteButton) {
                 changeMute(muted);
@@ -225,7 +225,14 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 onPlayClick();
             }
         }
-    }, [changeMute, customControlsType, muted, onPlayClick, controls]);
+    }, [controls, customControlsType, changeMute, muted, onPlayClick]);
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        const key = e.key.toLowerCase();
+        if (key === 'enter') {
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }, []);
     const onFocusIn = useCallback(() => setHovered(true), []);
     const onFocusOut = useCallback(() => setHovered(false), []);
     return (React.createElement("div", { className: b({
@@ -233,7 +240,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             controls,
             contain,
             'auto-ratio': autoRatio,
-        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (React.createElement(Fragment, null,
+        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, isMounted ? (React.createElement(Fragment, null,
         React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: onReady, onPlay: onPlay, onPause: autoPlay && customControlsType !== CustomControlsType.WithMuteButton
                 ? undefined
                 : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {

package/build/esm/components/Title/TitleItem.css

@@ -59,6 +59,15 @@ unpredictable css rules order in build */
   margin-top: 4px;
 }
 .pc-title-item__link {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   color: inherit;
   text-decoration: none;
   padding-right: 8px;

package/build/esm/components/Title/TitleItem.js

@@ -1,6 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 import React, { Fragment, useContext } from 'react';
 import { HTML, ToggleArrow } from '../';
 import { LocationContext } from '../../context/locationContext';
@@ -44,7 +41,7 @@ const TitleItem = (props) => {
         content = (React.createElement("a", Object.assign({ className: b('link'), href: url }, getLinkProps(url, hostname), { onClick: onClick, title: urlTitle }), insideClickableContent));
     }
     else if (onClick) {
-        content = (React.createElement("span", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
+        content = (React.createElement("button", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
     }
     return (React.createElement(Fragment, null,
         anchor && React.createElement(Anchor, { id: anchor, className: b('anchor') }),

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

@@ -15,6 +15,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     className?: string;
     previewImg?: string;
     playButton?: React.ReactNode;
+    playButtonId?: string;
     height?: number;
     fullscreen?: boolean;
     autoplay?: boolean;

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

@@ -1,9 +1,6 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PlayFill } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
+import { Icon, useActionHandlers, useUniqId } from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 import { v4 as uuidv4 } from 'uuid';
 import { useAnalytics } from '../../hooks/useAnalytics';
@@ -43,13 +40,14 @@ export function getHeight(width) {
     return (width / 16) * 9;
 }
 const VideoBlock = (props) => {
-    const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
+    const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonId, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
     const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
     const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
     const ref = useRef(null);
     const [hidePreview, setHidePreview] = useState(false);
     const [currentHeight, setCurrentHeight] = useState(height || undefined);
     const fullId = useMemo(() => id || uuidv4(), [id]);
+    const buttonId = useUniqId();
     const [isPlaying, setIsPlaying] = useState(!previewImg);
     const iframeSrc = src && isPlaying
         ? `${src}?${getPageSearchParams(Object.assign(Object.assign({}, (attributes || {})), (previewImg || autoplay ? AUTOPLAY_ATTRIBUTES : NO_AUTOPLAY_ATTRIBUTES)))}`
@@ -59,6 +57,7 @@ const VideoBlock = (props) => {
         setIsPlaying(true);
         setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
     }, [handleAnalytics, analyticsEvents]);
+    const { onKeyDown: onPreviewKeyDown } = useActionHandlers(onPreviewClick);
     useEffect(() => {
         const updateSize = debounce(() => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
@@ -80,9 +79,9 @@ const VideoBlock = (props) => {
     }
     return (React.createElement("div", { className: b(null, className), style: { height: currentHeight }, ref: ref },
         iframeContent,
-        previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+        previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId },
             React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }),
-            playButton || (React.createElement("button", { title: "Play", className: b('button') },
+            playButton || (React.createElement("button", { title: "Play", id: buttonId, className: b('button') },
                 React.createElement(Icon, { className: b('icon'), data: PlayFill, size: 24 })))))));
 };
 export default VideoBlock;

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

@@ -51,12 +51,22 @@ unpredictable css rules order in build */
   overflow-y: auto;
 }
 .pc-add-block__popup .pc-add-block__block {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: transform 0.2s;
   margin-top: 20px;
   justify-content: flex-start;
+  text-align: start;
   cursor: pointer;
 }
 .pc-add-block__popup .pc-add-block__block:hover {

package/build/esm/editor/components/AddBlock/AddBlock.js

@@ -1,6 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Plus } from '@gravity-ui/icons';
 import { Popup, TextInput } from '@gravity-ui/uikit';
@@ -47,7 +44,7 @@ const AddBlock = ({ onAdd, className }) => {
                     return null;
                 }
                 const Preview = blockData.preview;
-                return (React.createElement("div", { key: blockName, className: b('block'), onClick: () => {
+                return (React.createElement("button", { key: blockName, className: b('block'), onClick: () => {
                         onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
                         setIsOpened(false);
                     } },