[selectors] :focus-visible and contenteditable

• Component: CSS
• Status: NEW ---

[Manuel Rego Casasnovas]

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

There we were talking about the condition in Element::shouldAlwaysHaveFocusVisibleWhenFocused().
And we were wondering if we should use isRootEditableElement() instead of isContentEditable().

I'm attaching an example like this:
    <style>
      :focus { border: solid thick magenta; }
      :focus-visible { background: cyan; } 
    </style>
    <div id="wrapper" contenteditable>
      <div>Inner DIV</div>
      <div id="target" tabindex="0">Inner DIV with tabindex</div>
      <div>Another inner DIV</div>
    </div>

Here the first time you click in DIV#target, the whole DIV#wrapper is focused. And the whole DIV#wrapper matches :focus-visible.
This time both isRootEditableElement() and isContentEditable() are true, because we're focusing DIV#wrapper.
The 2nd time we click in DIV#target, only DIV#target is focused, and only DIV#target matches :focus-visible.
Now isRootEditableElement() is false and isContentEditable() is true.

If we change the code to use isRootEditableElement(), then wewon't match :focus-visible in DIV#target in the 2nd click. So we'll be editing that element without matching :focus-visible which seems wrong.

Maybe the example should be different, or I'm missing some other combination.

Please Ryosuke share your thoughts. Thanks!

[Manuel Rego Casasnovas]

Created attachment 427250 [details]
Example

[Radar WebKit Bug Importer]

<rdar://problem/77549465>