feat: added focus styles for interactive elements (#576)

* feat: adding focus styles for interactive elements

Author: Kyzyl-ool

package-lock.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",

package.json

@@ -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;

src/blocks/ContentLayout/ContentLayout.scss

@@ -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}

src/blocks/ContentLayout/ContentLayout.tsx

@@ -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%;

src/blocks/Icons/Icons.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 {

src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.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 {

src/blocks/Slider/Arrow/Arrow.scss

@@ -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>
         );
     };

src/blocks/Slider/Slider.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)

src/blocks/Slider/__tests__/Slider.test.tsx

@@ -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 {