From e1d2b674fbcc1ca01eccb624fdd758c38f3407a7 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Fri, 4 Nov 2022 17:55:41 -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
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3961528
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1067796}
---
 .../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 b4c7590ba2e6f4..e9ea15516e2711 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");