Consider using `:focus-visible` instead of `:focus` for styling focus states

Summary

With :focus-visible now being supported across all modern browsers, it is possible to replace older JS-based techniques for managing cross-browser focus styles (such as What Input? or Blueprint's FocusStyleManager) with a browser-native solution. This would involve updating the global styles applied to :focus here: https://github.com/palantir/blueprint/blob/d7e8bc67fc1657b6943838b846381fc05e148f59/packages/core/src/accessibility/_focus-states.scss#L4-L6

Doing so would allow users of Blueprint to opt-in to focus rings via FocusStyleManager.alwaysShowFocus() rather than always having to manually opt-out of seeing focus rings on click via FocusStyleManager.onlyShowFocusOnTabs().

Context

If the FocusStyleManager is not initialized/included along with Blueprint, focus rings will appear around elements when clicked. These focus rings outlines, while vital to accessibility for keyboards and other non-pointing devices, have long been considered undesirable when applied as a result of a mouse/pointer interaction.

Example of a focus ring appearing, undesirably, on click

---

The blue focus ring outlines are not present when clicking on elements.	The blue focus ring outlines are present when clicking on elements.

---

Chrome, Firefox, and Safari have all replaced :focus with :focus-visible in their user agent stylesheets. These changes occurred in February 2021 for both Chrome and Firefox and December 2021 for Safari. This means that, by default, these browsers will no longer show focus rings on many elements, such as buttons, where they did previously (see the spec for :focus-visible)

"UAs only sometimes visibly indicate focus (such as by drawing a “focus ring”), instead using a variety of heuristics to visibly indicate the focus only when it would be most helpful to the user."

Examples

This CodeSandbox resolves the issue where focus rings show up by reverting the global BP :focus styles, replacing them with :focus-visible.

https://codesandbox.io/s/bp-focus-management-example-tr4ukl?file=/src/app.scss

:focus {
  outline: revert;
  outline-offset: revert;
  -moz-outline-radius: revert; /* N.B. this property is deprecated */
}

:focus-visible {
  @include focus-outline();
}

References

• https://www.stefanjudis.com/today-i-learned/all-browsers-adopted-focus-visible-in-their-ua-stylesheets
• https://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021
• https://chromestatus.com/feature/5658873031557120
• https://chromium-review.googlesource.com/c/chromium/src/+/2602429
• https://groups.google.com/a/chromium.org/g/blink-dev/c/-wN72ESFsyo