Show focus styles only when needed (#1022)

* Apply focus styles only when appropriate * Simplify Checkbox and RadioButton focus styles * Revert Selector refactor to apply new focus styles * Fix focus styles for ImageInput and Table
sumup-oss · Jul 6, 2021 · afb2eb2 · afb2eb2
1 parent cee2c0c
commit afb2eb2
Show file tree

Hide file tree

Showing 50 changed files with 847 additions and 263 deletions.
diff --git a/.changeset/real-dolphins-build.md b/.changeset/real-dolphins-build.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added the `focusVisible` style mixin that shows a focus outline only when the user agent determines via heuristics that the focus should be made evident on the element (see [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)).
diff --git a/packages/circuit-ui/components/Anchor/Anchor.tsx b/packages/circuit-ui/components/Anchor/Anchor.tsx
@@ -25,7 +25,7 @@ import { css } from '@emotion/core';
 import { Dispatch as TrackingProps } from '@sumup/collector';
 import { Theme } from '@sumup/design-tokens';
 
-import { focusOutline } from '../../styles/style-mixins';
+import { focusVisible } from '../../styles/style-mixins';
 import { ReturnType } from '../../types/return-type';
 import { Body, BodyProps } from '../Body/Body';
 import { useComponents } from '../ComponentsContext';
@@ -51,7 +51,7 @@ type ButtonElProps = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'onClick'>;
 
 export type AnchorProps = BaseProps & LinkElProps & ButtonElProps;
 
-const baseStyles = (theme: Theme) => css`
+const anchorStyles = (theme: Theme) => css`
   display: inline-block;
   text-decoration: underline;
   text-decoration-skip-ink: auto;
@@ -63,6 +63,7 @@ const baseStyles = (theme: Theme) => css`
   margin-left: 0;
   margin-right: 0;
   color: ${theme.colors.p500};
+  border-radius: ${theme.borderRadius.byte};
   transition: opacity ${theme.transitions.default},
     color ${theme.transitions.default},
     background-color ${theme.transitions.default},
@@ -86,10 +87,7 @@ const baseStyles = (theme: Theme) => css`
     }
   }
 
-  &:focus {
-    ${focusOutline({ theme })};
-    border-radius: ${theme.borderRadius.byte};
-  }
+  ${focusVisible(theme)};
 `;
 
 /**
@@ -119,7 +117,7 @@ export const Anchor = forwardRef(
       return (
         <Body
           {...props}
-          css={baseStyles}
+          css={anchorStyles}
           as={Link}
           ref={ref}
           onClick={handleClick}
@@ -131,7 +129,7 @@ export const Anchor = forwardRef(
       <Body
         as="button"
         {...props}
-        css={baseStyles}
+        css={anchorStyles}
         ref={ref}
         onClick={handleClick}
       />

diff --git a/packages/circuit-ui/components/Anchor/__snapshots__/Anchor.spec.tsx.snap b/packages/circuit-ui/components/Anchor/__snapshots__/Anchor.spec.tsx.snap
@@ -18,6 +18,7 @@ exports[`Anchor styles should render with custom styles 1`] = `
   margin-left: 0;
   margin-right: 0;
   color: #3063E9;
+  border-radius: 8px;
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   color: rebeccapurple;
@@ -44,13 +45,16 @@ exports[`Anchor styles should render with custom styles 1`] = `
 .circuit-0:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
-  border-radius: 8px;
 }
 
 .circuit-0:focus::-moz-focus-inner {
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 <a
   class="circuit-0"
   href="https://sumup.com"
@@ -77,6 +81,7 @@ exports[`Anchor styles should render with default styles 1`] = `
   margin-left: 0;
   margin-right: 0;
   color: #3063E9;
+  border-radius: 8px;
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
 }
@@ -102,13 +107,16 @@ exports[`Anchor styles should render with default styles 1`] = `
 .circuit-0:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
-  border-radius: 8px;
 }
 
 .circuit-0:focus::-moz-focus-inner {
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 <a
   class="circuit-0"
   href="https://sumup.com"

diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx
@@ -32,7 +32,7 @@ import styled, { StyleProps } from '../../styles/styled';
 import {
   typography,
   disableVisually,
-  focusOutline,
+  focusVisible,
 } from '../../styles/style-mixins';
 import { ReturnType } from '../../types/return-type';
 import { useComponents } from '../ComponentsContext';
@@ -139,10 +139,6 @@ const baseStyles = ({ theme }: StyleProps) => css`
     background-color ${theme.transitions.default},
     border-color ${theme.transitions.default};
 
-  &:focus {
-    ${focusOutline({ theme })};
-  }
-
   &:disabled,
   &[disabled] {
     ${disableVisually()};
@@ -271,6 +267,7 @@ const StyledButton = styled('button', {
   shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'size',
 })<ButtonProps>(
   typography('one'),
+  focusVisible,
   baseStyles,
   primaryStyles,
   secondaryStyles,

diff --git a/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap b/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap
@@ -44,6 +44,10 @@ exports[`Button styles should render a button with icon 1`] = `
   border: 0;
 }
 
+.circuit-1:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-1:disabled,
 .circuit-1[disabled] {
   opacity: 0.5;
@@ -137,6 +141,10 @@ exports[`Button styles should render a disabled button 1`] = `
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0:disabled,
 .circuit-0[disabled] {
   opacity: 0.5;
@@ -206,6 +214,10 @@ exports[`Button styles should render a giga button 1`] = `
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0:disabled,
 .circuit-0[disabled] {
   opacity: 0.5;
@@ -274,6 +286,10 @@ exports[`Button styles should render a kilo button 1`] = `
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0:disabled,
 .circuit-0[disabled] {
   opacity: 0.5;
@@ -342,6 +358,10 @@ exports[`Button styles should render a primary button by default 1`] = `
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0:disabled,
 .circuit-0[disabled] {
   opacity: 0.5;
@@ -410,6 +430,10 @@ exports[`Button styles should render a secondary button 1`] = `
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0:disabled,
 .circuit-0[disabled] {
   opacity: 0.5;
@@ -479,6 +503,10 @@ exports[`Button styles should render a stretched button 1`] = `
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0:disabled,
 .circuit-0[disabled] {
   opacity: 0.5;
@@ -549,6 +577,10 @@ exports[`Button styles should render a tertiary button 1`] = `
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0:disabled,
 .circuit-0[disabled] {
   opacity: 0.5;

diff --git a/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap b/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap
@@ -44,6 +44,10 @@ exports[`ButtonGroup Center aligment should render with center alignment styles
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0:disabled,
 .circuit-0[disabled] {
   opacity: 0.5;
@@ -104,6 +108,10 @@ exports[`ButtonGroup Center aligment should render with center alignment styles
   border: 0;
 }
 
+.circuit-1:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-1:disabled,
 .circuit-1[disabled] {
   opacity: 0.5;
@@ -229,6 +237,10 @@ exports[`ButtonGroup Left aligment should render with left alignment styles 1`]
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0:disabled,
 .circuit-0[disabled] {
   opacity: 0.5;
@@ -289,6 +301,10 @@ exports[`ButtonGroup Left aligment should render with left alignment styles 1`]
   border: 0;
 }
 
+.circuit-1:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-1:disabled,
 .circuit-1[disabled] {
   opacity: 0.5;
@@ -462,6 +478,10 @@ exports[`ButtonGroup should render with default styles 1`] = `
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0:disabled,
 .circuit-0[disabled] {
   opacity: 0.5;
@@ -522,6 +542,10 @@ exports[`ButtonGroup should render with default styles 1`] = `
   border: 0;
 }
 
+.circuit-1:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-1:disabled,
 .circuit-1[disabled] {
   opacity: 0.5;

diff --git a/packages/circuit-ui/components/Calendar/__snapshots__/RangePicker.spec.js.snap b/packages/circuit-ui/components/Calendar/__snapshots__/RangePicker.spec.js.snap
@@ -1265,6 +1265,10 @@ exports[`RangePicker should render with default styles 1`] = `
   border: 0;
 }
 
+.circuit-2 .DayPickerNavigation_button__horizontal:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-2 .DayPickerNavigation_button__horizontal:disabled,
 .circuit-2 .DayPickerNavigation_button__horizontal[disabled] {
   opacity: 0.5;

diff --git a/packages/circuit-ui/components/Calendar/__snapshots__/SingleDayPicker.spec.js.snap b/packages/circuit-ui/components/Calendar/__snapshots__/SingleDayPicker.spec.js.snap
@@ -1265,6 +1265,10 @@ exports[`SingleDayPicker should render with default styles 1`] = `
   border: 0;
 }
 
+.circuit-0 .DayPickerNavigation_button__horizontal:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0 .DayPickerNavigation_button__horizontal:disabled,
 .circuit-0 .DayPickerNavigation_button__horizontal[disabled] {
   opacity: 0.5;

diff --git a/packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.js b/packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.js
@@ -20,7 +20,7 @@ import { withTheme } from 'emotion-theming';
 import {
   typography,
   shadowTriple,
-  focusOutline,
+  focusVisible,
   disableVisually,
 } from '../../../../styles/style-mixins';
 
@@ -178,9 +178,7 @@ const navButtons = ({ theme }) => css`
       border-color: ${theme.colors.n800};
     }
 
-    &:focus {
-      ${focusOutline({ theme })};
-    }
+    ${focusVisible(theme)};
 
     &:disabled,
     &[disabled] {

diff --git a/...components/Calendar/components/CalendarWrapper/__snapshots__/CalendarWrapper.spec.js.snap b/...components/Calendar/components/CalendarWrapper/__snapshots__/CalendarWrapper.spec.js.snap
@@ -1265,6 +1265,10 @@ exports[`CalendarWrapper should render with default styles 1`] = `
   border: 0;
 }
 
+.circuit-0 .DayPickerNavigation_button__horizontal:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .circuit-0 .DayPickerNavigation_button__horizontal:disabled,
 .circuit-0 .DayPickerNavigation_button__horizontal[disabled] {
   opacity: 0.5;

diff --git a/packages/circuit-ui/components/CalendarTag/__snapshots__/CalendarTag.spec.js.snap b/packages/circuit-ui/components/CalendarTag/__snapshots__/CalendarTag.spec.js.snap
@@ -48,6 +48,10 @@ exports[`CalendarTag should render with default styles 1`] = `
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 <div>
   <div
     class="circuit-1"

diff --git a/...es/circuit-ui/components/CalendarTagTwoStep/__snapshots__/CalendarTagTwoStep.spec.js.snap b/...es/circuit-ui/components/CalendarTagTwoStep/__snapshots__/CalendarTagTwoStep.spec.js.snap
@@ -48,6 +48,10 @@ exports[`CalendarTagTwoStep should render with default styles 1`] = `
   border: 0;
 }
 
+.circuit-0:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 <div>
   <div
     class="circuit-1"