[Webkit-unassigned] [Bug 225148] New: [selectors] :focus-visible and keyboard events

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Wed Apr 28 03:40:40 PDT 2021


https://bugs.webkit.org/show_bug.cgi?id=225148

            Bug ID: 225148
           Summary: [selectors] :focus-visible and keyboard events
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: rego at igalia.com
                CC: rniwa at webkit.org
            Blocks: 185859

Created attachment 427251

  --> https://bugs.webkit.org/attachment.cgi?id=427251&action=review

Example

This comes from a discussion in a different bug: https://bugs.webkit.org/show_bug.cgi?id=225075

Trying to summarize the topic it's about one sentence of the :focus-visible spec and how it's implemented on the different browsers.
The spec text is (https://drafts.csswg.org/selectors/#the-focus-visible-pseudo):
"If the user interacts with the page via keyboard or some other non-pointing device, indicate focus. (This means keyboard usage may change whether this pseudo-class matches even if it doesn’t affect :focus)."

The usual example for this case is a DIV with tabindex, so it can be focused.
You click on the DIV and initially you don't match :focus-visible.
Then if you type a letter or ENTER or some other key, you start matching :focus-visible.
However if you just do "Ctrl + +" to zoom the page, you don't start matching :focus-visible.

When you're in an INPUT, this is not relevant at all, as you always match :focus-visible. So you don't care about the key strokes on that case.

The 3 implementations differ right now on what they do here. Imagine that we've just clicked a DIV with tabindex and it's focused but not matching :focus-visible:
* Chromium:
  * Typing "a": Change. DIV matches :focus-visible
  * Typing "Ctrl": No change. DIV doesn't match :focus-visible
  * Typing "Ctrl + y": No change. DIV doesn't match :focus-visible
  * Typing "Shift": Change. DIV matches :focus-visible
  * Typing "Shift + a": Change. DIV matches :focus-visible
* WebKit:
  * Typing "a": Change. DIV matches :focus-visible
  * Typing "Ctrl": No change. DIV doesn't match :focus-visible
  * Typing "Ctrl + y": No change. DIV doesn't match :focus-visible
  * Typing "Shift": No change. DIV doesn't match :focus-visible
  * Typing "Shift + a": Change. DIV matches :focus-visible
* Firefox: Firefox doesn't change anything in any of the cases. The element keeps not matching :focus-visible after any key stroke.

The question here is if we think this is or not a correct behavior. One option could be that WebKit follows Firefox and doesn't change :focus-visible on key strokes.

Ryosuke please share your feedback on the topic. Thanks.


Referenced Bugs:

https://bugs.webkit.org/show_bug.cgi?id=185859
[Bug 185859] [selectors] Support for Focus-Indicated Pseudo-class: `:focus-visible`
-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210428/4c89d86a/attachment.htm>


More information about the webkit-unassigned mailing list