[csswg-drafts] [css-display][css-aam][selectors-4] How elements with `display:contents` get focused?

SelenIT has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-display][css-aam][selectors-4] How elements with `display:contents` get focused? ==
In #2355, we clarified that only `display:none` can affect the element's semantics and interactivity, so element with `display: contents` should preserve all its interactivity, including the ability to get the `:focus` (and `:focus-visible`) state. However, it's not clear how this state should work for this element.

Like the element with no boxes can be in `:hover` state (see #1141), making it possible to choose its descendants with selectors like `.no-boxes-element:hover .something`, I believe that the element that would receive focus without `display: contents` should receive it with `display: contents` as well. So its descendants should match the selectors like `.no-boxes-element:focus .something`, and its ancestors should match the `:focus-within` pseudo-class, making it possible to make the focus change visible despite the element itself is not displayed. And the fact that current browsers (at least, Firefox and Chrome) don't apply focus to the element with `display:contents` is the bug of these browsers. The element is still there in the DOM, it still can be activated, so there is no reason to skip the focus for it.

However, it's still not very clear how should the `:focus` state work for the element with `display: contents` itself. I suppose the easiest way to implement it is to only apply the `:focus` styles to the element's contents via inheritance. This would mean that the elements with `display: contents` would not get the default browser "focus ring", but the changes of color, background etc. would be inherited automatically by the element's descendants, and authors would be able to explicitly style the specific descendants of these invisible focused elements.

Another option can be to introduce a new pseudo-element like `::selection` that would span all the visible contents of the invisible element and get the default browser focus decoration, so the focus would be always visible, but this approach looks more complicated.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2632 using your GitHub account

Received on Monday, 30 April 2018 19:33:08 UTC