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 {