From 1067e36a01b6b7659a5c369c4fe0b03a421510af Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 2 Feb 2023 17:53:02 +0000
Subject: [PATCH] Bug 1799251 [wpt PR 36831] - Implement dialog initial focus
 proposal, a=testonly

Automatic update from web-platform-tests
Implement dialog initial focus proposal

This has been discussed here:
https://github.com/whatwg/html/pull/4184
https://github.com/whatwg/html/pull/8199

The gist of the changes are:
1. Make the dialog focusing steps look at keyboard focusable elements
   instead of any focusable element.
2. Make the dialog element itself get focus if it has the autofocus
   attribute set.
3. Make the dialog element itself get focus as a fallback instead of
   focus being "reset" to the body element.

This patch also adds "outline:none" to several WPTs because this patch
causes the dialog element to become initially focused in some cases and
get a focus ring.

I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/CEL3wWHrTAQ

Fixed: 1193482
Change-Id: I1fee5981f72039a4467cbb35b2317832dd31bbea
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3984630
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1100024}

--

wpt-commits: 95f9b15d9aad3354f440e4e4cced5ccc405b0069
wpt-pr: 36831
---
 .../anchor-position-top-layer-001.html        |   1 +
 .../anchor-position-top-layer-002.html        |   1 +
 .../anchor-position-top-layer-003.html        |   1 +
 .../anchor-position-top-layer-004.html        |   1 +
 .../anchor-position-top-layer-005.html        |   1 +
 .../anchor-position-top-layer-006.html        |   1 +
 ...content-visibility-with-top-layer-003.html |   1 +
 .../content-with-top-layer-ref.html           |   1 +
 ...og-in-top-layer-during-transition-new.html |   2 +
 ...og-in-top-layer-during-transition-old.html |   2 +
 .../backdrop-stacking-order.html              |   1 +
 .../child-sequential-focus.html               |  58 +++++++++
 .../dialog-focus-shadow.html                  | 112 +++++++++---------
 ...alog-focusing-steps-prevent-autofocus.html |   2 +-
 .../the-dialog-element/dialog-showModal.html  |   2 +-
 .../dont-share-style-to-top-layer-ref.html    |   3 +
 .../dont-share-style-to-top-layer.html        |   3 +
 ...-from-top-layer-has-original-position.html |   1 +
 ...-position-child-with-contain-ancestor.html |   3 +
 ...fixed-position-child-with-fo-ancestor.html |   3 +
 ...ition-child-with-transformed-ancestor.html |   3 +
 ...ition-child-with-will-change-ancestor.html |   3 +
 .../the-dialog-element/inert-label-focus.html |   9 +-
 .../inert-node-is-unfocusable.html            |   5 +
 .../modal-dialog-backdrop.html                |   1 +
 .../modal-dialog-generated-content.html       |   1 +
 .../show-modal-focusing-steps.html            |   4 +-
 .../top-layer-containing-block.html           |   2 +-
 .../top-layer-display-none.html               |   1 +
 .../the-dialog-element/top-layer-nesting.html |   1 +
 .../top-layer-parent-clip.html                |   1 +
 .../top-layer-parent-filter.html              |   1 +
 .../top-layer-parent-mask.html                |   1 +
 .../top-layer-parent-opacity.html             |   1 +
 .../top-layer-parent-overflow-clip.html       |   1 +
 .../top-layer-parent-overflow-hidden.html     |   1 +
 .../top-layer-parent-overflow-scroll.html     |   1 +
 .../top-layer-parent-transform.html           |   1 +
 ...r-stacking-correct-order-remove-readd.html |   1 +
 .../top-layer-stacking-dynamic.html           |   1 +
 40 files changed, 174 insertions(+), 66 deletions(-)
 create mode 100644 testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus.html

diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html
index c96f6eef558f3..ffa1c1cbd1eab 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html
@@ -22,6 +22,7 @@
   height: 100px;
   background: lime;
   anchor-scroll: --a;
+  outline: none;
 }
 
 body {
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html
index e626e6b93566c..849558f0f8c9e 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html
@@ -22,6 +22,7 @@
   height: 100px;
   background: lime;
   anchor-scroll: --a;
+  outline: none;
 }
 
 body {
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html
index 39f3c362c7ba1..5012b52f5f945 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html
@@ -22,6 +22,7 @@
   height: 100px;
   background: lime;
   anchor-scroll: --a;
+  outline: none;
 }
 
 body {
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html
index 8e189e0e7b709..84e9296a1094b 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html
@@ -22,6 +22,7 @@
   height: 100px;
   background: lime;
   anchor-scroll: --a;
+  outline: none;
 }
 
 body {
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html
index d9e4fa86e10dc..6adf8961a4bdc 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html
@@ -35,6 +35,7 @@
   border: 0;
   padding: 0;
   inset: auto;
+  outline: none;
 }
 
 dialog::backdrop {
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html
index 5f5cd67a1d709..d2a39eae6d66a 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html
@@ -34,6 +34,7 @@
   margin: 0;
   border: 0;
   padding: 0;
+  outline: none;
 }
 
 dialog::backdrop {
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html
index b8685954ff835..7fb1f20b7ecd3 100644
--- a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html
@@ -12,6 +12,7 @@
 <style>
 .box { width: 100px; height: 100px; border: 1px solid black; }
 .hidden { content-visibility: hidden }
+#dialog { outline: none; }
 </style>
 
 <div id=container class=box>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-with-top-layer-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-with-top-layer-ref.html
index 1a3cad327839c..eadc5f65d1e8b 100644
--- a/testing/web-platform/tests/css/css-contain/content-visibility/content-with-top-layer-ref.html
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-with-top-layer-ref.html
@@ -4,6 +4,7 @@
 
 <style>
 .box { width: 100px; height: 100px; border: 1px solid black; }
+dialog { outline: none; }
 </style>
 
 <div id=container class=box>
diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html
index e84167a24892c..0473209fa9df7 100644
--- a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html
@@ -18,6 +18,8 @@
 
   view-transition-name: dialog;
   contain: layout;
+
+  outline: none;
 }
 
 #target::backdrop {
diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html
index 672295cd3bd72..3634f65d8c99a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html
@@ -18,6 +18,8 @@
 
   view-transition-name: dialog;
   contain: layout;
+
+  outline: none;
 }
 
 #target::backdrop {
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html
index 57cc63aab4802..897f54a53fbae 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html
@@ -6,6 +6,7 @@
     padding: 0px;
     border: none;
     margin: 0px;
+    outline: none;
 }
 
 #bottom::backdrop {
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus.html
new file mode 100644
index 0000000000000..1b4dd30230054
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/pull/8199">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<dialog autofocus id=autofocusdialog data-description="dialog element with autofocus should get initial focus.">
+  <button>focusable button</button>
+  <button autofocus class=target>autofocusable button</button>
+</dialog>
+
+<dialog id=keyboardfocusdialog data-description="Only keyboard-focusable elements should get dialog initial focus.">
+  <button tabindex="-1">mouse focusable button</button>
+  <button class=target>keyboard focusable button</button>
+</dialog>
+
+<dialog id=autofocuswithoutkeyboarddialog data-description="Autofocus takes precedence over keyboard-focusable requirement.">
+  <button>keyboard focusable button</button>
+  <button tabindex="-1" autofocus class=target>mouse focusable autofocus button</button>
+</dialog>
+
+<dialog id=subtree data-description="Only keyboard-focusable elements should get dialog initial focus including in subtrees.">
+  <div>
+    <button tabindex="-1">mouse focusable button</button>
+    <button class=target>keyboard focusable button</button>
+  </div>
+</dialog>
+
+<dialog id=nestedbuttons data-description="Only keyboard-focusable elements should get dialog initial focus including in nested buttons.">
+  <button tabindex="-1">
+    <span>mouse focusable button</span>
+    <button tabindex="-1">nested mouse focusable button</button>
+  </button>
+  <button class=target>keyboard focusable button</button>
+</dialog>
+
+<script>
+document.querySelectorAll('dialog').forEach(dialog => {
+  test(t => {
+    const target = dialog.querySelector('.target');
+    t.add_cleanup
+    t.add_cleanup(() => {
+      if (dialog.open)
+        dialog.close();
+    });
+
+    dialog.showModal();
+    assert_equals(document.activeElement,
+      dialog.hasAttribute('autofocus') ? dialog : target,
+      'showModal: the target element did not receive initial focus.');
+    dialog.close();
+
+    dialog.show();
+    assert_equals(document.activeElement, target, 'show: the target element did not receive initial focus.');
+    dialog.close();
+  }, dialog.dataset.description);
+});
+</script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
index e9ea15516e271..7e5768542559a 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
@@ -9,21 +9,21 @@
   We focus this one between each test, to ensure that for non-modal dialogs,
   if there is no focus delegate, it stays focused (instead of causing focus to reset to the body).
 -->
-<button tabindex="-1" id="focus-between-tests">Focus between tests</button>
+<button id="focus-between-tests">Focus between tests</button>
 
 <dialog data-description="No autofocus, no delegatesFocus, no siblings">
   <template class="turn-into-shadow-tree">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
 <dialog data-description="No autofocus, no delegatesFocus, sibling before">
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button class="focus-me">Focusable</button>
   <template class="turn-into-shadow-tree">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
@@ -31,25 +31,25 @@
 <dialog data-description="No autofocus, no delegatesFocus, sibling after">
   <template class="turn-into-shadow-tree">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button class="focus-me">Focusable</button>
 </dialog>
 
 <dialog data-description="No autofocus, yes delegatesFocus, no siblings">
   <template class="turn-into-shadow-tree delegates-focus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button class="focus-me">Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
 <dialog data-description="No autofocus, yes delegatesFocus, sibling before">
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button class="focus-me">Focusable</button>
   <template class="turn-into-shadow-tree delegates-focus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
@@ -57,26 +57,26 @@
 <dialog data-description="No autofocus, yes delegatesFocus, sibling after">
   <template class="turn-into-shadow-tree delegates-focus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button class="focus-me">Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
-  <button tabindex="-1">Focusable</button>
+  <button>Focusable</button>
 </dialog>
 
 <dialog data-description="Autofocus before, no delegatesFocus">
-  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+  <button autofocus class="focus-me">Focusable</button>
   <template class="turn-into-shadow-tree">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
 <dialog data-description="Autofocus before, yes delegatesFocus">
-  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+  <button autofocus class="focus-me">Focusable</button>
   <template class="turn-into-shadow-tree delegates-focus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
@@ -84,34 +84,34 @@
 <dialog data-description="Autofocus after, no delegatesFocus">
   <template class="turn-into-shadow-tree">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
-  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+  <button autofocus class="focus-me">Focusable</button>
 </dialog>
 
 <dialog data-description="Autofocus after, yes delegatesFocus">
   <template class="turn-into-shadow-tree delegates-focus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
-  <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+  <button autofocus class="focus-me">Focusable</button>
 </dialog>
 
 <dialog data-description="Autofocus on shadow host, yes delegatesFocus, no siblings">
   <template class="turn-into-shadow-tree delegates-focus autofocus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button class="focus-me">Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
 <dialog data-description="Autofocus on shadow host, yes delegatesFocus, sibling before">
-  <button tabindex="-1">Focusable</button>
+  <button>Focusable</button>
   <template class="turn-into-shadow-tree delegates-focus autofocus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button class="focus-me">Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
@@ -119,25 +119,25 @@
 <dialog data-description="Autofocus on shadow host, yes delegatesFocus, sibling after">
   <template class="turn-into-shadow-tree delegates-focus autofocus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button class="focus-me">Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
-  <button tabindex="-1">Focusable</button>
+  <button>Focusable</button>
 </dialog>
 
 <dialog data-description="Autofocus on shadow host, no delegatesFocus, no siblings">
   <template class="turn-into-shadow-tree autofocus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
 <dialog data-description="Autofocus on shadow host, no delegatesFocus, sibling before">
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button class="focus-me">Focusable</button>
   <template class="turn-into-shadow-tree autofocus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
@@ -145,91 +145,91 @@
 <dialog data-description="Autofocus on shadow host, no delegatesFocus, sibling after">
   <template class="turn-into-shadow-tree autofocus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button class="focus-me">Focusable</button>
 </dialog>
 
 <dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, no siblings">
   <template class="turn-into-shadow-tree delegates-focus">
-    <button tabindex="-1">Focusable</button>
-    <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+    <button>Focusable</button>
+    <button autofocus class="focus-me">Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
 <dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling before">
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button class="focus-me">Focusable</button>
   <template class="turn-into-shadow-tree delegates-focus">
-    <button tabindex="-1">Focusable</button>
-    <button tabindex="-1" autofocus>Focusable</button>
+    <button>Focusable</button>
+    <button autofocus>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
 <dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling after">
   <template class="turn-into-shadow-tree delegates-focus">
-    <button tabindex="-1">Focusable</button>
-    <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+    <button>Focusable</button>
+    <button autofocus class="focus-me">Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
-  <button tabindex="-1">Focusable</button>
+  <button>Focusable</button>
 </dialog>
 
 <dialog data-description="Autofocus inside shadow tree, no delegatesFocus, no siblings">
   <template class="turn-into-shadow-tree">
-    <button tabindex="-1">Focusable</button>
-    <button tabindex="-1" autofocus>Focusable</button>
+    <button>Focusable</button>
+    <button autofocus>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
 <dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling before">
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button class="focus-me">Focusable</button>
   <template class="turn-into-shadow-tree">
-    <button tabindex="-1">Focusable</button>
-    <button tabindex="-1" autofocus>Focusable</button>
+    <button>Focusable</button>
+    <button autofocus>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
 </dialog>
 
 <dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling after">
   <template class="turn-into-shadow-tree">
-    <button tabindex="-1">Focusable</button>
-    <button tabindex="-1" autofocus>Focusable</button>
+    <button>Focusable</button>
+    <button autofocus>Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button class="focus-me">Focusable</button>
 </dialog>
 
 <dialog data-description="Two shadow trees, both delegatesFocus, first tree doesn't have autofocus element, second does">
   <template class="turn-into-shadow-tree delegates-focus">
     <button disabled>Non-focusable</button>
-    <button tabindex="-1" class="focus-me">Focusable</button>
+    <button class="focus-me">Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
   <template class="turn-into-shadow-tree delegates-focus">
-    <button tabindex="-1" autofocus>Focusable</button>
+    <button autofocus>Focusable</button>
   </template>
 </dialog>
 
 <dialog data-description="No autofocus, no delegatesFocus, slotted target">
   <template class="turn-into-shadow-tree">
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
     <slot></slot>
-    <button tabindex="-1">Focusable</button>
+    <button>Focusable</button>
   </template>
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button class="focus-me">Focusable</button>
 </dialog>
 
 <dialog data-description="Shadowroot on child, no autofocus, no delegatesFocus">
   <div>
     <template class="turn-into-shadow-tree">
-      <button tabindex="-1">Focusable</button>
+      <button>Focusable</button>
     </template>
   </div>
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button class="focus-me">Focusable</button>
 </dialog>
 
 <script>
@@ -264,12 +264,8 @@
           assert_equals(document.activeElement, shadowHost);
           assert_equals(shadowHost.shadowRoot.activeElement, expectedFocusInsideShadowTree);
         } else {
-          // There is no focus delegate. Expected result depends on show() vs. showModal().
-          if (method === "show") {
-            assert_equals(document.activeElement, focusBetweenTests);
-          } else {
-            assert_equals(document.activeElement, document.body);
-          }
+          // There is no focus delegate. The dialog element should be focused.
+          assert_equals(document.activeElement, dialog);
         }
       }
     }, `${method}: ${dialog.dataset.description}`);
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html
index 2e8563f761dd5..4d1e792c1cc9c 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html
@@ -14,7 +14,7 @@
   input.autofocus = true;
   document.body.insertBefore(input, dialog);
   await waitUntilStableAutofocusState();
-  assert_equals(document.activeElement, document.body,
+  assert_not_equals(document.activeElement, input,
       'Non-dialog autofocus processing should be skipped.');
 }, 'After showing a dialog, non-dialog autofocus processing won\'t work.');
 </script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
index c511631f9fbb7..5edff18614225 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
@@ -116,7 +116,7 @@
     d6.showModal();
     this.add_cleanup(function() { d6.close(); });
     assert_true(d6.open);
-    assert_equals(document.activeElement, document.body);
+    assert_equals(document.activeElement, d6);
   }, "opening dialog without focusable children");
 
   test(function(){
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html
index 535ac93560709..7e6112b3cee09 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html
@@ -1,5 +1,8 @@
 <!doctype html>
 <style>
+dialog {
+  outline: none;
+}
 #non-modal {
     position: static;
 }
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html
index efbbab010a08c..e4f4ce50b3e2f 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html
@@ -5,6 +5,9 @@
 dialog {
   position: static;
 }
+#modal {
+  outline: none;
+}
 </style>
 <p>Test that a non-top layer element doesn't share style with a top layer
 element. The test passes if you see two boxes.</p>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html
index d78051a9b3eec..0dead33163635 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html
@@ -14,6 +14,7 @@
     border: none;
     padding: 0;
     margin: 0;
+    outline: none;
 }
 </style>
 </head>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html
index 98835cb795fb0..5ee64fc1d9e31 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html
@@ -8,6 +8,9 @@
 ::backdrop {
     display: none;
 }
+#dialog {
+    outline: none;
+}
 </style>
 </head>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html
index fe625f1c9bfb4..2bc294be2fae1 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html
@@ -8,6 +8,9 @@
 ::backdrop {
     display: none;
 }
+#dialog {
+    outline: none;
+}
 </style>
 </head>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html
index 58627443dae19..527d508252c15 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html
@@ -8,6 +8,9 @@
 ::backdrop {
     display: none;
 }
+#dialog {
+    outline: none;
+}
 </style>
 </head>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html
index 14f4391e6bfbc..e9db7321cd703 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html
@@ -8,6 +8,9 @@
 ::backdrop {
     display: none;
 }
+#dialog {
+    outline: none;
+}
 </style>
 </head>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html
index 05f4069d78f57..61e3ddeaf23e6 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html
@@ -39,12 +39,15 @@
   document.querySelector('#text').focus();
 
   label = document.querySelector('label');
+  submit = document.querySelector('#submit');
   label.focus();
-  assert_equals(document.activeElement, document.querySelector('#submit'),
+  assert_equals(document.activeElement, submit,
     'label.focus() should send focus to the target.');
 
   await clickOn(label);
-  assert_equals(document.activeElement, document.body,
-    'Clicking the label should be the same as clicking the document body.');
+  assert_not_equals(document.activeElement, label,
+    'Clicking the label should not focus the label.');
+  assert_not_equals(document.activeElement, submit,
+    'Clicking the label should not focus the submit input.');
 }, 'Tests focusing of an inert label for a non-inert target.');
 </script>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
index 56f31f3592497..74379f50e22c7 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
@@ -7,6 +7,11 @@
 <script src="/resources/testharnessreport.js"></script>
 </head>
 <body id="body" tabindex="1">
+<style>
+dialog {
+  outline: none;
+}
+</style>
 <dialog id="top-dialog" tabindex="1" style="width: 100px; top: 30px"><button id="top-dialog-button">I get focus</button></dialog>
 <dialog id="bottom-dialog" tabindex="-1" style="width: 100px; bottom: 30px"><button id="bottom-dialog-button">I don't get focus.</button></dialog>
 <div id="container">
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html
index a18af0d30ea45..55d7132f8cefa 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html
@@ -7,6 +7,7 @@
     height: 100px;
     width: 100px;
     background: green;
+    outline: none;
 }
 </style>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html
index 86f43e52c2eb0..96b97f8ec3c49 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html
@@ -11,6 +11,7 @@
     height: 100px;
     width: 100px;
     background: green;
+    outline: none;
 }
 
 dialog::before {
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
index 164b41459d176..6a2ad8c4a0a4e 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
@@ -10,10 +10,10 @@
         outerButton = document.getElementById('outer-button');
         assert_equals(document.activeElement, outerButton);
 
-        // Test that focus goes to body if the dialog has no focusable elements, including itself
+        // Test that focus goes to the dialog if the dialog has no focusable elements
         var outerDialog = document.getElementById('outer-dialog');
         outerDialog.showModal();
-        assert_equals(document.activeElement, document.body);
+        assert_equals(document.activeElement, outerDialog);
 
         // Test that an autofocus element in the dialog gets focus.
         var dialog = document.getElementById('dialog');
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html
index 10f6c69fbe188..0886c2cd2c2a0 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html
@@ -14,7 +14,7 @@
 This tests that a modal dialog's containing block is in the initial containing block and that it is unaffected by
 ancestor elements with overflow or opacity.
 <div style="position: absolute; top: 400px; opacity: 0.3">
-    <dialog id="opaqueDialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta">
+    <dialog id="opaqueDialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta; outline: none">
         This dialog should be unaffected by its ancestor with opacity.
     </dialog>
 </div>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html
index 5257823eca00c..ba790c1db9a56 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html
@@ -7,6 +7,7 @@
 dialog {
     height: 150px;
     width: 150px;
+    outline: none;
 }
 
 ::backdrop {
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html
index 6397584387fc4..9e0616e952033 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html
@@ -7,6 +7,7 @@
 dialog {
     height: 150px;
     width: 150px;
+    outline: none;
 }
 
 ::backdrop {
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html
index 9a621e7594eb2..6e3c52aa02a50 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html
@@ -15,6 +15,7 @@
 dialog::backdrop,
 dialog {
     background: green;
+    outline: none;
 }
 </style>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html
index 020d90a0c8121..589d5397791ab 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html
@@ -16,6 +16,7 @@
 dialog {
     background: green;
     position: absolute;
+    outline: none;
 }
 </style>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html
index daa5ccbbe106d..8ba3ed47c2775 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html
@@ -16,6 +16,7 @@
 dialog::backdrop,
 dialog {
     background: green;
+    outline: none;
 }
 </style>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html
index 82aa09d6c5729..46c5de2a6dd54 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html
@@ -16,6 +16,7 @@
 dialog::backdrop,
 dialog {
     background: green;
+    outline: none;
 }
 </style>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html
index 86587254cf060..d80595496929d 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html
@@ -21,6 +21,7 @@
 dialog {
     background: green;
     position: absolute;
+    outline: none;
 }
 </style>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html
index afcde733d2f64..f5389ddc09a23 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html
@@ -20,6 +20,7 @@
 dialog::backdrop,
 dialog {
     background: green;
+    outline: none;
 }
 </style>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html
index dd04c2ed47af5..a230defeeab10 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html
@@ -21,6 +21,7 @@
 dialog {
     background: green;
     position: absolute;
+    outline: none;
 }
 </style>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html
index cf35a713f3369..ac6f3cffc3ccc 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html
@@ -15,6 +15,7 @@
 dialog::backdrop,
 dialog {
     background: green;
+    outline: none;
 }
 </style>
 <body>
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html
index 3b3e336892557..4fdd28820dbb2 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html
@@ -8,6 +8,7 @@
 dialog {
     height: 100px;
     width: 100px;
+    outline: none;
 }
 
 ::backdrop {
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html
index 8ab7068d306ab..ebccdc66cf9f6 100644
--- a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html
@@ -8,6 +8,7 @@
 dialog {
     height: 150px;
     width: 150px;
+    outline: none;
 }
 
 ::backdrop {