Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

inert on an ancestor of modal dialog #7808

Closed
emilio opened this issue Apr 11, 2022 · 8 comments
Closed

inert on an ancestor of modal dialog #7808

emilio opened this issue Apr 11, 2022 · 8 comments
Labels
topic: dialog The <dialog> element

Comments

@emilio
Copy link
Contributor

emilio commented Apr 11, 2022

In w3c/csswg-drafts#6685 (comment) we did various resolutions for inert behavior and updated tests.

https://wpt.fyi/results/inert/inert-with-modal-dialog-001.html shows that Firefox and WebKit agree on behavior on the inert attribute on an ancestor of a modal dialog, but Blink does not, and the test agrees with this.

I think making a modal dialog inert in this case is potentially undesired. WebKit and Gecko allow you to do this by explicitly marking the dialog inert. I thought Blink had moved to the WebKit and Gecko model for the inert attribute but either this was missed or not changed intentionally?

Since Blink and WebKit are shipping dialog soon-ish, it'd be nice to sort this compat difference.

cc @nt1m @Loirooriol
@emilio emilio added the agenda+ To be discussed at a triage meeting label Apr 11, 2022
@emilio
Copy link
Contributor Author

emilio commented Apr 11, 2022

https://html.spec.whatwg.org/#modal-dialogs-and-inert-subtrees doesn't specify either behavior, afaict.

@emilio
Copy link
Contributor Author

emilio commented Apr 11, 2022

Oh, I guess https://html.spec.whatwg.org/#the-inert-attribute sort-of does, by saying all flat tree descendants are affected, and the section linked above hints that the desired behavior is Chrome's? Curious about the reasoning for that?

being part of a modal dialog does not "protect" a node from being inert

@nt1m
Copy link
Member

nt1m commented Apr 11, 2022

Oh, I guess https://html.spec.whatwg.org/#the-inert-attribute sort-of does, by saying all flat tree descendants are affected, and the section linked above hints that the desired behavior is Chrome's? Curious about the reasoning for that?

being part of a modal dialog does not "protect" a node from being inert

It was pre-existing the inert changes to the spec. This doesn't really say anything about this particular issue. It could also be interpreted as either "this doesn't prevent the inert attribute from applying on the dialog element", as much as "this doesn't prevent parent elements with inert from applying on the dialog element".

I'd be fine with either resolution, but as long as it is consistent with how with handle other things, e.g. in w3c/csswg-drafts#6939 (comment) we decided that modal dialogs escape visibility: hidden on ancestors (which only WebKit implements atm), so logically it should escape inert. As long everything is consistent for web developers, I'm fine with it.

@emilio
Copy link
Contributor Author

emilio commented Apr 11, 2022

I'd be fine with either resolution, but as long as it is consistent with how with handle other things, e.g. in w3c/csswg-drafts#6939 (comment) we decided that modal dialogs escape visibility: hidden on ancestors (which only WebKit implements atm), so logically it should escape inert. As long everything is consistent for web developers, I'm fine with it.

I agree. Given that WebKit / Gecko behavior here seems preferable.

@Loirooriol
Copy link
Contributor

There was some discussion in web-platform-tests/wpt#31668

I didn't change Blink in this regard since the spec says:

The elements excepted by this paragraph can additionally become inert through other means; being part of a modal dialog does not "protect" a node from being inert.

I don't have much opinion about which behavior is preferable. But aligning with WebKit and Gecko would simplify a bit the implementation (inertness could be a bool instead of an enum with 3 values).

cc @mfreed7

@domenic domenic added the topic: dialog The <dialog> element label Apr 11, 2022
@mfreed7
Copy link
Contributor

mfreed7 commented Apr 12, 2022

Just so I understand the question:

<div inert>
  <dialog id=foo>Inert or not?</dialog>
</div>

Right? It sounds like the desired behavior is to make the <dialog> escape the inert ancestor. I do think that makes sense from a developer's point of view:

  1. This appears from a developer's point of view to be how <dialog> works anyway (escaping <body inert>), so it's easier to understand.
  2. If the <dialog> were made inert in this case, how would a developer "cancel" that behavior? I.e. there's no notinert attribute they could add to <dialog>. They're just stuck, especially if the inert ancestor is <body inert>.

So my vote is to make <dialog> escape inert.

@nt1m nt1m mentioned this issue May 3, 2022
Closed
@scottaohara scottaohara mentioned this issue May 4, 2022
Closed
@domenic domenic removed the agenda+ To be discussed at a triage meeting label May 5, 2022
@emilio emilio mentioned this issue May 9, 2022
Merged
3 tasks
Merged
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue May 10, 2022
@Loirooriol @chromium-wpt-export-bot
[inert] Let modal dialogs escape inertness from ancestors
57406be 
If an ancestor of a modal <dialog> has the 'inert' attribute, the dialog
and its subtree will no longer be inert.

However, if the 'inert' attribute is in the <dialog> itself, then the
subtree will still be inert.

This aligns Blink with Gecko and WebKit. The spec conversation about
this topic is in whatwg/html#7808

Bug: 1323680

TEST=external/wpt/inert/inert-with-modal-dialog-001.html
TEST=StyleResolverTest.IsInertWithAttributeAndDialog

Change-Id: Id2752ce3d1c8985b68b1d700710c3ff3eb100714
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue May 23, 2022
@Loirooriol @chromium-wpt-export-bot
[inert] Let modal dialogs escape inertness from ancestors
5712802 
If an ancestor of a modal <dialog> has the 'inert' attribute, the dialog
and its subtree will no longer be inert.

However, if the 'inert' attribute is in the <dialog> itself, then the
subtree will still be inert.

This aligns Blink with Gecko and WebKit. The spec conversation about
this topic is in whatwg/html#7808

Bug: 1323680

TEST=external/wpt/inert/inert-with-modal-dialog-001.html
TEST=StyleResolverTest.IsInertWithAttributeAndDialog

Cq-Include-Trybots: luci.chromium.try:linux-blink-web-tests-force-accessibility-rel
Change-Id: Id2752ce3d1c8985b68b1d700710c3ff3eb100714
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue May 24, 2022
@Loirooriol @chromium-wpt-export-bot
[inert] Let modal dialogs escape inertness from ancestors
5a91fc6 
If an ancestor of a modal <dialog> has the 'inert' attribute, the dialog
and its subtree will no longer be inert.

However, if the 'inert' attribute is in the <dialog> itself, then the
subtree will still be inert.

This aligns Blink with Gecko and WebKit. The spec conversation about
this topic is in whatwg/html#7808

Bug: 1323680

TEST=external/wpt/inert/inert-with-modal-dialog-001.html
TEST=StyleResolverTest.IsInertWithAttributeAndDialog

Cq-Include-Trybots: luci.chromium.try:linux-blink-web-tests-force-accessibility-rel
Change-Id: Id2752ce3d1c8985b68b1d700710c3ff3eb100714
aarongable pushed a commit to chromium/chromium that referenced this issue May 24, 2022
@Loirooriol
[inert] Let modal dialogs escape inertness from ancestors
164a131 
If an ancestor of a modal <dialog> has the 'inert' attribute, the dialog
and its subtree will no longer be inert.

However, if the 'inert' attribute is in the <dialog> itself, then the
subtree will still be inert.

This aligns Blink with Gecko and WebKit. The spec conversation about
this topic is in whatwg/html#7808

Bug: 1323680

TEST=external/wpt/inert/inert-with-modal-dialog-001.html
TEST=StyleResolverTest.IsInertWithAttributeAndDialog

Cq-Include-Trybots: luci.chromium.try:linux-blink-web-tests-force-accessibility-rel
Change-Id: Id2752ce3d1c8985b68b1d700710c3ff3eb100714
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3634684
Reviewed-by: Aaron Leventhal <aleventhal@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1006974}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue May 24, 2022
@Loirooriol @chromium-wpt-export-bot
[inert] Let modal dialogs escape inertness from ancestors
be0a42d 
If an ancestor of a modal <dialog> has the 'inert' attribute, the dialog
and its subtree will no longer be inert.

However, if the 'inert' attribute is in the <dialog> itself, then the
subtree will still be inert.

This aligns Blink with Gecko and WebKit. The spec conversation about
this topic is in whatwg/html#7808

Bug: 1323680

TEST=external/wpt/inert/inert-with-modal-dialog-001.html
TEST=StyleResolverTest.IsInertWithAttributeAndDialog

Cq-Include-Trybots: luci.chromium.try:linux-blink-web-tests-force-accessibility-rel
Change-Id: Id2752ce3d1c8985b68b1d700710c3ff3eb100714
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3634684
Reviewed-by: Aaron Leventhal <aleventhal@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1006974}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue May 24, 2022
@Loirooriol @chromium-wpt-export-bot
[inert] Let modal dialogs escape inertness from ancestors
526608c 
If an ancestor of a modal <dialog> has the 'inert' attribute, the dialog
and its subtree will no longer be inert.

However, if the 'inert' attribute is in the <dialog> itself, then the
subtree will still be inert.

This aligns Blink with Gecko and WebKit. The spec conversation about
this topic is in whatwg/html#7808

Bug: 1323680

TEST=external/wpt/inert/inert-with-modal-dialog-001.html
TEST=StyleResolverTest.IsInertWithAttributeAndDialog

Cq-Include-Trybots: luci.chromium.try:linux-blink-web-tests-force-accessibility-rel
Change-Id: Id2752ce3d1c8985b68b1d700710c3ff3eb100714
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3634684
Reviewed-by: Aaron Leventhal <aleventhal@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1006974}
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue May 26, 2022
@Loirooriol @moz-wptsync-bot
Bug 1768510 [wpt PR 33997] - [inert] Let modal dialogs escape inertne…
fb6c056 
…ss from ancestors, a=testonly

Automatic update from web-platform-tests
[inert] Let modal dialogs escape inertness from ancestors

If an ancestor of a modal <dialog> has the 'inert' attribute, the dialog
and its subtree will no longer be inert.

However, if the 'inert' attribute is in the <dialog> itself, then the
subtree will still be inert.

This aligns Blink with Gecko and WebKit. The spec conversation about
this topic is in whatwg/html#7808

Bug: 1323680

TEST=external/wpt/inert/inert-with-modal-dialog-001.html
TEST=StyleResolverTest.IsInertWithAttributeAndDialog

Cq-Include-Trybots: luci.chromium.try​:linux-blink-web-tests-force-accessibility-rel
Change-Id: Id2752ce3d1c8985b68b1d700710c3ff3eb100714
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3634684
Reviewed-by: Aaron Leventhal <aleventhal@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1006974}

--

wpt-commits: 526608c590f67192d8c3b688ba04b7b74bfed32d
wpt-pr: 33997
jamienicol pushed a commit to jamienicol/gecko that referenced this issue May 30, 2022
@Loirooriol @moz-wptsync-bot
Bug 1768510 [wpt PR 33997] - [inert] Let modal dialogs escape inertne…
1454d3f 
…ss from ancestors, a=testonly

Automatic update from web-platform-tests
[inert] Let modal dialogs escape inertness from ancestors

If an ancestor of a modal <dialog> has the 'inert' attribute, the dialog
and its subtree will no longer be inert.

However, if the 'inert' attribute is in the <dialog> itself, then the
subtree will still be inert.

This aligns Blink with Gecko and WebKit. The spec conversation about
this topic is in whatwg/html#7808

Bug: 1323680

TEST=external/wpt/inert/inert-with-modal-dialog-001.html
TEST=StyleResolverTest.IsInertWithAttributeAndDialog

Cq-Include-Trybots: luci.chromium.try​:linux-blink-web-tests-force-accessibility-rel
Change-Id: Id2752ce3d1c8985b68b1d700710c3ff3eb100714
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3634684
Reviewed-by: Aaron Leventhal <aleventhal@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1006974}

--

wpt-commits: 526608c590f67192d8c3b688ba04b7b74bfed32d
wpt-pr: 33997
@past past mentioned this issue Jun 2, 2022
Closed
mfreed7 pushed a commit to mfreed7/html that referenced this issue Jun 3, 2022
@emilio @mfreed7
Clarify that modal dialogs escape inertness of ancestors
4b7e443 
Closes whatwg#7808.
mjfroman pushed a commit to mjfroman/moz-libwebrtc-third-party that referenced this issue Oct 14, 2022
@Loirooriol @copybara-github
[inert] Let modal dialogs escape inertness from ancestors
7297681 
If an ancestor of a modal <dialog> has the 'inert' attribute, the dialog
and its subtree will no longer be inert.

However, if the 'inert' attribute is in the <dialog> itself, then the
subtree will still be inert.

This aligns Blink with Gecko and WebKit. The spec conversation about
this topic is in whatwg/html#7808

Bug: 1323680

TEST=external/wpt/inert/inert-with-modal-dialog-001.html
TEST=StyleResolverTest.IsInertWithAttributeAndDialog

Cq-Include-Trybots: luci.chromium.try:linux-blink-web-tests-force-accessibility-rel
Change-Id: Id2752ce3d1c8985b68b1d700710c3ff3eb100714
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3634684
Reviewed-by: Aaron Leventhal <aleventhal@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1006974}
NOKEYCHECK=True
GitOrigin-RevId: 164a13142f64c249d85e219cf745c371fc51b701
@yisibl
Copy link

yisibl commented Mar 15, 2024

So my vote is to make escape inert.

So should we do the same for elements that have the popover attribute added?

@mfreed7
Copy link
Contributor

mfreed7 commented Mar 15, 2024

elements

I don't think general popovers should escape inert. Popovers are never modal, so they shouldn't be available if an ancestor is inert. The one exception, which should already work correctly, is when the popover is contained within a modal <dialog>. (Example use case: a modal dialog with a select picker.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
topic: dialog The <dialog> element
Milestone
No milestone
Development

No branches or pull requests
6 participants
@domenic @emilio @nt1m @yisibl @Loirooriol @mfreed7