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

That is not what `display: contents` does or what it's intended to do. It's meant to remove wrapper elements that are added for semantics or scripting purposes, but mess with styling that depends on direct parent/child relationships (like grid container -> grid item).

This is why it's not good for the case you're talking about. For example, as far as CSS is concerned, `button` is just a specially-styled `span`; a `<button>foo</button>` with `display:contents` is just raw text, not a button at all anymore.  (You can still click on the text, and the click event will bubble up to the `button` element and trigger a button press, but that's because the DOM and the visual display don't have to have any particular correspondence with each other.)  The text is *not* focusable by tabbing in a normal `button`, and it doesn't magically become tabbable here either.

The input+label example you bring up doesn't apply either; the input is *offscreen*, but still *present in the page*, so it can still be tabbed to and focused by user interaction just fine. You just can't *click* on it because it's not on screen; this is no different from it just being obscured by another element.  This is very different from the element not existing in the rendering structure at all.

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

Received on Thursday, 3 May 2018 18:16:15 UTC