feat: add CSS variables to control focus outline (#973)

Co-authored-by: kkmch <[email protected]>
gravity-ui · Sep 2, 2023 · d926ef8 · d926ef8
1 parent e19d0b9
commit d926ef8
Show file tree

Hide file tree

Showing 18 changed files with 47 additions and 14 deletions.
diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -19,6 +19,17 @@ $block: '.#{variables.$ns}breadcrumbs';
         white-space: nowrap;
         text-overflow: ellipsis;
 
+        &:focus {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: -4px; // due to padding
+            border-radius: calc(
+                var(--g-focus-border-radius) + 4px
+            ); // +4px as outline-offset is -4px
+        }
+        &:focus:not(:focus-visible) {
+            outline: 0;
+        }
+
         &_current {
             padding: 0 8px;
         }

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -21,7 +21,7 @@ $iconWidth: 16px;
 #{$block} {
     --yc-button-background-color: transparent;
     --yc-button-background-color-hover: var(--g-color-base-simple-hover);
-    --yc-button-outline-color: var(--g-color-line-misc);
+    --yc-button-outline-color: var(--g-color-line-focus);
     --yc-button-icon-space: calc(
         var(--yc-button-padding) + var(--yc-button-icon-size) + var(--yc-button-icon-offset)
     );
@@ -150,6 +150,11 @@ $iconWidth: 16px;
         &_action {
             --yc-button-background-color: var(--g-color-base-brand);
             --yc-button-background-color-hover: var(--g-color-base-brand-hover);
+            --yc-button-outline-color: var(--g-color-base-brand);
+
+            &:focus::before {
+                outline-offset: 1px;
+            }
 
             @include button-text-color(var(--g-color-text-brand-contrast));
         }

diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -35,7 +35,7 @@ $block: '.#{variables.$ns}card';
 
             &:focus::after {
                 content: '';
-                box-shadow: 0 0 0 2px var(--g-color-line-misc);
+                box-shadow: 0 0 0 2px var(--g-color-line-focus);
             }
 
             &:focus:not(:focus-visible)::after {
@@ -87,7 +87,7 @@ $block: '.#{variables.$ns}card';
 
             &:focus::after {
                 content: '';
-                box-shadow: 0 0 0 2px var(--g-color-line-misc);
+                box-shadow: 0 0 0 2px var(--g-color-line-focus);
             }
 
             &:focus:not(:focus-visible)::after {

diff --git a/src/components/Card/__tests__/Card.test.tsx b/src/components/Card/__tests__/Card.test.tsx
@@ -4,8 +4,8 @@ import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {Button} from '../../Button';
-import {Card} from '../Card';
 import type {CardSize, CardTheme, CardType, CardView} from '../Card';
+import {Card} from '../Card';
 
 const qaId = 'card-component';
 const cardText = 'Some text';

diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss
@@ -72,7 +72,7 @@ $block: '.#{variables.$ns}checkbox';
     }
 
     &__control:focus + &__outline {
-        box-shadow: 0 0 0 2px var(--g-color-line-misc);
+        box-shadow: 0 0 0 2px var(--g-color-line-focus);
     }
 
     &__control:focus:not(:focus-visible) + &__outline {

diff --git a/src/components/Disclosure/Disclosure.scss b/src/components/Disclosure/Disclosure.scss
@@ -24,11 +24,14 @@ $gap: 8px;
         font-size: inherit;
         line-height: inherit;
         font-weight: inherit;
+        border-radius: var(--g-focus-border-radius);
+
         &:focus {
-            outline: 2px solid var(--g-color-line-misc);
+            outline: 2px solid var(--g-color-line-focus);
         }
+
         &:focus:not(:focus-visible) {
-            outline: none;
+            outline: 0;
         }
     }
     &__trigger_arrow-right {

diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss
@@ -7,9 +7,10 @@ $block: '.#{variables.$ns}link';
     touch-action: manipulation;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     cursor: pointer;
+    border-radius: var(--g-focus-border-radius);
 
     &:focus {
-        outline: 2px solid var(--g-color-line-misc);
+        outline: 2px solid var(--g-color-line-focus);
     }
 
     &:focus:not(:focus-visible) {

diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/mixins.scss';
+@use '../../../styles/mixins';
 @use '../variables';
 
 $block: '.#{variables.$ns}popover';

diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts
@@ -17,7 +17,7 @@ export type PopoverButtonProps = {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
-export type PopoverExternalProps = {
+export interface PopoverExternalProps {
     /** Tooltip's trigger content over which the tooltip is shown */
     children?: TriggerProps['children'];
     /** Tooltip's title */
@@ -70,7 +70,7 @@ export type PopoverExternalProps = {
     autoFocus?: boolean;
     /** Focused element when the popover closes */
     restoreFocusRef?: React.RefObject<HTMLElement>;
-};
+}
 
 export type PopoverBehaviorProps = {
     /** Tooltip open/close behaviour when `openOnHover`

diff --git a/src/components/Radio/Radio.scss b/src/components/Radio/Radio.scss
@@ -69,7 +69,7 @@ $discMarginLSize: 6px;
     }
 
     &__control:focus + &__outline {
-        box-shadow: 0 0 0 2px var(--g-color-line-misc);
+        box-shadow: 0 0 0 2px var(--g-color-line-focus);
     }
 
     &__control:focus:not(:focus-visible) + &__outline {

diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss
@@ -59,7 +59,7 @@ $block: '.#{variables.$ns}radio-button';
             cursor: inherit;
 
             &:focus + #{$block}__option-outline {
-                box-shadow: 0 0 0 2px var(--g-color-line-misc);
+                box-shadow: 0 0 0 2px var(--g-color-line-focus);
             }
 
             &:focus:not(:focus-visible) + #{$block}__option-outline {

diff --git a/src/components/Switch/Switch.scss b/src/components/Switch/Switch.scss
@@ -51,7 +51,7 @@ $block: '.#{variables.$ns}switch';
     }
 
     &__control:focus + &__outline {
-        box-shadow: 0 0 0 2px var(--g-color-line-misc);
+        box-shadow: 0 0 0 2px var(--g-color-line-focus);
     }
 
     &__control:focus:not(:focus-visible) + &__outline {

diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss
@@ -52,6 +52,7 @@ $block: '.#{variables.$ns}tabs';
         &-content {
             display: flex;
             align-items: center;
+            border-radius: var(--g-focus-border-radius);
 
             #{$block}__item_overflow & {
                 min-width: 0;
@@ -79,6 +80,12 @@ $block: '.#{variables.$ns}tabs';
         &-icon > svg {
             display: block;
         }
+
+        &:focus {
+            #{$block}__item-content {
+                outline: 2px solid var(--g-color-line-focus);
+            }
+        }
     }
 
     &_direction_horizontal {

diff --git a/styles/themes/common/_index.scss b/styles/themes/common/_index.scss
@@ -12,4 +12,6 @@
     --g-border-radius-m: 6px;
     --g-border-radius-l: 8px;
     --g-border-radius-xl: 10px;
+
+    --g-focus-border-radius: 2px;
 }
diff --git a/styles/themes/dark-hc/line.scss b/styles/themes/dark-hc/line.scss
@@ -13,6 +13,7 @@
     --g-color-line-warning: var(--g-color-private-yellow-550-solid);
     --g-color-line-danger: var(--g-color-private-red-550-solid);
     --g-color-line-misc: var(--g-color-private-cool-grey-550-solid);
+    --g-color-line-focus: var(--g-color-private-cool-grey-550-solid);
 
     --g-color-line-light: var(--g-color-private-white-500);
 }
diff --git a/styles/themes/dark/line.scss b/styles/themes/dark/line.scss
@@ -13,6 +13,7 @@
     --g-color-line-warning: var(--g-color-private-yellow-450);
     --g-color-line-danger: var(--g-color-private-red-450);
     --g-color-line-misc: var(--g-color-private-cool-grey-450);
+    --g-color-line-focus: var(--g-color-private-cool-grey-450);
 
     --g-color-line-light: var(--g-color-private-white-500);
 }
diff --git a/styles/themes/light-hc/line.scss b/styles/themes/light-hc/line.scss
@@ -13,6 +13,7 @@
     --g-color-line-warning: var(--g-color-private-yellow-600-solid);
     --g-color-line-danger: var(--g-color-private-red-450);
     --g-color-line-misc: var(--g-color-private-cool-grey-450);
+    --g-color-line-focus: var(--g-color-private-cool-grey-450);
 
     --g-color-line-light: var(--g-color-private-white-500);
 }
diff --git a/styles/themes/light/line.scss b/styles/themes/light/line.scss
@@ -13,6 +13,7 @@
     --g-color-line-warning: var(--g-color-private-yellow-600-solid);
     --g-color-line-danger: var(--g-color-private-red-450);
     --g-color-line-misc: var(--g-color-private-cool-grey-450);
+    --g-color-line-focus: var(--g-color-private-cool-grey-450);
 
     --g-color-line-light: var(--g-color-private-white-500);
 }