@gravity-ui/page-constructor 4.27.0-alpha.0 → 4.27.2-alpha.0

package/build/cjs/blocks/ContentLayout/ContentLayout.css

@@ -49,6 +49,9 @@ unpredictable css rules order in build */
 .pc-content-layout-block_background {
   padding: 64px;
 }
+.pc-content-layout-block_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 @media (max-width: 577px) {
   .pc-content-layout-block_background {
     padding: 32px;

package/build/cjs/blocks/ContentLayout/ContentLayout.js

@@ -33,7 +33,7 @@ const ContentLayoutBlock = (props) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { textContent, fileContent, size = 'l', background, centered, theme = 'default', textWidth = 'm', } = props;
     const colSizes = (0, react_1.useMemo)(() => getTextWidth(textWidth), [textWidth]);
-    return (react_1.default.createElement("div", { className: b({ size, background: Boolean(background) }) },
+    return (react_1.default.createElement("div", { className: b({ size, theme, background: Boolean(background) }) },
         react_1.default.createElement(sub_blocks_1.Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),
         fileContent && (react_1.default.createElement(grid_1.Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes }, fileContent.map((file) => (react_1.default.createElement(components_1.FileLink, Object.assign({ className: b('file') }, file, { key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme })))))),
         background && (react_1.default.createElement("div", { className: b('background') },

package/build/cjs/blocks/Header/Header.css

@@ -20,6 +20,9 @@ unpredictable css rules order in build */
   position: relative;
   height: 100%;
 }
+.pc-header-block__content_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-header-block__content_theme_dark .pc-header-block__title,
 .pc-header-block__content_theme_dark .pc-header-block__overtitle {
   color: var(--g-color-text-light-primary);
@@ -180,6 +183,18 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.pc-header-block_media-view_fit .pc-header-block__video > video,
+.pc-header-block_media-view_fit .pc-header-block__image {
+  object-fit: contain;
+  height: auto;
+  width: auto;
+  max-height: 100%;
+  max-width: 100%;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 @media (max-width: 1440px) {
   .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
     left: 0;

package/build/cjs/blocks/Header/Header.js

@@ -21,7 +21,7 @@ const Background = ({ background, isMobile }) => {
 };
 const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 const HeaderBlock = (props) => {
-    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
+    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, mediaView = 'full', } = props;
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const theme = (0, theme_1.useTheme)();
     const hasRightSideImage = Boolean(image || video);
@@ -35,7 +35,11 @@ const HeaderBlock = (props) => {
     const imageThemed = image && (0, utils_2.getThemedValue)(image, theme);
     const videoThemed = video && (0, utils_2.getThemedValue)(video, theme);
     const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
-    return (react_1.default.createElement("header", { className: b({ ['has-media']: hasRightSideImage, ['full-width']: fullWidth }, className) },
+    return (react_1.default.createElement("header", { className: b({
+            ['has-media']: hasRightSideImage,
+            ['full-width']: fullWidth,
+            ['media-view']: mediaView,
+        }, className) },
         backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
         backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
         react_1.default.createElement(grid_1.Grid, { containerClass: b('container-fluid') },

package/build/cjs/blocks/Header/schema.d.ts

@@ -407,6 +407,10 @@ export declare const HeaderProperties: {
             optionName: string;
         })[];
     };
+    mediaView: {
+        type: string;
+        enum: string[];
+    };
     backLink: {
         type: string;
         required: string[];
@@ -887,6 +891,10 @@ export declare const HeaderBlock: {
                     optionName: string;
                 })[];
             };
+            mediaView: {
+                type: string;
+                enum: string[];
+            };
             backLink: {
                 type: string;
                 required: string[];

package/build/cjs/blocks/Header/schema.js

@@ -35,6 +35,10 @@ exports.HeaderProperties = {
     },
     image: (0, common_1.withTheme)(schema_1.ImageProps),
     video: (0, common_1.withTheme)(common_1.VideoProps),
+    mediaView: {
+        type: 'string',
+        enum: ['fit', 'full'],
+    },
     backLink: {
         type: 'object',
         required: ['url', 'title'],

package/build/cjs/blocks/HeaderSlider/schema.d.ts

@@ -163,6 +163,10 @@ export declare const HeaderSliderBlock: {
                                 optionName: string;
                             })[];
                         };
+                        mediaView: {
+                            type: string;
+                            enum: string[];
+                        };
                         backLink: {
                             type: string;
                             required: string[];

package/build/cjs/blocks/Icons/Icons.css

@@ -30,6 +30,16 @@ unpredictable css rules order in build */
   text-decoration: none;
   margin: 0 8px 24px;
 }
+.pc-icons-block a.pc-icons-block__item {
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-icons-block a.pc-icons-block__item:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-icons-block a.pc-icons-block__item:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-icons-block__image {
   max-width: 100%;
   margin: 0 auto;

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

@@ -19,6 +19,14 @@ unpredictable css rules order in build */
   position: relative;
   padding-right: 24px;
   cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-QuestionsBlockItem__title:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-QuestionsBlockItem__title:focus:not(:focus-visible) {
+  outline: 0;
 }
 .pc-QuestionsBlockItem__title a {
   outline: none;
@@ -37,12 +45,19 @@ unpredictable css rules order in build */
   position: absolute;
   right: 0;
   top: 0;
+  bottom: 0;
+  margin: auto;
   color: var(--g-color-text-primary);
 }
 .pc-QuestionsBlockItem__link {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
 }
+.pc-QuestionsBlockItem__link.pc-QuestionsBlockItem__link a {
+  outline-offset: -2px;
+  border-radius: calc(var(--g-focus-border-radius) + 2px);
+}
+
 .pc-QuestionsBlockItem__text {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);

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

@@ -49,6 +49,13 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
+.pc-slider-block-arrow__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-slider-block-arrow__button:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-slider-block-arrow:hover .pc-slider-block-arrow__button {
   color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);

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

@@ -136,12 +136,12 @@ const SliderBlock = (props) => {
     const renderAccessibleBar = (index) => {
         return (
         // To have this key differ from keys used in renderDot function, added `-accessible-bar` part
-        react_1.default.createElement(react_1.Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 1 && (react_1.default.createElement("li", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
+        react_1.default.createElement(react_1.Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 0 && (react_1.default.createElement("li", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
                 left: barPosition,
                 width: barWidth,
             } }))));
     };
-    const renderDot = (index) => {
+    const getCurrentSlideNumber = (index) => {
         const currentIndexDiff = index - currentIndex;
         let currentSlideNumber;
         if (0 <= currentIndexDiff && currentIndexDiff < slidesToShowCount) {
@@ -153,10 +153,16 @@ const SliderBlock = (props) => {
         else {
             currentSlideNumber = index + 1;
         }
-        return (react_1.default.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": (slidesCountByBreakpoint > 1 &&
-                0 <= currentIndexDiff &&
-                currentIndexDiff < slidesToShowCount) ||
-                undefined, "aria-label": `Slide ${currentSlideNumber} of ${barSlidesCount}` }));
+        return currentSlideNumber;
+    };
+    const isVisibleSlide = (index) => {
+        const currentIndexDiff = index - currentIndex;
+        return (slidesCountByBreakpoint > 0 &&
+            0 <= currentIndexDiff &&
+            currentIndexDiff < slidesToShowCount);
+    };
+    const renderDot = (index) => {
+        return (react_1.default.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": isVisibleSlide(index) ? true : undefined, "aria-label": `Slide ${getCurrentSlideNumber(index)} of ${barSlidesCount}` }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {

package/build/cjs/components/Button/Button.css

@@ -1,5 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-button-block {
+  --yc-button-outline-color: var(--g-color-line-focus);
+}
 .pc-button-block__content {
   display: flex;
   align-items: center;
@@ -40,6 +43,9 @@ unpredictable css rules order in build */
   color: var(--pc-monochrome-button-color);
 }
 
+.pc-button-block_theme_normal-contrast:focus::before, .pc-button-block_theme_raised:focus::before {
+  outline-offset: 1px;
+}
 .pc-button-block_size_s {
   --btn-image-margin: 10px;
 }

package/build/cjs/components/ButtonTabs/ButtonTabs.css

@@ -26,4 +26,7 @@ unpredictable css rules order in build */
 }
 .pc-button-tabs__item.pc-button-tabs__item_active:hover {
   color: var(--pc-selected-tab-item-color);
+}
+.pc-button-tabs__item.pc-button-tabs__item_active:focus::before {
+  outline-offset: 1px;
 }

package/build/cjs/components/ButtonTabs/ButtonTabs.js

@@ -20,7 +20,7 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', q
     return (react_1.default.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => {
         const isActive = id === activeTabId;
         return (react_1.default.createElement(index_1.Button, { text: title, className: b('item', { active: isActive }), key: title, size: tabSize, onClick: handleClick(id), extraProps: {
-                'aria-current': isActive,
+                'aria-current': isActive || undefined,
             } }));
     })));
 };

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

@@ -1,6 +1,5 @@
 import React, { HTMLAttributeAnchorTarget, ReactElement } from 'react';
-import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
-import { AnalyticsEventsBase } from '../../models/common';
+import { AnalyticsEventsBase, ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
 export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     className?: string;
     bodyClassName?: string;

package/build/cjs/components/CardBase/CardBase.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Layout = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const hooks_1 = require("../../hooks");
 const useMetrika_1 = require("../../hooks/useMetrika");
-const common_1 = require("../../models/common");
+const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const BackgroundImage_1 = tslib_1.__importDefault(require("../BackgroundImage/BackgroundImage"));
 const RouterLink_1 = tslib_1.__importDefault(require("../RouterLink/RouterLink"));
@@ -16,7 +17,7 @@ const Footer = () => null;
 const Layout = (props) => {
     const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
-    const handleAnalytics = (0, hooks_1.useAnalytics)(common_1.DefaultEventNames.CardBase, url);
+    const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.CardBase, url);
     let header, content, footer, image, headerClass, footerClass;
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'header', 'footer', 'body', 'content');
     function handleChild(child) {
@@ -53,7 +54,10 @@ const Layout = (props) => {
         handleAnalytics(analyticsEvents);
     };
     return url ? (react_1.default.createElement(RouterLink_1.default, { href: url },
-        react_1.default.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, title: urlTitle, "data-qa": qa }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
+        react_1.default.createElement(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, onClick: onClick, title: urlTitle, extraProps: {
+                draggable: false,
+                onDragStart: (e) => e.preventDefault(),
+            }, qa: qa }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
 };
 exports.Layout = Layout;
 exports.Layout.Header = Header;

package/build/cjs/components/Control/Control.css

@@ -4,6 +4,7 @@ unpredictable css rules order in build */
   display: flex;
   justify-content: center;
   align-items: center;
+  border-radius: var(--g-focus-border-radius);
   transition: color 0.2s;
   display: inline-block;
   margin: 0;
@@ -25,6 +26,13 @@ unpredictable css rules order in build */
 .utilityfocus .pc-control:focus {
   outline: 2px solid #ffdb4d;
 }
+.pc-control:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-control:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-control_size_xs {
   width: 24px;
   height: 24px;

package/build/cjs/components/FileLink/FileLink.css

@@ -19,6 +19,14 @@ unpredictable css rules order in build */
 }
 .pc-file-link__link > a {
   color: var(--g-color-text-primary);
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-file-link__link > a:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-file-link__link > a:focus:not(:focus-visible) {
+  outline: 0;
 }
 .pc-file-link__link > a:hover {
   color: var(--g-color-text-secondary);

package/build/cjs/components/FullscreenImage/FullscreenImage.css

@@ -6,6 +6,9 @@ unpredictable css rules order in build */
 .pc-fullscreen-image__image-wrapper {
   position: relative;
 }
+.pc-fullscreen-image__image-wrapper:hover .pc-fullscreen-image__icon-wrapper {
+  opacity: 1;
+}
 .pc-fullscreen-image__modal-content {
   position: relative;
 }
@@ -19,6 +22,15 @@ unpredictable css rules order in build */
   border-radius: var(--pc-border-radius);
 }
 .pc-fullscreen-image__icon-wrapper {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -33,7 +45,14 @@ unpredictable css rules order in build */
   opacity: 0;
   transition: 0.3s;
 }
-.pc-fullscreen-image__icon-wrapper_visible {
+.pc-fullscreen-image__icon-wrapper:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-fullscreen-image__icon-wrapper:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-fullscreen-image__icon-wrapper:focus {
   opacity: 1;
 }
 .pc-fullscreen-image__icon {

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

@@ -13,19 +13,16 @@ const CLOSE_ICON_SIZE = 30;
 const FullscreenImage = (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);
     const closeModal = () => setIsOpened(false);
-    const showFullscreenIcon = () => setIsMouseEnter(true);
-    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("div", { className: b('image-wrapper') },
             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("button", { className: b('icon-wrapper'), 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') },
             react_1.default.createElement("div", { className: b('modal-content') },
-                react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.default)('close') },
+                react_1.default.createElement("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.default)('close') },
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };

package/build/cjs/components/FullscreenMedia/FullscreenMedia.css

@@ -50,6 +50,10 @@ unpredictable css rules order in build */
   transition: opacity 0.3s;
   pointer-events: none;
 }
+.pc-full-screen-media__modal-content .pc-full-screen-media__icon-wrapper_visible, .pc-full-screen-media__modal-content .pc-full-screen-media__icon-wrapper:focus, .pc-full-screen-media__media-wrapper .pc-full-screen-media__icon-wrapper_visible, .pc-full-screen-media__media-wrapper .pc-full-screen-media__icon-wrapper:focus {
+  opacity: 1;
+  pointer-events: inherit;
+}
 .pc-full-screen-media__modal-content:hover .pc-full-screen-media__icon-wrapper, .pc-full-screen-media__media-wrapper:hover .pc-full-screen-media__icon-wrapper {
   opacity: 1;
   pointer-events: inherit;

package/build/cjs/components/FullscreenMedia/FullscreenMedia.js

@@ -24,11 +24,11 @@ const FullscreenMedia = ({ children, showFullscreenIcon = true }) => {
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
             children({ className: b('inline-media') }),
-            showFullscreenIcon && (react_1.default.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+            showFullscreenIcon && (react_1.default.createElement(uikit_1.Button, { className: b('icon-wrapper'), extraProps: { onClickCapture: openModal }, size: 'l' },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.Fullscreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
         isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             react_1.default.createElement("div", { className: b('modal-content') },
-                react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
+                react_1.default.createElement(uikit_1.Button, { className: b('icon-wrapper', { visible: true }), onClick: closeModal, size: 'l' },
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 children({
                     imageClassName: getMediaClass('image'),

package/build/cjs/components/Link/Link.css

@@ -10,6 +10,7 @@ unpredictable css rules order in build */
   cursor: pointer;
   display: flex;
   align-items: center;
+  border-radius: var(--g-focus-border-radius);
 }
 .utilityfocus .pc-link-block__link:focus {
   outline: 2px solid #ffdb4d;
@@ -18,6 +19,13 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.pc-link-block__link:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-link-block__link:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-link-block__link_theme_dark {
   color: var(--g-color-text-light-primary);
 }

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

@@ -53,7 +53,7 @@ const Image = (props) => {
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))));
+        return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);

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

@@ -32,7 +32,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
-        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
+        return (react_1.default.createElement(ReactPlayer_1.default, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
     }, [
         video,
         height,

package/build/cjs/components/OverflowScroller/OverflowScroller.css

@@ -1,3 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
 .pc-overflow-scroller {
   display: flex;
   align-items: center;
@@ -19,6 +21,15 @@
   transition: left 0.6s;
 }
 .pc-overflow-scroller__arrow {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   position: absolute;
   z-index: 10;
   top: 0;
@@ -29,6 +40,14 @@
   height: calc(100% - 1px);
   cursor: pointer;
   color: var(--g-color-text-secondary);
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-overflow-scroller__arrow:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-overflow-scroller__arrow:focus:not(:focus-visible) {
+  outline: 0;
 }
 .pc-overflow-scroller__arrow_type_left {
   left: 0;

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

@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const __1 = require("..");
 const utils_1 = require("../../utils");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, utils_1.block)('overflow-scroller');
 const TRANSITION_TIME = 300;
 const PADDING_SIZE = 24;
@@ -84,7 +85,7 @@ 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) },
+            arrows.map((direction) => (react_1.default.createElement("button", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction), "aria-label": (0, i18n_1.default)(direction) },
                 react_1.default.createElement(__1.ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }))))));
     }
 }

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

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

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

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

@@ -0,0 +1,4 @@
+{
+  "left": "Предыдущий",
+  "right": "Следующий"
+}

package/build/cjs/components/ReactPlayer/CustomBarControls.css

@@ -56,10 +56,11 @@ unpredictable css rules order in build */
   background: #eff2f8;
 }
 .pc-CustomBarControls__button_type_with-mute-button:focus {
-  outline: 2px solid var(--g-color-line-misc);
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
 }
 .pc-CustomBarControls__button_type_with-mute-button:focus:not(:focus-visible) {
-  outline: none;
+  outline: 0;
 }
 .pc-CustomBarControls__button_type_with-play-pause-button {
   width: 42px;
@@ -68,10 +69,11 @@ unpredictable css rules order in build */
   background: var(--g-color-base-background);
 }
 .pc-CustomBarControls__button_type_with-play-pause-button:focus {
-  outline: 2px solid var(--g-color-line-misc);
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
 }
 .pc-CustomBarControls__button_type_with-play-pause-button:focus:not(:focus-visible) {
-  outline: none;
+  outline: 0;
 }
 .pc-CustomBarControls__play-icon_type_with-play-pause-button {
   height: 16px;

package/build/cjs/components/ReactPlayer/ReactPlayer.css

@@ -27,6 +27,13 @@ unpredictable css rules order in build */
   height: 64px;
   border-radius: 166px;
 }
+.pc-ReactPlayer__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-ReactPlayer__button:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-ReactPlayer__button_theme_blue {
   color: var(--g-color-base-background);
   background-color: var(--g-color-base-brand);

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

@@ -11,5 +11,6 @@ export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 's
     ratio?: number;
     children?: React.ReactNode;
 }
-export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;
+type ReactPlayerBlockRefType = ReactPlayerBlockHandler | undefined;
+export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockRefType>>;
 export default ReactPlayerBlock;