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

@Emilio The intention of `display: contents` is that it should only affect layout, not functionality. So we need to consider how it applies to interactive elements, not just container elements.

For example, you might want to switch the appearance of a widget from a drop-down list on small screens to a radio-button style layout on larger screens, by making the container disappear and just laying out the options.  However, you would still want the widget container (the element that replaces the role of a `<select>`) to gain focus (and then use arrows to switch between the options).

Or, you might have a link containing both an image and a text block. For layout purposes, you want to lay out the two parts as independent children of the parent layout context, but they are still a single link for accessibility and function.

(Note: current browser implementations of `display: contents` fail to live up to this promise. But that's another issue.)

The `:focus` selector would still match the focused element, so any inheritable changes set on it (like `color`) would propagate to the children. But as currently defined, and box-based styles on the element itself (like `outline`) would not apply. Which means that default browser focus styles, and most author-defined focus styles, would no longer be rendered.

_____________________________

I like the idea of extending [the properties that apply to highlight pseudo-elements](https://drafts.csswg.org/css-pseudo-4/#highlight-selectors) to also apply to `display: contents` elements.   The current list of properties in that category are:

- color
- background-color
- cursor
- caret-color
- outline and its longhands
- text-decoration and its associated properties
- text-emphasis-color
- text-shadow

The only ones which apply in a way *different* from simply inheriting to child content are `outline` and `background-color`.  Background color is well supported for selections, so should be straightforward to apply to a multi-box collection equivalent to a `display: contents` element. Outline would need to be implemented in a way that supports more than a simple rectangle, but this is already true for elements with absolute/fixed position children that extend outside of the parent.

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

Received on Monday, 30 April 2018 20:05:05 UTC