From 4c6dd9658803f6bd7a897d95bd2ffdc6101c6d21 Mon Sep 17 00:00:00 2001
From: Kyzyl-ool Kezhik <kyzyloolk@mail.ru>
Date: Wed, 18 Oct 2023 12:35:15 +0200
Subject: [PATCH] feat: added focus styles for interactive elements (#576)

* feat: adding focus styles for interactive elements
---
 package-lock.json                             | 16 +++++-----
 package.json                                  |  4 +--
 src/blocks/ContentLayout/ContentLayout.scss   |  6 ++++
 src/blocks/ContentLayout/ContentLayout.tsx    |  2 +-
 src/blocks/Icons/Icons.scss                   |  4 +++
 .../QuestionBlockItem/QuestionBlockItem.scss  | 13 ++++++++
 src/blocks/Slider/Arrow/Arrow.scss            |  2 ++
 src/blocks/Slider/Slider.tsx                  | 26 +++++++++------
 src/blocks/Slider/__tests__/Slider.test.tsx   | 31 ++++--------------
 src/components/Button/Button.scss             |  9 ++++++
 src/components/ButtonTabs/ButtonTabs.scss     |  3 ++
 src/components/ButtonTabs/ButtonTabs.tsx      |  2 +-
 src/components/CardBase/CardBase.tsx          | 17 ++++++----
 src/components/Control/Control.scss           |  3 +-
 src/components/FileLink/FileLink.scss         |  2 ++
 .../FullscreenImage/FullscreenImage.scss      | 11 ++++++-
 .../FullscreenImage/FullscreenImage.tsx       | 17 +++-------
 .../FullscreenMedia/FullscreenMedia.scss      |  6 ++++
 .../FullscreenMedia/FullscreenMedia.tsx       | 18 ++++++++---
 src/components/Link/Link.scss                 |  2 ++
 src/components/Media/Image/Image.tsx          | 10 +++---
 .../OverflowScroller/OverflowScroller.scss    |  5 +++
 .../OverflowScroller/OverflowScroller.tsx     |  7 ++--
 src/components/OverflowScroller/i18n/en.json  |  4 +++
 src/components/OverflowScroller/i18n/index.ts |  8 +++++
 src/components/OverflowScroller/i18n/ru.json  |  4 +++
 .../ReactPlayer/CustomBarControls.scss        | 15 ++-------
 src/components/ReactPlayer/ReactPlayer.scss   |  1 +
 src/components/ReactPlayer/ReactPlayer.tsx    |  1 +
 src/components/Title/TitleItem.scss           |  2 ++
 src/components/VideoBlock/VideoBlock.scss     |  1 +
 src/sub-blocks/BannerCard/BannerCard.scss     |  2 ++
 src/sub-blocks/Content/Content.scss           |  2 ++
 src/sub-blocks/HubspotForm/HubspotForm.scss   | 32 ++++++++++++++++---
 .../PriceDetails/PriceDetails.scss            |  7 +++-
 .../PriceDetails/PriceDetails.tsx             |  6 ++--
 styles/mixins.scss                            | 20 ++++++++++++
 styles/root.scss                              |  6 ++++
 styles/yfm.scss                               |  2 ++
 39 files changed, 231 insertions(+), 98 deletions(-)
 create mode 100644 src/components/OverflowScroller/i18n/en.json
 create mode 100644 src/components/OverflowScroller/i18n/index.ts
 create mode 100644 src/components/OverflowScroller/i18n/ru.json

diff --git a/package-lock.json b/package-lock.json
index 59da863a0..07c6f133e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,7 @@
         "@gravity-ui/prettier-config": "^1.0.1",
         "@gravity-ui/stylelint-config": "^1.0.0",
         "@gravity-ui/tsconfig": "^1.0.0",
-        "@gravity-ui/uikit": "^5.9.1",
+        "@gravity-ui/uikit": "^5.12.2",
         "@storybook/addon-actions": "^7.1.0",
         "@storybook/addon-essentials": "^7.1.0",
         "@storybook/addon-knobs": "^7.0.2",
@@ -116,7 +116,7 @@
       },
       "peerDependencies": {
         "@doc-tools/transform": "^3.3.2",
-        "@gravity-ui/uikit": "^5.4.1",
+        "@gravity-ui/uikit": "^5.12.0",
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
@@ -4405,9 +4405,9 @@
       "dev": true
     },
     "node_modules/@gravity-ui/uikit": {
-      "version": "5.9.1",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.9.1.tgz",
-      "integrity": "sha512-Zyf0xDlkYze4/oSljsjEtB3opWQzjuj+lM2QYEaIIE2wJHkt+07t7yUy2t+VqPKUtOZ81VJKi47MYB+tPqOAQQ==",
+      "version": "5.17.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.17.0.tgz",
+      "integrity": "sha512-Q59Rq4AV4J9j6TKX7GayvcNE68kcxqTHPUgbETLUC2IIwhGGrm2TvJtzifY9RkJrFIJ1xNs6MiRAsjKPm73dfA==",
       "dev": true,
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
@@ -24002,9 +24002,9 @@
       }
     },
     "node_modules/react-spring": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.2.tgz",
-      "integrity": "sha512-cckALtj79yiaJiAOUNAhtZbdqjvv1bdn/FpobgkckIChc8l6vu0E53WQ+zWru60gINI3JT+oRJSIn2hUVlOvlQ==",
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.3.tgz",
+      "integrity": "sha512-oTxDpFV5gzq7jQX6+bU0SVq+vX8VnuuT5c8Zwn6CpDErOPvCmV+DRkPiEBtaL3Ozgzwiy5yFx83N0h303j/r3A==",
       "dependencies": {
         "@react-spring/core": "~9.7.3",
         "@react-spring/konva": "~9.7.3",
diff --git a/package.json b/package.json
index f21921b08..794e23205 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
   },
   "peerDependencies": {
     "@doc-tools/transform": "^3.3.2",
-    "@gravity-ui/uikit": "^5.4.1",
+    "@gravity-ui/uikit": "^5.12.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
@@ -120,7 +120,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.9.1",
+    "@gravity-ui/uikit": "^5.12.2",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-knobs": "^7.0.2",
diff --git a/src/blocks/ContentLayout/ContentLayout.scss b/src/blocks/ContentLayout/ContentLayout.scss
index bb142f10d..628e05133 100644
--- a/src/blocks/ContentLayout/ContentLayout.scss
+++ b/src/blocks/ContentLayout/ContentLayout.scss
@@ -60,6 +60,12 @@ $block: '.#{$ns}content-layout-block';
         padding: $indentXL;
     }
 
+    &_theme {
+        &_dark {
+            --g-color-line-focus: var(--pc-color-line-focus-dark);
+        }
+    }
+
     @media (max-width: map-get($gridBreakpoints, 'sm')) {
         &_background {
             padding: $indentM;
diff --git a/src/blocks/ContentLayout/ContentLayout.tsx b/src/blocks/ContentLayout/ContentLayout.tsx
index d487a7eec..8d05d96f9 100644
--- a/src/blocks/ContentLayout/ContentLayout.tsx
+++ b/src/blocks/ContentLayout/ContentLayout.tsx
@@ -48,7 +48,7 @@ export const ContentLayoutBlock = (props: ContentLayoutBlockProps) => {
     const colSizes = useMemo(() => getTextWidth(textWidth), [textWidth]);
 
     return (
-        <div className={b({size, background: Boolean(background)})}>
+        <div className={b({size, theme, background: Boolean(background)})}>
             <Content
                 className={b('content')}
                 {...textContent}
diff --git a/src/blocks/Icons/Icons.scss b/src/blocks/Icons/Icons.scss
index 016299f9e..9b0b6abfc 100644
--- a/src/blocks/Icons/Icons.scss
+++ b/src/blocks/Icons/Icons.scss
@@ -43,6 +43,10 @@ $block: '.#{$ns}icons-block';
         @include reset-link-style();
         margin: 0 $indentXXXS $indentSM;
     }
+    a#{$block}__item {
+        @include focusable();
+        border-radius: var(--g-focus-border-radius);
+    }
 
     &__image {
         max-width: 100%;
diff --git a/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss b/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss
index a7bc12803..2b7de20cd 100644
--- a/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss
+++ b/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss
@@ -13,10 +13,12 @@ $block: '.#{$ns}QuestionsBlockItem';
 
     &__title {
         @include heading4();
+        @include focusable();
 
         position: relative;
         padding-right: 24px;
         cursor: pointer;
+        border-radius: var(--g-focus-border-radius);
 
         a {
             @include link();
@@ -27,11 +29,22 @@ $block: '.#{$ns}QuestionsBlockItem';
         position: absolute;
         right: 0;
         top: 0;
+        bottom: 0;
+        margin: auto;
         color: var(--g-color-text-primary);
     }
 
     &__link {
         @include text-size(body-2);
+
+        @include add-specificity(&) {
+            a {
+                outline-offset: -2px; // as part of outline is hidden due to overflow: hidden from parent
+                border-radius: calc(
+                    var(--g-focus-border-radius) + 2px
+                ); // as outline-offset is -2px
+            }
+        }
     }
 
     &__text {
diff --git a/src/blocks/Slider/Arrow/Arrow.scss b/src/blocks/Slider/Arrow/Arrow.scss
index a0b8a059b..00656852f 100644
--- a/src/blocks/Slider/Arrow/Arrow.scss
+++ b/src/blocks/Slider/Arrow/Arrow.scss
@@ -40,6 +40,8 @@ $block: '.#{$ns}slider-block-arrow';
         box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
 
         transition: box-shadow 0.3s $ease-out-cubic, color 0.3s $ease-out-cubic;
+
+        @include focusable();
     }
 
     &:hover {
diff --git a/src/blocks/Slider/Slider.tsx b/src/blocks/Slider/Slider.tsx
index 36900537b..12aa0fec1 100644
--- a/src/blocks/Slider/Slider.tsx
+++ b/src/blocks/Slider/Slider.tsx
@@ -251,7 +251,7 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
         return (
             // To have this key differ from keys used in renderDot function, added `-accessible-bar` part
             <Fragment key={`${index}-accessible-bar`}>
-                {slidesCountByBreakpoint > 1 && (
+                {slidesCountByBreakpoint > 0 && (
                     <li
                         className={b('accessible-bar')}
                         aria-current
@@ -266,8 +266,9 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
         );
     };
 
-    const renderDot = (index: number) => {
+    const getCurrentSlideNumber = (index: number) => {
         const currentIndexDiff = index - currentIndex;
+
         let currentSlideNumber;
         if (0 <= currentIndexDiff && currentIndexDiff < slidesToShowCount) {
             currentSlideNumber = currentIndex + 1;
@@ -276,19 +277,26 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
         } else {
             currentSlideNumber = index + 1;
         }
+        return currentSlideNumber;
+    };
+    const isVisibleSlide = (index: number) => {
+        const currentIndexDiff = index - currentIndex;
 
+        return (
+            slidesCountByBreakpoint > 0 &&
+            0 <= currentIndexDiff &&
+            currentIndexDiff < slidesToShowCount
+        );
+    };
+
+    const renderDot = (index: number) => {
         return (
             <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}`}
+                aria-hidden={isVisibleSlide(index) ? true : undefined}
+                aria-label={`Slide ${getCurrentSlideNumber(index)} of ${barSlidesCount}`}
             ></li>
         );
     };
diff --git a/src/blocks/Slider/__tests__/Slider.test.tsx b/src/blocks/Slider/__tests__/Slider.test.tsx
index 0d0b7e335..9c0a3e7d5 100644
--- a/src/blocks/Slider/__tests__/Slider.test.tsx
+++ b/src/blocks/Slider/__tests__/Slider.test.tsx
@@ -41,30 +41,13 @@ describe('Slider', () => {
         const barDotsCount = CARDS_COUNT - slidesToShow + 1;
 
         // Checking labels for the first slide
-        if (slidesToShow > 1) {
-            // There we have a bar covering `slidesToShow` dots
-            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-            const accessibleBarElement = container.querySelector('.pc-SliderBlock__accessible-bar');
-            expect(accessibleBarElement?.getAttribute('aria-label')).toBe(
-                `Slide 1 of ${barDotsCount}`,
-            );
-            expect(
-                queryHelpers.queryAllByAttribute(
-                    'aria-label',
-                    container,
-                    `Slide 1 of ${barDotsCount}`,
-                ),
-            ).toHaveLength(slidesToShow + 1);
-        } else {
-            // There is no bar covering dots
-            expect(
-                queryHelpers.queryAllByAttribute(
-                    'aria-label',
-                    container,
-                    `Slide 1 of ${barDotsCount}`,
-                ),
-            ).toHaveLength(1);
-        }
+        // There we have a bar covering `slidesToShow` dots
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        const accessibleBarElement = container.querySelector('.pc-SliderBlock__accessible-bar');
+        expect(accessibleBarElement?.getAttribute('aria-label')).toBe(`Slide 1 of ${barDotsCount}`);
+        expect(
+            queryHelpers.queryAllByAttribute('aria-label', container, `Slide 1 of ${barDotsCount}`),
+        ).toHaveLength(slidesToShow + 1);
 
         // Checking labels for the slides starting from 2
         Array(barDotsCount - 1)
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index dbd6e47a7..46abdb553 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -4,6 +4,8 @@
 $block: '.#{$ns}button-block';
 
 #{$block} {
+    --yc-button-outline-color: var(--g-color-line-focus);
+
     &__content {
         display: flex;
         align-items: center;
@@ -34,6 +36,13 @@ $block: '.#{$ns}button-block';
         &_monochrome {
             @include monochrome-button();
         }
+
+        &_normal-contrast,
+        &_raised {
+            &:focus::before {
+                outline-offset: 1px;
+            }
+        }
     }
 
     &_size {
diff --git a/src/components/ButtonTabs/ButtonTabs.scss b/src/components/ButtonTabs/ButtonTabs.scss
index 658a503e1..a59c3d817 100644
--- a/src/components/ButtonTabs/ButtonTabs.scss
+++ b/src/components/ButtonTabs/ButtonTabs.scss
@@ -23,6 +23,9 @@ $block: '.#{$ns}button-tabs';
                     var(--pc-selected-tab-item-background-color),
                     $hoverBackgroundColor: var(--pc-selected-tab-item-background-color-hover)
                 );
+                &:focus::before {
+                    outline-offset: 1px;
+                }
             }
         }
     }
diff --git a/src/components/ButtonTabs/ButtonTabs.tsx b/src/components/ButtonTabs/ButtonTabs.tsx
index c5b2e4b09..4413664d3 100644
--- a/src/components/ButtonTabs/ButtonTabs.tsx
+++ b/src/components/ButtonTabs/ButtonTabs.tsx
@@ -65,7 +65,7 @@ const ButtonTabs: React.FC<ButtonTabsProps> = ({
                         size={tabSize}
                         onClick={handleClick(id)}
                         extraProps={{
-                            'aria-current': isActive,
+                            'aria-current': isActive || undefined,
                         }}
                     />
                 );
diff --git a/src/components/CardBase/CardBase.tsx b/src/components/CardBase/CardBase.tsx
index cc449c1f4..e5a9e759c 100644
--- a/src/components/CardBase/CardBase.tsx
+++ b/src/components/CardBase/CardBase.tsx
@@ -1,15 +1,18 @@
 import React, {Children, Fragment, HTMLAttributeAnchorTarget, ReactElement} from 'react';
 
+import {Link} from '@gravity-ui/uikit';
+
 import {useAnalytics} from '../../hooks';
 import {useMetrika} from '../../hooks/useMetrika';
 import {
+    AnalyticsEventsBase,
     ButtonPixel,
     CardBaseProps as CardBaseParams,
+    DefaultEventNames,
     ImageProps,
     MetrikaGoal,
     WithChildren,
 } from '../../models';
-import {AnalyticsEventsBase, DefaultEventNames} from '../../models/common';
 import {block, getQaAttrubutes} from '../../utils';
 import BackgroundImage from '../BackgroundImage/BackgroundImage';
 import RouterLink from '../RouterLink/RouterLink';
@@ -120,19 +123,21 @@ export const Layout = (props: CardBaseProps) => {
 
     return url ? (
         <RouterLink href={url}>
-            <a
+            <Link
                 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}
+                extraProps={{
+                    draggable: false,
+                    onDragStart: (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault(),
+                }}
+                qa={qa}
             >
                 {cardContent}
-            </a>
+            </Link>
         </RouterLink>
     ) : (
         <div className={fullClassName} data-qa={qa}>
diff --git a/src/components/Control/Control.scss b/src/components/Control/Control.scss
index adb6ce290..d8c7b7cf2 100644
--- a/src/components/Control/Control.scss
+++ b/src/components/Control/Control.scss
@@ -17,11 +17,12 @@ $block: '.#{$ns}control';
     display: flex;
     justify-content: center;
     align-items: center;
-
+    border-radius: var(--g-focus-border-radius);
     transition: color $transitionTime;
 
     @include reset-button-style();
     @include islands-focus();
+    @include focusable();
 
     &_size {
         &_xs {
diff --git a/src/components/FileLink/FileLink.scss b/src/components/FileLink/FileLink.scss
index 23d78152e..17cdb8802 100644
--- a/src/components/FileLink/FileLink.scss
+++ b/src/components/FileLink/FileLink.scss
@@ -29,6 +29,8 @@ $block: '.#{$ns}file-link';
 
     &__link > a {
         color: var(--g-color-text-primary);
+        border-radius: var(--g-focus-border-radius);
+        @include focusable();
     }
 
     &__link > a:hover {
diff --git a/src/components/FullscreenImage/FullscreenImage.scss b/src/components/FullscreenImage/FullscreenImage.scss
index b645644e5..0e871e997 100644
--- a/src/components/FullscreenImage/FullscreenImage.scss
+++ b/src/components/FullscreenImage/FullscreenImage.scss
@@ -10,6 +10,12 @@ $closeButtonSize: 36px;
 
         &-wrapper {
             position: relative;
+
+            &:hover {
+                #{$block}__icon-wrapper {
+                    opacity: 1;
+                }
+            }
         }
     }
 
@@ -31,6 +37,9 @@ $closeButtonSize: 36px;
     }
 
     &__icon-wrapper {
+        @include reset-button-style();
+        @include focusable();
+
         display: flex;
         align-items: center;
         justify-content: center;
@@ -45,7 +54,7 @@ $closeButtonSize: 36px;
         opacity: 0;
         transition: 0.3s;
 
-        &_visible {
+        &:focus {
             opacity: 1;
         }
     }
diff --git a/src/components/FullscreenImage/FullscreenImage.tsx b/src/components/FullscreenImage/FullscreenImage.tsx
index ae87edcd7..c5605d512 100644
--- a/src/components/FullscreenImage/FullscreenImage.tsx
+++ b/src/components/FullscreenImage/FullscreenImage.tsx
@@ -23,20 +23,13 @@ const CLOSE_ICON_SIZE = 30;
 const FullscreenImage = (props: FullscreenImageProps) => {
     const {imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt')} = props;
     const [isOpened, setIsOpened] = useState(false);
-    const [isMouseEnter, setIsMouseEnter] = useState(false);
 
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
-    const showFullscreenIcon = () => setIsMouseEnter(true);
-    const hideFullscreenIcon = () => setIsMouseEnter(false);
 
     return (
         <div className={b()}>
-            <div
-                className={b('image-wrapper')}
-                onMouseEnter={showFullscreenIcon}
-                onMouseLeave={hideFullscreenIcon}
-            >
+            <div className={b('image-wrapper')}>
                 <Image
                     {...props}
                     alt={alt}
@@ -44,19 +37,19 @@ const FullscreenImage = (props: FullscreenImageProps) => {
                     onClick={openModal}
                     style={imageStyle}
                 />
-                <div className={b('icon-wrapper', {visible: isMouseEnter})} onClick={openModal}>
+                <button className={b('icon-wrapper')} onClick={openModal}>
                     <Icon
                         data={Fullscreen}
                         width={FULL_SCREEN_ICON_SIZE}
                         height={FULL_SCREEN_ICON_SIZE}
                         className={b('icon')}
                     />
-                </div>
+                </button>
             </div>
             {isOpened && (
                 <Modal open={isOpened} onClose={closeModal} className={b('modal')}>
                     <div className={b('modal-content')}>
-                        <div
+                        <button
                             className={b('icon-wrapper', {visible: true})}
                             onClick={closeModal}
                             aria-label={i18n('close')}
@@ -67,7 +60,7 @@ const FullscreenImage = (props: FullscreenImageProps) => {
                                 height={CLOSE_ICON_SIZE}
                                 className={b('icon', {hover: true})}
                             />
-                        </div>
+                        </button>
                         <Image {...props} className={b('modal-image', modalImageClass)} />
                     </div>
                 </Modal>
diff --git a/src/components/FullscreenMedia/FullscreenMedia.scss b/src/components/FullscreenMedia/FullscreenMedia.scss
index 946db6178..75184f1c7 100644
--- a/src/components/FullscreenMedia/FullscreenMedia.scss
+++ b/src/components/FullscreenMedia/FullscreenMedia.scss
@@ -77,6 +77,12 @@ $modalYoutubeWidth: min(65vw, #{$newContentWidth});
             opacity: 0;
             transition: opacity 0.3s;
             pointer-events: none;
+
+            &_visible,
+            &:focus {
+                opacity: 1;
+                pointer-events: inherit;
+            }
         }
 
         &:hover {
diff --git a/src/components/FullscreenMedia/FullscreenMedia.tsx b/src/components/FullscreenMedia/FullscreenMedia.tsx
index 930d0a664..6d1a47ba1 100644
--- a/src/components/FullscreenMedia/FullscreenMedia.tsx
+++ b/src/components/FullscreenMedia/FullscreenMedia.tsx
@@ -1,6 +1,6 @@
 import React, {useContext, useState} from 'react';
 
-import {Icon, Modal} from '@gravity-ui/uikit';
+import {Button, Icon, Modal} from '@gravity-ui/uikit';
 
 import {MobileContext} from '../../context/mobileContext';
 import {Fullscreen, PreviewClose} from '../../icons';
@@ -44,27 +44,35 @@ const FullscreenMedia = ({children, showFullscreenIcon = true}: FullscreenMediaP
             <div className={b('media-wrapper')} onClickCapture={openModal}>
                 {children({className: b('inline-media')})}
                 {showFullscreenIcon && (
-                    <div className={b('icon-wrapper')} onClickCapture={openModal}>
+                    <Button
+                        className={b('icon-wrapper')}
+                        extraProps={{onClickCapture: openModal}}
+                        size={'l'}
+                    >
                         <Icon
                             data={Fullscreen}
                             width={FULL_SCREEN_ICON_SIZE}
                             height={FULL_SCREEN_ICON_SIZE}
                             className={b('icon')}
                         />
-                    </div>
+                    </Button>
                 )}
             </div>
             {isOpened && (
                 <Modal open={isOpened} onClose={closeModal} className={b('modal')}>
                     <div className={b('modal-content')}>
-                        <div className={b('icon-wrapper', {visible: true})} onClick={closeModal}>
+                        <Button
+                            className={b('icon-wrapper', {visible: true})}
+                            onClick={closeModal}
+                            size={'l'}
+                        >
                             <Icon
                                 data={PreviewClose}
                                 width={CLOSE_ICON_SIZE}
                                 height={CLOSE_ICON_SIZE}
                                 className={b('icon', {hover: true})}
                             />
-                        </div>
+                        </Button>
                         {children({
                             imageClassName: getMediaClass('image'),
                             videoClassName: getMediaClass('video'),
diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss
index 879672f3e..868fe1585 100644
--- a/src/components/Link/Link.scss
+++ b/src/components/Link/Link.scss
@@ -9,9 +9,11 @@ $block: '.#{$ns}link-block';
 
     &__link {
         @include link();
+        @include focusable();
 
         display: flex;
         align-items: center;
+        border-radius: var(--g-focus-border-radius);
 
         &_theme_dark {
             color: var(--g-color-text-light-primary);
diff --git a/src/components/Media/Image/Image.tsx b/src/components/Media/Image/Image.tsx
index 830d6c2e0..79eb2775b 100644
--- a/src/components/Media/Image/Image.tsx
+++ b/src/components/Media/Image/Image.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 
 import debounce from 'lodash/debounce';
 import {Interpolation, animated, config, useSpring} from 'react-spring';
@@ -126,9 +126,11 @@ const Image = (props: ImageAllProps) => {
 
         return (
             <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>
-                {imageArray.map((item) =>
-                    fullscreenItem ? renderFullscreenImage(item) : imageOnly(item),
-                )}
+                {imageArray.map((item, index) => (
+                    <Fragment key={index}>
+                        {fullscreenItem ? renderFullscreenImage(item) : imageOnly(item)}
+                    </Fragment>
+                ))}
             </SliderBlock>
         );
     };
diff --git a/src/components/OverflowScroller/OverflowScroller.scss b/src/components/OverflowScroller/OverflowScroller.scss
index ee684db7a..42ea837fb 100644
--- a/src/components/OverflowScroller/OverflowScroller.scss
+++ b/src/components/OverflowScroller/OverflowScroller.scss
@@ -1,4 +1,5 @@
 @import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
 
 $block: '.#{$ns}overflow-scroller';
 
@@ -28,6 +29,9 @@ $block: '.#{$ns}overflow-scroller';
     }
 
     &__arrow {
+        @include reset-button-style();
+        @include focusable();
+
         position: absolute;
         z-index: 10;
         top: 0;
@@ -42,6 +46,7 @@ $block: '.#{$ns}overflow-scroller';
         cursor: pointer;
 
         color: var(--g-color-text-secondary);
+        border-radius: var(--g-focus-border-radius);
 
         &_type_left {
             left: 0;
diff --git a/src/components/OverflowScroller/OverflowScroller.tsx b/src/components/OverflowScroller/OverflowScroller.tsx
index 291d5f7fd..b24aa7e6e 100644
--- a/src/components/OverflowScroller/OverflowScroller.tsx
+++ b/src/components/OverflowScroller/OverflowScroller.tsx
@@ -5,6 +5,8 @@ import debounce from 'lodash/debounce';
 import {ToggleArrow} from '..';
 import {block} from '../../utils';
 
+import i18n from './i18n';
+
 import './OverflowScroller.scss';
 
 const b = block('overflow-scroller');
@@ -78,13 +80,14 @@ export default class OverflowScroller extends React.Component<
                     </div>
                 </div>
                 {arrows.map((direction: Arrow) => (
-                    <div
+                    <button
                         key={direction}
                         className={b('arrow', {type: direction}, arrowClassName)}
                         onClick={(e: React.MouseEvent) => this.handleScrollClick(e, direction)}
+                        aria-label={i18n(direction)}
                     >
                         <ToggleArrow size={arrowSize} type={'horizontal'} iconType="navigation" />
-                    </div>
+                    </button>
                 ))}
             </div>
         );
diff --git a/src/components/OverflowScroller/i18n/en.json b/src/components/OverflowScroller/i18n/en.json
new file mode 100644
index 000000000..1ff8a514e
--- /dev/null
+++ b/src/components/OverflowScroller/i18n/en.json
@@ -0,0 +1,4 @@
+{
+  "left": "Previous",
+  "right": "Next"
+}
diff --git a/src/components/OverflowScroller/i18n/index.ts b/src/components/OverflowScroller/i18n/index.ts
new file mode 100644
index 000000000..bfb85ee6a
--- /dev/null
+++ b/src/components/OverflowScroller/i18n/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'OverflowScroller';
+
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/components/OverflowScroller/i18n/ru.json b/src/components/OverflowScroller/i18n/ru.json
new file mode 100644
index 000000000..393d970f0
--- /dev/null
+++ b/src/components/OverflowScroller/i18n/ru.json
@@ -0,0 +1,4 @@
+{
+  "left": "Предыдущий",
+  "right": "Следующий"
+}
diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss
index 994f90571..5709a061a 100644
--- a/src/components/ReactPlayer/CustomBarControls.scss
+++ b/src/components/ReactPlayer/CustomBarControls.scss
@@ -70,12 +70,7 @@ $withMuteControlWidth: 32px;
                     background: $videoPlayButtonGrey;
                 }
 
-                &:focus {
-                    outline: 2px solid var(--g-color-line-misc);
-                }
-                &:focus:not(:focus-visible) {
-                    outline: none;
-                }
+                @include focusable();
             }
 
             &_with-play-pause-button {
@@ -84,13 +79,7 @@ $withMuteControlWidth: 32px;
                 border-radius: 50%;
                 background: var(--g-color-base-background);
                 @include shadow();
-
-                &:focus {
-                    outline: 2px solid var(--g-color-line-misc);
-                }
-                &:focus:not(:focus-visible) {
-                    outline: none;
-                }
+                @include focusable();
             }
         }
     }
diff --git a/src/components/ReactPlayer/ReactPlayer.scss b/src/components/ReactPlayer/ReactPlayer.scss
index 5dae4b38a..a3d0f00fd 100644
--- a/src/components/ReactPlayer/ReactPlayer.scss
+++ b/src/components/ReactPlayer/ReactPlayer.scss
@@ -18,6 +18,7 @@ $block: '.#{$ns}ReactPlayer';
 
     &__button {
         @include reset-button-style();
+        @include focusable();
 
         display: flex;
         justify-content: center;
diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx
index f5b2e6ad2..7e1999b3a 100644
--- a/src/components/ReactPlayer/ReactPlayer.tsx
+++ b/src/components/ReactPlayer/ReactPlayer.tsx
@@ -391,6 +391,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                             onProgress={onProgress}
                             onEnded={onEnded}
                             aria-label={ariaLabel}
+                            previewTabIndex={-1}
                             config={{
                                 file: {
                                     attributes: {
diff --git a/src/components/Title/TitleItem.scss b/src/components/Title/TitleItem.scss
index a39233b57..caf91779f 100644
--- a/src/components/Title/TitleItem.scss
+++ b/src/components/Title/TitleItem.scss
@@ -41,8 +41,10 @@ $block: '.#{$ns}title-item';
     &__link {
         @include reset-link-style();
         @include reset-link-hover();
+        @include focusable();
 
         padding-right: 8px;
+        border-radius: var(--g-focus-border-radius);
 
         &:hover {
             cursor: pointer;
diff --git a/src/components/VideoBlock/VideoBlock.scss b/src/components/VideoBlock/VideoBlock.scss
index da6b3a735..79d507f17 100644
--- a/src/components/VideoBlock/VideoBlock.scss
+++ b/src/components/VideoBlock/VideoBlock.scss
@@ -31,6 +31,7 @@ $block: '.#{$ns}VideoBlock';
 
     &__button {
         @include reset-button-style();
+        @include focusable();
 
         display: flex;
         justify-content: center;
diff --git a/src/sub-blocks/BannerCard/BannerCard.scss b/src/sub-blocks/BannerCard/BannerCard.scss
index 10d2a4c0b..eba48c72c 100644
--- a/src/sub-blocks/BannerCard/BannerCard.scss
+++ b/src/sub-blocks/BannerCard/BannerCard.scss
@@ -13,6 +13,8 @@ $block: '.#{$ns}banner-card';
     $borderRadius: $borderRadius;
 
     &_theme_dark {
+        --g-color-line-focus: var(--pc-color-line-focus-dark);
+
         @include add-specificity(&) {
             #{$class}__title,
             #{$class}__subtitle {
diff --git a/src/sub-blocks/Content/Content.scss b/src/sub-blocks/Content/Content.scss
index a62627c6c..b54db71eb 100644
--- a/src/sub-blocks/Content/Content.scss
+++ b/src/sub-blocks/Content/Content.scss
@@ -139,6 +139,8 @@ $darkSecondary: var(--g-color-text-dark-secondary);
 
     &_theme {
         &_dark {
+            --g-color-line-focus: var(--pc-color-line-focus-dark);
+
             #{$block}__title *,
             #{$block}__text .yfm,
             #{$block}__text .yfm *,
diff --git a/src/sub-blocks/HubspotForm/HubspotForm.scss b/src/sub-blocks/HubspotForm/HubspotForm.scss
index 929e3d2ea..bb360a2d8 100644
--- a/src/sub-blocks/HubspotForm/HubspotForm.scss
+++ b/src/sub-blocks/HubspotForm/HubspotForm.scss
@@ -4,6 +4,8 @@
 $block: '.#{$ns}hubspot-form';
 
 #{$block} {
+    --g-color-line-focus: var(--pc-color-line-focus-light);
+
     $requiredWidth: 10px;
     $checkbox: 17px;
     $checkboxIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxwYXRoIGQ9Ik0xNS42MjMgMWwtOS4xNSAxMy4xNzQtNC4yODctNC42TDEgMTEuMDMgNi42MiAxNyAxNyAyLjI3IDE1LjYyMyAxeiIgZmlsbD0iIzAwMDAwMCIvPgo8L3N2Zz4K');
@@ -24,6 +26,7 @@ $block: '.#{$ns}hubspot-form';
         & > label {
             color: var(--g-color-text-primary);
             font-size: var(--g-text-body-2-font-size);
+            line-height: var(--g-text-body-2-line-height);
             display: flex;
             width: $fieldLabelWidth;
             max-width: 100%;
@@ -83,7 +86,7 @@ $block: '.#{$ns}hubspot-form';
             input[type='email'],
             textarea {
                 &:focus {
-                    border: 2px solid var(--g-color-base-brand);
+                    border: 2px solid var(--g-color-line-focus);
                     outline: none;
                 }
             }
@@ -107,7 +110,7 @@ $block: '.#{$ns}hubspot-form';
                 padding-right: 30px;
 
                 &:focus {
-                    border: 1px solid var(--g-color-line-generic-active);
+                    border: 1px solid var(--g-color-line-focus);
                 }
             }
 
@@ -157,7 +160,7 @@ $block: '.#{$ns}hubspot-form';
             span:not(.hs-form-required) {
                 color: var(--g-color-text-primary);
                 font-size: var(--g-text-body-2-font-size);
-                line-height: 16px;
+                line-height: var(--g-text-body-2-line-height);
                 padding-left: 7px;
                 margin: 0;
                 flex-grow: 1;
@@ -207,6 +210,9 @@ $block: '.#{$ns}hubspot-form';
                     background-color: #ffeba0;
                 }
             }
+            input[type='checkbox']:focus ~ span::before {
+                outline: 2px solid var(--g-color-line-focus);
+            }
         }
 
         .hs-form-radio-display {
@@ -259,7 +265,15 @@ $block: '.#{$ns}hubspot-form';
         p {
             color: var(--g-color-text-primary);
             @include text-body-2();
-            margin: 0 0 20px;
+            margin: $indentS 0;
+        }
+
+        a {
+            @include focusable(0, 'box-shadow');
+            &:focus {
+                outline: 0;
+                border-radius: var(--g-focus-border-radius);
+            }
         }
     }
 
@@ -269,6 +283,10 @@ $block: '.#{$ns}hubspot-form';
         color: var(--g-color-text-danger);
     }
 
+    .legal-consent-container {
+        padding-top: $indentXXXS;
+    }
+
     // wrapper for errors, checkbox list, radio list
     .inputs-list {
         list-style: none;
@@ -315,12 +333,13 @@ $block: '.#{$ns}hubspot-form';
 
     .hs-button.primary {
         @include button-reset();
+        @include focusable(1px);
         display: inline-block;
         position: relative;
         overflow: visible;
         box-sizing: border-box;
         height: 44px;
-        padding: 0 20px;
+        padding: 0 $indentS;
         border-radius: var(--g-border-radius-xl);
         background-color: var(--g-color-base-brand);
         color: var(--g-color-text-brand-contrast);
@@ -335,6 +354,7 @@ $block: '.#{$ns}hubspot-form';
         &:hover {
             background-color: var(--g-color-base-brand-hover);
         }
+        @include focusable(1px);
     }
 
     .grecaptcha-badge {
@@ -405,6 +425,8 @@ $block: '.#{$ns}hubspot-form';
 
     &_theme {
         &_dark {
+            --g-color-line-focus: var(--pc-color-line-focus-dark);
+
             .hs-form-field .input select {
                 background-image: $selectChevronDark;
             }
diff --git a/src/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.scss b/src/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.scss
index 4cf58c604..6d7800abd 100644
--- a/src/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.scss
+++ b/src/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.scss
@@ -35,10 +35,15 @@ $settingsIndentBetweenTitleAndDescriptionHeight: 2px;
     }
 
     &__foldable_title {
+        @include text-size(body-2);
+        @include reset-button-style();
+        @include focusable();
+
         cursor: pointer;
         display: flex;
+        align-items: center;
         font-weight: 400;
-        @include text-size(body-2);
+        border-radius: var(--g-focus-border-radius);
 
         &_color_cornflower {
             color: var(--g-color-text-link);
diff --git a/src/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.tsx b/src/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.tsx
index ce5f3c0ba..59e190885 100644
--- a/src/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.tsx
+++ b/src/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.tsx
@@ -71,14 +71,14 @@ const PriceDetails = (props: PriceDetailsExtendProps) => {
 
     const getFoldableTitle = () => {
         return (
-            <div
+            <button
                 className={b('foldable_title', {color: foldableColor, size: foldableSize})}
                 onClick={toggleOpen}
+                aria-expanded={isOpened}
             >
                 {foldableTitle}
-
                 <ToggleArrow open={isOpened} size={14} type={'vertical'} className={b('arrow')} />
-            </div>
+            </button>
         );
     };
 
diff --git a/styles/mixins.scss b/styles/mixins.scss
index dba8c9760..0dc97efc1 100644
--- a/styles/mixins.scss
+++ b/styles/mixins.scss
@@ -8,6 +8,26 @@
     line-height: var(--g-text-#{$name}-line-height);
 }
 
+@mixin focusable($offset: 0, $mode: 'outline') {
+    @if $mode == 'outline' {
+        &:focus {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: $offset;
+        }
+        &:focus:not(:focus-visible) {
+            outline: 0;
+        }
+    }
+    @if $mode == 'box-shadow' {
+        &:focus {
+            box-shadow: 0 0 0 2px var(--g-color-line-focus);
+        }
+        &:focus:not(:focus-visible) {
+            box-shadow: none;
+        }
+    }
+}
+
 @mixin link() {
     @include islands-focus();
 
diff --git a/styles/root.scss b/styles/root.scss
index 01847add4..b39b2ea7e 100644
--- a/styles/root.scss
+++ b/styles/root.scss
@@ -35,12 +35,18 @@
         --pc-monochrome-button-background-color-hover
     );
 
+    // focus color
+    --pc-color-line-focus-light: var(--g-color-text-brand);
+    --pc-color-line-focus-dark: var(--g-color-text-light-primary);
+
     &_theme_light {
         @include pc-colors-light;
+        --g-color-line-focus: var(--pc-color-line-focus-light);
     }
 
     &_theme_dark {
         @include pc-colors-dark;
+        --g-color-line-focus: var(--pc-color-line-focus-dark);
     }
 
     &.g-root_theme_dark {
diff --git a/styles/yfm.scss b/styles/yfm.scss
index 0a6027bed..fcdd161c1 100644
--- a/styles/yfm.scss
+++ b/styles/yfm.scss
@@ -85,6 +85,8 @@
 
     a {
         @include link();
+        @include focusable(0, 'box-shadow');
+        border-radius: var(--g-focus-border-radius);
     }
 
     table {