Bug 224026 - Web Inspector: adapt :focus-visible internally
Summary: Web Inspector: adapt :focus-visible internally
Status: ASSIGNED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-03-31 16:56 PDT by Nikita Vasilyev
Modified: 2022-02-08 12:51 PST (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2021-03-31 16:56:56 PDT
:focus-visible is implemented behind an experimental flag (":focus-visible pseudo class").
Once it's on by default, we should add:

    :focus:not(:focus-visible) {
        outline: none;
    }

This will allow to closer match macOS focus behavior. For example, currently, clicking on "Hover" checkbox (to force `:hover` state) displays the focus outline around it.
With the CSS rule above, it would only draw the outline when it's focused by using keyboard navigation, which matches native apps behavior.

https://twitter.com/leaverou/status/1045768279753666562?lang=en
Comment 1 Radar WebKit Bug Importer 2021-03-31 16:57:13 PDT
<rdar://problem/76078422>
Comment 2 Manuel Rego Casasnovas 2021-04-15 03:24:20 PDT
Ideally the default UA should change to use :focus-visible directly, so that kind of rule won't be needed.

See bug #221925.
Comment 3 Nikita Vasilyev 2022-01-24 15:41:24 PST
(In reply to Manuel Rego Casasnovas from comment #2)
> Ideally the default UA should change to use :focus-visible directly, so that
> kind of rule won't be needed.
> 
> See bug #221925.

Thanks for the heads up. That's great!

This bug then is about removing obscure focus management logic that predates :focus-visible. One example:
https://github.com/WebKit/WebKit/blob/37d73f68d97e0a6c88cb19572874d140233ffbeb/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js#L290-L294