From bebf1b4d148713b3d63f3fa41313263f8a88d3e1 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Mon, 17 Oct 2022 09:12:28 -0700
Subject: [PATCH] Implement new dialog shadow focus behavior

This implements the new dialog initial focus behavior specified in these
changes:
https://github.com/whatwg/html/pull/7079
https://github.com/whatwg/html/pull/7284
https://github.com/whatwg/html/pull/7361
https://github.com/whatwg/html/pull/8174

This will stay experimental until I have also made the other changes for
dialog initial focus: https://github.com/whatwg/html/pull/8199
After those changes have been made as well, I will carefully enable the
flag by default.

Bug: 383230, 670130, 1292852
Change-Id: I13995197f1942aa356cab0f3b41a0e226d1d170d
---
 .../dialog-focus-shadow.html                  | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html b/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
index 9cdad92d80f575..7d38e9dc87993b 100644
--- a/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
@@ -171,10 +171,10 @@
 <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>Focusable</button>
+    <button tabindex="-1" autofocus class="focus-me">Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button tabindex="-1">Focusable</button>
 </dialog>
 
 <dialog data-description="Autofocus inside shadow tree, no delegatesFocus, no siblings">
@@ -203,6 +203,24 @@
   <button tabindex="-1" class="focus-me">Focusable</button>
 </dialog>
 
+<dialog data-description="No autofocus, no delegatesFocus, slotted target">
+  <template class="turn-into-shadow-tree">
+    <button tabindex="-1">Focusable</button>
+    <slot></slot>
+    <button tabindex="-1">Focusable</button>
+  </template>
+  <button tabindex="-1" 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>
+    </template>
+  </div>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
 <script>
 for (const template of document.querySelectorAll(".turn-into-shadow-tree")) {
   const div = document.createElement("div");