Skip to content

Commit

Permalink
Bug 1795721 [wpt PR 36498] - Implement new dialog shadow focus behavi…
Browse files Browse the repository at this point in the history
…or, a=testonly

Automatic update from web-platform-tests
Implement new dialog shadow focus behavior

This implements the new dialog initial focus behavior specified in these
changes:
whatwg/html#7079
whatwg/html#7284
whatwg/html#7361
whatwg/html#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: whatwg/html#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 <[email protected]>
Commit-Queue: Joey Arhar <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1067796}

--

wpt-commits: e1d2b674fbcc1ca01eccb624fdd758c38f3407a7
wpt-pr: 36498
  • Loading branch information
josepharhar authored and moz-wptsync-bot committed Nov 11, 2022
1 parent eb98383 commit 8c1d48b
Showing 1 changed file with 18 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down

0 comments on commit 8c1d48b

Please sign in to comment.