From 4909d3ee7ce1c94766c2d295bd67e1cf09de19b1 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Tue, 1 Nov 2022 14:31:34 -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

The gist of the changes are:
1. Use the DOM tree instead of the flat tree to search for an element to
   give initial focus.
2. Don't traverse into shadow roots when looking for elements to give
   initial focus unless the shadow root has delegatesFocus.

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.

Fixed: 383230, 670130, 1292852
Change-Id: I13995197f1942aa356cab0f3b41a0e226d1d170d
---
 .../dialog-focus-shadow.html                   | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

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 b4c7590ba2e6f49..e9ea15516e27119 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
@@ -214,6 +214,24 @@
   </template>
 </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");