inert attribute + :modal pseudo-class

[jensimmons]

Description

The :modal pseudo-class targets a dialog when it's in an open state.

The inert attribute provides web developers with a way to make an element inert, similar to the content behind a dialog — useful for situations that do not involve dialog.

It might make sense to add these two items to the dialog focus area. Or perhaps not, and put them someplace else.

Rationale

These two features, inert and :modal feel like work that was done to round out dialog and make sure web developers have all of what they need to accessibly provide this kind of interactive UI. Adding these to Interop 2023 ensures such details are implemented fully interoperable.

Specification

Inert in HTML: https://html.spec.whatwg.org/multipage/interaction.html#the-inert-attribute

:modal in CSS: https://w3c.github.io/csswg-drafts/selectors-4/#modal-state

Tests

Existing tests:

• modal-pseudo-class.html

More tests are needed.

[jensimmons]

Inert tests

[gsnedders]

Existing tests:

• modal-pseudo-class.html

https://wpt.fyi/results/css/selectors?label=master&label=experimental&aligned&view=subtest&q=modal shows there's also one in invalidation (albeit combined with :has, #134). If we accept both proposals, we'll need to decide which (or both!) of the focus areas to count that test towards.

[foolip]

This was mentioned by WordPress developer @youknowriad in https://make.wordpress.org/core/2022/10/10/seeking-proposals-for-interop-2023/#comment-43928:

I came across “inert” attribute recently, we can still use it a bit using a polyfill but would love to get rid of the polyfill.

Thanks Riad for sharing!

[foolip]

Thank you for proposing inert and :modal for gradients for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as part of the Inert and CSS Pseudo-classes focus areas. You can follow the progress of these Focus Areas on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.