225147 2021-04-28 03:11:03 -0700 [selectors] :focus-visible and contenteditable 2024-09-24 16:13:32 -0700 1 1 1 Unclassified WebKit CSS WebKit Nightly Build Unspecified Unspecified NEW InRadar P2 Normal --- 185859 1 rego webkit-unassigned agafvv rniwa webkit-bug-importer oldest_to_newest 1754975 0 rego 2021-04-28 03:11:03 -0700 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! 1754978 1 427250 rego 2021-04-28 03:28:48 -0700 Created attachment 427250 Example 1756884 2 webkit-bug-importer 2021-05-05 03:12:14 -0700 <rdar://problem/77549465> 427250 2021-04-28 03:28:48 -0700 2021-04-28 03:28:48 -0700 Example focus-visible-contenteditable.html text/html 316 rego PCFET0NUWVBFIGh0bWw+CjxzdHlsZT4KICA6Zm9jdXMgewogICAgYm9yZGVyOiBzb2xpZCB0aGlj ayBtYWdlbnRhOwogIH0KCiAgOmZvY3VzLXZpc2libGUgewogICAgYmFja2dyb3VuZDogY3lhbjsK ICB9CgogIGRpdiB7CiAgICBwYWRkaW5nOiAxZW07CiAgfQo8L3N0eWxlPgo8ZGl2IGlkPSJ3cmFw cGVyIiBjb250ZW50ZWRpdGFibGU+CiAgPGRpdj5Jbm5lciBESVY8L2Rpdj4KICA8ZGl2IGlkPSJ0 YXJnZXQiIHRhYmluZGV4PSIwIj5Jbm5lciBESVYgd2l0aCB0YWJpbmRleDwvZGl2PgogIDxkaXY+ QW5vdGhlciBpbm5lciBESVY8L2Rpdj4KPC9kaXY+Cg==