From e36b66fe50e68142d416b0bd46ef779a6bc5c33b Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Mon, 6 Jan 2025 11:14:47 -0800
Subject: [PATCH] Make dialog focus async when removing open attribute

When the dialog's open attribute is removed which closes the dialog, we
should make the focus async in order to prevent more script from running
inside attribute removal.

Context: https://github.com/whatwg/html/pull/10124#discussion_r1483640232

Bug: 341935362
Change-Id: I1b76f003e04b802b1868b427a0faddf5f19a3c5e
---
 .../dialog-close-via-attribute.tentative.html | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-close-via-attribute.tentative.html b/html/semantics/interactive-elements/the-dialog-element/dialog-close-via-attribute.tentative.html
index 5c2e70f87a6101c..4ccac5b31cf2e76 100644
--- a/html/semantics/interactive-elements/the-dialog-element/dialog-close-via-attribute.tentative.html
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-close-via-attribute.tentative.html
@@ -7,14 +7,20 @@
 <script src="/resources/testdriver-vendor.js"></script>
 
 <button>button</button>
-<dialog>hello world</dialog>
+<dialog>
+  <button>button in dialog</button>
+</dialog>
 
 <script>
 const dialog = document.querySelector('dialog');
 const button = document.querySelector('button');
+const dialogbutton = document.querySelector('dialog > button');
 
 promise_test(async t => {
+  button.focus();
   dialog.showModal();
+  assert_equals(document.activeElement, dialogbutton,
+    '<button> in <dialog> should be focused after opening.');
 
   let closeFired = false;
   let cancelFired = false;
@@ -22,9 +28,13 @@
   dialog.addEventListener('cancel', () => cancelFired = true);
 
   dialog.removeAttribute('open');
+  assert_equals(document.activeElement, dialogbutton,
+    '<button> in <dialog> should still be focused immediately after removing open.');
   await new Promise(resolve => t.step_timeout(resolve, 0));
   await new Promise(requestAnimationFrame);
 
+  assert_equals(document.activeElement, button,
+    'Previously focused element should be focused after waiting for a task.');
   assert_false(dialog.matches(':modal'),
     'The dialog should not match :modal after closing.');
   assert_false(cancelFired,
@@ -40,7 +50,10 @@
 }, 'Removing the open attribute from an open modal dialog should run the closing algorithm.');
 
 promise_test(async t => {
+  button.focus();
   dialog.show();
+  assert_equals(document.activeElement, dialogbutton,
+    '<button> in <dialog> should be focused after opening.');
 
   let closeFired = false;
   let cancelFired = false;
@@ -48,9 +61,13 @@
   dialog.addEventListener('cancel', () => cancelFired = true);
 
   dialog.removeAttribute('open');
+  assert_equals(document.activeElement, dialogbutton,
+    '<button> in <dialog> should still be focused immediately after removing open.');
   await new Promise(resolve => t.step_timeout(resolve, 0));
   await new Promise(requestAnimationFrame);
 
+  assert_equals(document.activeElement, button,
+    'Previously focused element should be focused after waiting for a task.');
   assert_false(cancelFired,
     'The cancel event should not fire when removing the open attribute.');
   assert_true(closeFired,