Connect HTML spec up to new CSS interactivity property

[mfreed7]

I was a bit unsure about a few parts of this PR, so help would be appreciated from the editors. The idea is:

1. Remove duplication - allow the CSS spec to define the concept of "inert".
2. Make the inert HTML attribute set interactivity:inert via a new UA stylesheet rule.
3. Make modal dialogs non-inert via an interactivity:auto UA stylesheet rule.
4. {later} A rule likely needs to be added for fullscreen elements also, setting :fullscreen {interactivity: auto}.

CSS spec is here: https://drafts.csswg.org/css-ui-4/#inertness

---

• At least two implementers are interested (and none opposed):
  • Chromium is supportive/driving
  • …
• Tests are written and can be reviewed and commented upon at:
  • https://wpt.fyi/results/css/css-ui?label=master&label=experimental&aligned&q=interactivity-
• Implementation bugs are filed:
  • Chromium: https://crbug.com/370065759
  • Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1949843
  • WebKit: https://bugs.webkit.org/show_bug.cgi?id=288202
• Corresponding HTML AAM & ARIA in HTML issues & PRs:
• MDN issue is filed: The CSS interactivity property mdn/mdn#640
• The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

---

/indices.html ( diff )
/infrastructure.html ( diff )
/interaction.html ( diff )
/interactive-elements.html ( diff )
/rendering.html ( diff )

[mfreed7]

Thanks for the review!

[nt1m]

I think blocked by a modal dialog should be defined in terms of interactivity (either set as a presentational hint on the root, or using an UA stylesheet rule), because otherwise dialog:modal { interactivity: auto } won't do anything (because auto is the default value. I don't think this is what the current HTML spec PR does.

[mfreed7]

I think blocked by a modal dialog should be defined in terms of interactivity (either set as a presentational hint on the root, or using an UA stylesheet rule), because otherwise dialog:modal { interactivity: auto } won't do anything (because auto is the default value. I don't think this is what the current HTML spec PR does.

I added a Note about this. But I think the concept (agreed to over in CSSWG I believe) was that both specs can set something to be inert. The problem with defining modal dialog behavior in terms of CSS is that it allows author CSS to make parts of the page "un-inerted", which is undesirable. And it can't be set to interactivity:inert/auto !important to avoid that problem, because then that doesn't allow the author to "re-inert" the dialog itself.

[lilles]

I think blocked by a modal dialog should be defined in terms of interactivity (either set as a presentational hint on the root, or using an UA stylesheet rule), because otherwise dialog:modal { interactivity: auto } won't do anything (because auto is the default value. I don't think this is what the current HTML spec PR does.

I added a Note about this. But I think the concept (agreed to over in CSSWG I believe) was that both specs can set something to be inert. The problem with defining modal dialog behavior in terms of CSS is that it allows author CSS to make parts of the page "un-inerted", which is undesirable. And it can't be set to interactivity:inert/auto !important to avoid that problem, because then that doesn't allow the author to "re-inert" the dialog itself.

Another issue is that no one's been able to come up with UA styles that actually works with shadow DOM.

[noamr]

I've stumbled upon this type of problem when implementing moveBefore things... Thanks for working on this! Added some non-authoritative nits

[mfreed7]

Thanks for the comments!

[domenic]

LGTM with nits. This turned out pretty nice; thanks for iterating!

Let me know when the checkboxes in the OP are filled out.

[mfreed7]

LGTM with nits. This turned out pretty nice; thanks for iterating!

Let me know when the checkboxes in the OP are filled out.

Thanks for the review!

• At least two implementers are interested (and none opposed):

@annevk @emilio would you mind please providing support for landing this?

[mfreed7]

• Corresponding HTML AAM & ARIA in HTML issues & PRs:

@scottaohara @aleventhal does this need any change to the HTML AAM spec? This PR (to HTML) doesn't actually change the behavior of existing things like inert or modal dialogs. The CSSWG spec change (which already landed, here) might need something?