[csswg-drafts] [css-overflow-5] :focus and :focus-within styles with focused scroller pseudo-element (#11361)

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

== [css-overflow-5] :focus and :focus-within styles with focused scroller pseudo-element ==
When the user has focused a `::scroll-button` or `::scroll-marker`, the returned `document.activeElement` is the scrolling container as the activeElement API expects an element and this is consistent with having an "inner navigable" on the scrolling container similar to a shadow tree or inner frame per https://html.spec.whatwg.org/multipage/interaction.html#dom-documentorshadowroot-activeelement-dev:

> For the purposes of this API, when a [child navigable](https://html.spec.whatwg.org/multipage/document-sequences.html#child-navigable) is focused, its [container](https://html.spec.whatwg.org/multipage/document-sequences.html#nav-container) is [focused](https://html.spec.whatwg.org/multipage/interaction.html#bc-focus-ergo-bcc-focus) within its [parent](https://html.spec.whatwg.org/multipage/document-sequences.html#nav-parent)'s [active document](https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document). For example, if the user moves the focus to a text control in an [iframe](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element), the [iframe](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element) is the element returned by the [activeElement](https://html.spec.whatwg.org/multipage/interaction.html#dom-documentorshadowroot-activeelement) API in the [iframe](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element)'s [node document](https://dom.spec.whatwg.org/#concept-node-document).

Similarly, when the focused element is in a different [node tree](https://dom.spec.whatwg.org/#concept-node-tree) than documentOrShadowRoot, the element returned will be the [host](https://dom.spec.whatwg.org/#concept-documentfragment-host) that's located in the same [node tree](https://dom.spec.whatwg.org/#concept-node-tree) as documentOrShadowRoot if documentOrShadowRoot is a [shadow-including inclusive ancestor](https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-ancestor) of the focused element, and null if not.

The question is when these pseudos are focused, which elements have `:focus` or `:focus-within` styles?

Since the pseudos themselves can be styled by `:focus`, I think the most natural would be that the scrolling container matches `:focus-within` but not `:focus`. This seems the most natural, but is consistent with iframes and shadow dom (see [demo](https://codepen.io/flackr/pen/rNgVpOq)):
* When an element in a subframe is focused, it seems to not apply focus or focus-within to the frame container
* shadow dom applies `:focus` to the host element and `:focus-within` to it and its ancestors.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 12 December 2024 20:07:38 UTC