dispatch toggleevents for dialog open/close

[keithamus]

This attempts to fix #9733 by specifying that:

• a Dialog's show() steps should dispatch a beforetoggle cancellable event
• followed by a queuing a non-cancellable toggle event.
• a Dialog's showModal() steps should dispatch a beforetoggle cancellable event
• followed by a queuing non-cancellable toggle event.
• the close the dialog steps should disaptch a non-cancellable beforetoggle event
• followed by queuing a non-cancellable toggle event.

• At least two implementers are interested (and none opposed):
  • Chromium: Tentatively interested
  • Gecko: interested
• Tests are written and can be reviewed and commented upon at:
  • Implement toggle events for dialog elements web-platform-tests/wpt#44208
• 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.)

---

/interactive-elements.html ( diff )

[josepharhar]

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();

[josepharhar]

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

[smaug----]

Also Gecko is interested assuming the pr follows what was discussed at TPAC.

[josepharhar]

Tests can be added to the OP: web-platform-tests/wpt#44208

[marco-prontera]

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