Support beforetoggle/toggle events for dialog (#32479)

Author: keithamus

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -1280,6 +1280,8 @@ export function setInitialProperties(
       return;
     }
     case 'dialog': {
+      listenToNonDelegatedEvent('beforetoggle', domElement);
+      listenToNonDelegatedEvent('toggle', domElement);
       listenToNonDelegatedEvent('cancel', domElement);
       listenToNonDelegatedEvent('close', domElement);
       break;

packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js

@@ -1302,6 +1302,38 @@ describe('ReactDOMEventListener', () => {
       });
     });
 
+    it('onBeforeToggle Dialog API', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'dialog',
+        reactEvent: 'onBeforeToggle',
+        reactEventType: 'beforetoggle',
+        nativeEvent: 'beforetoggle',
+        dispatch(node) {
+          const e = new Event('beforetoggle', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onToggle Dialog API', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'dialog',
+        reactEvent: 'onToggle',
+        reactEventType: 'toggle',
+        nativeEvent: 'toggle',
+        dispatch(node) {
+          const e = new Event('toggle', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
     it('onVolumeChange', async () => {
       await testEmulatedBubblingEvent({
         type: 'video',