Re: [csswg-drafts] [css-display-4] Define how reading-flow interacts with focusable display: contents elements. (#9230)

Thanks for the summary! I have a couple of questions.

> * Otherwise, if an element has both `display: contents` and **is** focusable, but does not have any other focusable elements inside, this element's content becomes one focusable area. Example: https://codepen.io/kizu/pen/rNgYzVW — currently, only Chrome allows us to focus this link, Firefox and Safari both ignore it, which is bad.

Note: this is only with the --experimental-web-platform-features flag turned on, which enables the DisplayContentsFocusable feature @dbaron is working on.

> * If an element that has both `display: contents` and is focusable has one or more other focusable elements inside, my proposal is to _split_  the non-focusable areas (excluding whitespace text nodes) inside that element, making them distinct parts that participate in the tab order in the same way they participate in the `reading-flow`.

By "split" do you mean to find each consecutive subsequence of children and text nodes that are not focusable, and treat them as one focusable group? e.g. for the case of `<div style="display:contents"><div>One</div><div tabindex=0>Two</div>Three</div>` it'd have three items that participate in the tab order, which would be visually indicated by the bounding rectangle of "One", "Two", and "Three"?

Also, how should we determine the order of them? should all of these dynamically split items be focus-ordered as if they had the same `tabindex` as the `display:contents` parent?

>   By “Areas” I mean consecutive elements and text nodes. If there are _no_ valid areas other than the nested focusable element, we first see if there is one with the whitespace and use it, otherwise we need to create an empty area at the beginning of that element and treat it as an absolutely positioned element in a static flow.

What do you mean by "with the whitespace"?

Also, why "treat it as an absolutely positioned element"?

>   Example of the current state for this: https://codepen.io/kizu/pen/gOJXxgy — inner element can be focused by all browsers, but the parent with `display: contents` is only accessible as a single area in Chrome, while Safari and Firefox ignore it.

(note: also only with the Chromium flag I mentioned above)



-- 
GitHub Notification of comment by chrishtr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9230#issuecomment-2165734083 using your GitHub account


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

Received on Thursday, 13 June 2024 13:49:31 UTC