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

[mrcthms]

WHY are these changes introduced?

Fixes #8053
Related to: #7585 and #818
We currently use a focus-ring to show a merchant which element is currently in focus. This is useful particularly for users that don't use a traditional pointer device to navigate through the admin. We currently use the :focus CSS selector to add these focus rings to interactive elements.

Whilst this is an important accessibility necessity, it can leave the admin looking very busy for merchants that do use a traditional pointer device, with focus rings appearing on every interaction.

There is a CSS selector named :focus-visible, which allows the browser to determine when to show the focus state depending on the input device that controls the focus state, and the element in question. This will allow us to persist the vital focus state visibility for users navigating the admin via keyboard, but will leave the admin feeling cleaner for those merchants using a mouse or other pointer device.

WHAT is this pull request doing?

This PR updates instances of :focus to show a focus ring and replaces them with :focus-visible. It also tidies up some legacy code in some components to detect for keyFocus only, preferring to use the browser standard :focus-visible rather than some internal component logic to figure out when focus is being managed by a keyboard.

Note: The Listbox remains untouched as the focus state logic there is pretty custom and will require somebody with more domain knowledge to update that component

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[mrcthms]

/snapit

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	212.09 KB (-0.1% 🔽)
polaris-react-esm	137.08 KB (-0.17% 🔽)
polaris-react-esnext	192.65 KB (-0.13% 🔽)
polaris-react-css	42.02 KB (+0.06% 🔺)

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[chloerice]

Tophatted all affected components and all are as expected between keyboard and mouse focus, thanks for tackling this @mrcthms!! 🙌🏽 I'll update the Listbox, it should only show the surface-selected state and not use focus-ring (purely a CSS change)

[chloerice]

This code doesn't need to be changed as it isn't published, it's just a reference to the legacy Sass styles.

[mrcthms]

Thanks @chloerice, much appreciated! LMK if you want a reviewer of the Listbox update.