[Focus states] Use :focus-visible over :focus for focus-ring state.

.changeset/pink-students-compare.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Update focus states to be present on :focus-visible rather than :focus

polaris-react/src/components/ActionList/ActionList.scss

@@ -81,7 +81,7 @@
     background-color: var(--p-surface-pressed);
   }
 
-  &:focus:not(:active) {
+  &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
     outline: var(--p-border-width-3) solid transparent;

polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss

@@ -59,7 +59,7 @@
     background-color: var(--p-surface-pressed);
   }
 
-  &:focus:not(:active) {
+  &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }

polaris-react/src/components/Banner/Banner.scss

@@ -236,7 +236,7 @@
     text-decoration: underline;
   }
 
-  &:focus > .Text {
+  &:focus-visible > .Text {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include plain-button-backdrop;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -269,7 +269,7 @@
   letter-spacing: initial;
   color: var(--p-text);
 
-  &:focus {
+  &:focus-visible {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }

polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss

@@ -43,11 +43,11 @@
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline: none;
   }
 
-  &:focus:not(:active) {
+  &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }

polaris-react/src/components/Button/Button.scss

@@ -291,7 +291,7 @@
     box-shadow: none;
   }
 
-  &:focus {
+  &:focus-visible {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include no-focus-ring;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -303,7 +303,7 @@
     }
   }
 
-  &:focus:not(:active) {
+  &:focus-visible:not(:active) {
     > .Content {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($style: 'focused');
@@ -574,7 +574,7 @@
       }
     }
 
-    &:focus {
+    &:focus-visible {
       box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($style: 'focused');

polaris-react/src/components/Checkbox/Checkbox.scss

@@ -12,7 +12,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include visually-hidden;
 
-  &.keyFocused {
+  &:focus-visible {
     + .Backdrop {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($style: 'focused');

polaris-react/src/components/Checkbox/Checkbox.tsx

@@ -2,7 +2,6 @@ import React, {
   forwardRef,
   useRef,
   useImperativeHandle,
-  useState,
   useContext,
 } from 'react';
 import {MinusMinor, TickSmallMinor} from '@shopify/polaris-icons';
@@ -13,7 +12,7 @@ import {useUniqueId} from '../../utilities/unique-id';
 import {Choice, helpTextID} from '../Choice';
 import {errorTextID} from '../InlineError';
 import {Icon} from '../Icon';
-import {Error, CheckboxHandles, Key} from '../../types';
+import type {Error, CheckboxHandles} from '../../types';
 import {WithinListboxContext} from '../../utilities/listbox/context';
 
 import styles from './Checkbox.scss';
@@ -76,7 +75,6 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
       setTrue: handleMouseOver,
       setFalse: handleMouseOut,
     } = useToggle(false);
-    const [keyFocused, setKeyFocused] = useState(false);
     const isWithinListbox = useContext(WithinListboxContext);
 
     useImperativeHandle(ref, () => ({
@@ -89,15 +87,6 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
 
     const handleBlur = () => {
       onBlur && onBlur();
-      setKeyFocused(false);
-    };
-
-    const handleKeyUp = (event: React.KeyboardEvent) => {
-      const {keyCode} = event;
-
-      if (keyCode === Key.Space || keyCode === Key.Tab) {
-        !keyFocused && setKeyFocused(true);
-      }
     };
 
     const handleOnClick = () => {
@@ -142,7 +131,6 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
     const inputClassName = classNames(
       styles.Input,
       isIndeterminate && styles['Input-indeterminate'],
-      keyFocused && styles.keyFocused,
     );
 
     return (
@@ -170,7 +158,6 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
             onChange={noop}
             onClick={handleOnClick}
             onFocus={onFocus}
-            onKeyUp={handleKeyUp}
             aria-invalid={error != null}
             aria-controls={ariaControls}
             aria-describedby={ariaDescribedBy}

polaris-react/src/components/Checkbox/tests/Checkbox.test.tsx

@@ -1,7 +1,6 @@
 import React, {AllHTMLAttributes} from 'react';
 import {mountWithApp} from 'tests/utilities';
 
-import {Key} from '../../../types';
 import {Checkbox} from '../Checkbox';
 
 describe('<Checkbox />', () => {
@@ -276,31 +275,6 @@ describe('<Checkbox />', () => {
       });
     });
   });
-
-  describe('Focus className', () => {
-    it('on keyUp adds a keyFocused class to the input', () => {
-      const checkbox = mountWithApp(<Checkbox label="Checkbox" />);
-
-      checkbox.find('input')!.trigger('onKeyUp', {
-        keyCode: Key.Space,
-      });
-
-      expect(checkbox).toContainReactComponent('input', {
-        className: 'Input keyFocused',
-      });
-    });
-
-    it('on change does not add a keyFocused class to the input', () => {
-      const checkbox = mountWithApp(<Checkbox label="Checkbox" />);
-      const checkboxInput = checkbox.find('input');
-      checkboxInput!.trigger('onChange', {
-        currentTarget: checkboxInput!.domNode as HTMLInputElement,
-      });
-      expect(checkbox).not.toContainReactComponent('input', {
-        className: 'Input keyFocused',
-      });
-    });
-  });
 });
 
 function noop() {}

polaris-react/src/components/DataTable/DataTable.scss

@@ -245,7 +245,7 @@
     }
   }
 
-  &:focus:not(:active) {
+  &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
 

polaris-react/src/components/DatePicker/DatePicker.scss

@@ -77,7 +77,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring;
 
-  &:focus:not(:active) {
+  &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }

polaris-react/src/components/Filters/Filters.scss

@@ -131,7 +131,7 @@ $list-filters-footer-height: 70px;
     outline: var(--p-border-width-1) solid transparent;
   }
 
-  &:focus:not(:active) {
+  &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }

polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss

@@ -21,7 +21,7 @@
     background: var(--p-surface-pressed);
   }
 
-  &:focus:not(:active) {
+  &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }

polaris-react/src/components/Navigation/Navigation.scss

@@ -141,12 +141,12 @@ $disabled-fade: 0.6;
   @include focus-ring;
 
   &:hover,
-  &.keyFocused {
+  &:focus-visible {
     background-color: var(--p-background-hovered);
     color: var(--p-text-primary-hovered);
   }
 
-  .keyFocused {
+  :focus-visible {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }
@@ -394,7 +394,7 @@ $disabled-fade: 0.6;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring;
 
-  &:focus {
+  &:focus-visible {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }
@@ -443,8 +443,7 @@ $disabled-fade: 0.6;
       color: var(--p-text-subdued);
     }
 
-    // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
-    &.keyFocused {
+    &:focus-visible {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($style: 'focused');
       color: var(--p-text);
@@ -482,8 +481,8 @@ $disabled-fade: 0.6;
     &:hover {
       color: var(--p-text-primary-hovered);
     }
-    // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
-    &.keyFocused {
+
+    &:focus-visible {
       color: var(--p-text-primary);
     }
 
@@ -610,7 +609,7 @@ $disabled-fade: 0.6;
       @include recolor-icon($filter-color: var(--p-filter-icon));
     }
 
-    &:focus {
+    &:focus-visible {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($style: 'focused');
     }
@@ -653,7 +652,7 @@ $disabled-fade: 0.6;
     color: var(--p-text-primary);
   }
 
-  &:focus {
+  &:focus-visible {
     outline: none;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');

polaris-react/src/components/Navigation/Navigation.stories.tsx

@@ -719,6 +719,7 @@ export function WithVariousStatesAndSecondaryElements() {
                 {
                   url: '/admin/products',
                   disabled: false,
+                  selected: true,
                   label: 'Selected sub item',
                 },
                 {

polaris-react/src/components/Navigation/_variables.scss

@@ -41,7 +41,7 @@ $nav-animation-variables: (
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring;
 
-  &.keyFocused {
+  &:focus-visible {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
     background: var(--p-background-hovered);
@@ -127,7 +127,7 @@ $nav-animation-variables: (
   }
 
   .Item:hover &,
-  .Item.keyFocused & {
+  .Item:focus-visible & {
     // stylelint-disable -- generated by polaris-migrator DO NOT COPY
     @include recolor-icon(
       $fill-color: var(--p-icon),
@@ -142,7 +142,7 @@ $nav-animation-variables: (
   .subNavigationActive:hover &,
   .Item-child-active &,
   .Item-child-active:hover &,
-  .Item-selected.keyFocused & {
+  .Item-selected:focus-visible & {
     // stylelint-disable -- generated by polaris-migrator DO NOT COPY
     @include recolor-icon(
       $fill-color: var(--p-action-primary),