Bug 260637 – :focus-visible doesn't work when mouse is clicked

• Status: NEW
• Component: CSS

Reproduction steps:
1. https://wpt.live/css/selectors/focus-visible-script-focus-014.html
2. Click on the body and click on the input.
3. Press tab.
4. Observe the test has failed.

This doesn't happen on just the body, but when the mouse is clicked, e.g.: https://jsfiddle.net/xrL26jc7/, click on the first input, then the second input and press tab. The focus-visible styles aren't applied.

[Radar WebKit Bug Importer]

<rdar://problem/114732237>

Looks like https://wpt.fyi/results/css/selectors/focus-visible-028.html now also tests for a related issue.

Background: https://github.com/web-platform-tests/wpt/pull/44873

> If the current modality is mouse, and focus is programmatically sent to another element, :focus-visible does not match, which is expected. If you then use keyboard afterwards, :focus-visible should match, as the current modality switched from mouse to keyboard. This functionality does not work in Safari if the following is true:

> The function that handles key events and .focus() utilizes .preventDefault().
> User's modality is not keyboard when focus is initially set programmatically.

This bug is readily apparent when using the keyboard to navigate our table (https://nimble.ni.dev/storybook/?path=/story/components-table--table). Keyboard only works well in all browsers, but keyboard navigation after a single mouse click produces wildly varying focus-visible behavior (only WebKit).