Ff133 dialog toggle beforetoggle events

[hamishwillee]

FF133 adds support for <dialog> elements to respond to HTMLElement events toggle and beforetoggle.

This updates the docs to make it clear:

• toggle fired on details element, dialog element, popovers
• beforetoggle fired on dialog element, popovers (details to follow)

HTMLDetailsElement toggle event page removed as that event is actually HTMLElement toggle event fired on the details element.

Added/updated some examples to make it more clear

One problem is that the events are defined in HTMLElement onto other elements, so they aren't shown as part of those elements in the normal boilerplate - i.e. the list of events. I have mentioned the events in examples.
I have also added BCD entries for the target elements on the events, and will include those as compat data once/if those get accepted.

Related docs work #36536

[github-actions]

Preview URLs (10 pages)

• /en-US/docs/Mozilla/Firefox/Releases/48
• /en-US/docs/Web/API/HTMLDetailsElement
• /en-US/docs/Web/API/HTMLDialogElement
• /en-US/docs/Web/API/HTMLElement/beforetoggle_event
• /en-US/docs/Web/API/HTMLElement/toggle_event
• /en-US/docs/Web/API/HTMLElement
• /en-US/docs/Web/API/Popover_API
• /en-US/docs/Web/API/ToggleEvent
• /en-US/docs/Web/HTML/Element/details
• /en-US/docs/Web/HTML/Element/summary

Flaws (4)

Note! 8 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Mozilla/Firefox/Releases/48
Title: Firefox 48 for developers
Flaw count: 3

• broken_links:
  • Can't resolve /en-US/docs/Archive/Web/Old_Proxy_API
  • Can't resolve /en-US/docs/Mozilla/Projects/Social_API/Service_worker_API_reference
  • Can't resolve /en-US/docs/Mozilla/Gecko/Chrome/CSS/-moz-bool-pref

---

URL: /en-US/docs/Web/API/HTMLElement
Title: HTMLElement
Flaw count: 1

• macros:
  • /en-US/docs/Web/API/HTMLElement/cancel_event does not exist

External URLs (1)

URL: /en-US/docs/Mozilla/Firefox/Releases/48
Title: Firefox 48 for developers

• https://bugzil.la/1225412 (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-11-14 23:31:14)

[pepelsbey]

Looks good! Thank you :)

I'd suggest removing reversed layout from the demo and reversing the HTML instead. Reversed layout is always a potential accessibility issue. In this case, it also complicates the code for no reason.

[hamishwillee]

Thanks @pepelsbey - I accepted all your suggestions. Note, I didn't consider the example much at all, but you're right it is better this way.

[pepelsbey]

Nice!