Skip to content

Commit

Permalink
Implement new dialog shadow focus behavior
Browse files Browse the repository at this point in the history
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
  • Loading branch information
josepharhar authored and chromium-wpt-export-bot committed Nov 4, 2022
1 parent 60b17af commit 14d41c5
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 14d41c5

Please sign in to comment.