Bug 1828523 [wpt PR 39579] - Only restore dialog focus if focus is in…

… the dialog, a=testonly Automatic update from web-platform-tests Only restore dialog focus if focus is in the dialog Context: whatwg/html#8904 This patch prevents the behavior where closing a dialog focuses the previously focused element from before the dialog was opened only if focus is in the dialog when the dialog closes. Without this, focus can unexpectedly shift away from an element which is not going away, like a text input that the user is currently typing into for example. This matches the behavior we recently implemented for popovers. Change-Id: Id95cacf36b2eb24d3514f59bc8a1f718d643860e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4436533 Reviewed-by: Mason Freed <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1145455} -- wpt-commits: a2848420dbdb869afb53e11706814c029a9911eb wpt-pr: 39579
erichdongubler-mozilla · May 25, 2023 · 43d0436 · 43d0436
1 parent c497938
commit 43d0436
Showing 1 changed file with 71 additions and 0 deletions.
diff --git a/...html/semantics/interactive-elements/the-dialog-element/dialog-focus-previous-outside.html b/...html/semantics/interactive-elements/the-dialog-element/dialog-focus-previous-outside.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://github.com/whatwg/html/issues/8904">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
+
+<button id=b1>button 1</button>
+<button id=b2>button 2</button>
+<div id=host>
+  <template shadowrootmode=open>
+    <button>button in shadowroot outside dialog</button>
+  </template>
+</div>
+<dialog id=mydialog>
+  <button id=b3>button in dialog</button>
+  <div id=dialoghost>
+    <template shadowrootmode=open>
+      <button>button in shadowroot in dialog</button>
+    </template>
+  </div>
+</dialog>
+
+<div id=host2>
+  <template shadowrootmode=open>
+    <dialog>
+      <slot></slot>
+    </dialog>
+  </template>
+  <button id=host2button>button</button>
+</div>
+
+<script>
+polyfill_declarative_shadow_dom(document);
+
+test(() => {
+  b1.focus();
+  mydialog.show();
+  b2.focus();
+  mydialog.close();
+  assert_equals(document.activeElement, b2);
+}, 'Focus should not be restored if the currently focused element is not inside the dialog.');
+
+test(() => {
+  const shadowbutton = host.shadowRoot.querySelector('button');
+  b2.focus();
+  mydialog.show();
+  shadowbutton.focus();
+  mydialog.close();
+  assert_equals(document.activeElement, host, 'document.activeElement should point at the shadow host.');
+  assert_equals(host.shadowRoot.activeElement, shadowbutton, 'The button in the shadowroot should remain focused.');
+}, 'Focus restore should not occur when the focused element is in a shadowroot outside of the dialog.');
+
+test(() => {
+  const shadowbutton = dialoghost.shadowRoot.querySelector('button');
+  b2.focus();
+  mydialog.show();
+  shadowbutton.focus();
+  mydialog.close();
+  assert_equals(document.activeElement, b2);
+}, 'Focus restore should occur when the focused element is in a shadowroot inside the dialog.');
+
+test(() => {
+  const dialog = host2.shadowRoot.querySelector('dialog');
+  b2.focus();
+  dialog.show();
+  host2button.focus();
+  dialog.close();
+  assert_equals(document.activeElement, b2);
+}, 'Focus restore should occur when the focused element is slotted into a dialog.');
+</script>