Elements with tabindex="-1" can be focused programatically and receive a :focus-visible state. The current behavior is currently consistent with Chrome's native :focus-visible implementation.

@Merri - can you join the WICG to appease the IPR bots?

Joined, but it didn't get reflected here.

The core issue is that Reach Router does one focus, and if a developer needs to do another focus to an element (such as modal opening) then we have two programatical .focus() calls within 100ms which then trigger focus-visible style active. This does not match :focus-visible nor -moz-focusring behavior. I guess the only way around would be to re-think how onBlur's switching between browser tabs is detected.

This results into a bug where focus-visible toggles style on the focused element upon fresh page load where user has not used the keyboard at all.

:focus-visible is applied to the very first focus without any user-action. So if you programmatically focus something on the initial page load then it gets :focus-visible.

In general tabindex="-1" elements can only be focused without a keyboard so we should probably always ignore them.

They can be programmatically focused by an action triggered by keyboard input. For example, in https://codesandbox.io/s/sweet-breeze-9dqc0?file=/src/App.js, tab to the button, hit enter. The wrapper has the native :focus-visible styles even though it has tabIndex="-1".

:focus-visible always looks at the last modality. So if your last input came from keyboard then any focus() will apply :focus-visible. Even if that focus was programmatic, came 30 minutes later and targets a [tabindex="-1"].

See

If focus is moved programmatically by calling focus(), the newly focused element will only match :focus-visible if the previously focused element matched it as well.

-- https://blog.chromium.org/2020/09/giving-users-and-developers-more.html (:focus-visible heuristic)

Thanks for the clarifications and also the quick responses! These helped me better understand a bug I worked on yesterday. I might have made a wrong conclusion (or a mistake) on :focus-visible behavior vs. focus-visible while testing it, and debugging through a lot of other third party code. The bug itself is resolved and just to be sure I'll also blacklist the focus wrapper from gaining any styles:

.focus-wrapper:not(#gatsby-focus-wrapper) {}

As giving box-shadow to a container element of everything is a performance hit, especially on mobile.

Closing the PR.