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

* feat: adding focus styles for interactive elements
gravity-ui · Oct 18, 2023 · 4c6dd96 · 4c6dd96
1 parent e058713
commit 4c6dd96
Show file tree

Hide file tree

Showing 39 changed files with 231 additions and 98 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
         }
     }