html
html copied to clipboard
dispatch toggleevents for dialog open/close
This attempts to fix https://github.com/whatwg/html/issues/9733 by specifying that:
- a Dialog's
show()steps should dispatch abeforetogglecancellable event - followed by a queuing a non-cancellable
toggleevent. - a Dialog's
showModal()steps should dispatch abeforetogglecancellable event - followed by a queuing non-cancellable
toggleevent. - the
close the dialogsteps should disaptch a non-cancellablebeforetoggleevent - followed by queuing a non-cancellable
toggleevent.
- [x] At least two implementers are interested (and none opposed):
- Chromium: Tentatively interested
- Gecko: interested. https://github.com/mozilla/standards-positions/issues/1101
- [x] Tests are written and can be reviewed and commented upon at:
- https://github.com/web-platform-tests/wpt/pull/44208
- [x] Implementation bugs are filed:
- Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1521813
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1876762
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=268160
- Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): …
- Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): …
- [ ] MDN issue is filed: …
- [ ] The top of this comment includes a clear commit message to use.
(See WHATWG Working Mode: Changes for more details.)
I think this needs the "toggle task tracker" concept used in details elements in order to coalesce async toggle events: https://html.spec.whatwg.org/multipage/interactive-elements.html#queue-a-details-toggle-event-task
If you do this and open+close the dialog element synchronously , there should be one "toggle" event with both oldState and newState set to "closed":
dialog.showModal();
dialog.close();
Consider chrome as tentatively interested. I will file an intent to ship to get an official position when this gets a bit more attention from the other browsers, but I don't anticipate objections
Also Gecko is interested assuming the pr follows what was discussed at TPAC.
Tests can be added to the OP: https://github.com/web-platform-tests/wpt/pull/44208
Hi, this implementation could help us improve a popup, such as a CMP, for better integration by utilizing native browser APIs, specifically the Popover API, to make everything more robust. This will enable us to further improve the INP impact, as described in my case study here: https://web.dev/case-studies/pubconsent-inp?hl=en. Since the CMP is a predominant component on the web, I believe this kind of implementation should be supported as much as possible. I hope it helps. Thank you