Bug 260637 - :focus-visible doesn't work when mouse is clicked
Summary: :focus-visible doesn't work when mouse is clicked
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-08-23 16:57 PDT by shanmen.ng
Modified: 2024-07-30 09:21 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description shanmen.ng 2023-08-23 16:57:47 PDT
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.
Comment 1 Radar WebKit Bug Importer 2023-08-30 16:58:13 PDT
<rdar://problem/114732237>
Comment 2 freddiepingpong 2024-07-30 09:21:19 PDT
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).