Skip to content

Commit 0c973b2

Browse files
lukewarlownt1m
authored andcommitted
Implement new dialog initial focus algorithm
https://bugs.webkit.org/show_bug.cgi?id=250795 Reviewed by Tim Nguyen. Updates the dialog focusing steps and the focus delegate steps to match latest spec. Spec PR: whatwg/html#8199 * LayoutTests/fast/layers/layer-order-after-top-layer.html: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/focus-previous-iframe.tentative-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-focus-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-dialog-initial-focus-expected.txt: Removed. * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-dialog-initial-focus.html: Removed. These tests no longer exist in upstream WPT repo. * Source/WebCore/dom/Element.cpp: (WebCore::Element::findFocusDelegateForTarget): * Source/WebCore/html/HTMLDialogElement.cpp: (WebCore::HTMLDialogElement::runFocusingSteps): (WebCore::HTMLDialogElement::supportsFocus const): * Source/WebCore/html/HTMLDialogElement.h: Canonical link: https://commits.webkit.org/281215@main
1 parent 41f9f1a commit 0c973b2

12 files changed

+66
-61
lines changed

LayoutTests/fast/layers/layer-order-after-top-layer.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<!DOCTYPE html>
22
<html>
33
<style>
4-
54
dialog, .above {
65
position: absolute;
76
left: 20px;
@@ -20,6 +19,7 @@
2019
display: block;
2120
padding: 0;
2221
margin: 0;
22+
outline: none;
2323
}
2424

2525
.above {
@@ -30,7 +30,6 @@
3030
height: 300px;
3131
padding: 0;
3232
margin: 0;
33-
background-color: Canvas;
3433
color: white;
3534
background-color: green;
3635
}

LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus-expected.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
FAIL dialog element with autofocus should get initial focus. assert_equals: showModal: the target element did not receive initial focus. expected Element node <dialog autofocus="" id="autofocusdialog" data-descriptio... but got Element node <body><dialog autofocus="" id="autofocusdialog" data-desc...
2+
PASS dialog element with autofocus should get initial focus.
33
FAIL Only keyboard-focusable elements should get dialog initial focus. assert_equals: showModal: the target element did not receive initial focus. expected Element node <button class="target">keyboard focusable button</button> but got Element node <button tabindex="-1">mouse focusable button</button>
44
PASS Autofocus takes precedence over keyboard-focusable requirement.
55
FAIL Only keyboard-focusable elements should get dialog initial focus including in subtrees. assert_equals: showModal: the target element did not receive initial focus. expected Element node <button class="target">keyboard focusable button</button> but got Element node <button tabindex="-1">mouse focusable button</button>

LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-expected.txt

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
Focus between tests
22

3-
FAIL show: No autofocus, no delegatesFocus, no siblings assert_equals: expected Element node <dialog data-description="No autofocus, no delegatesFocus... but got Element node <button id="focus-between-tests">Focus between tests</but...
4-
FAIL showModal: No autofocus, no delegatesFocus, no siblings assert_equals: expected Element node <dialog data-description="No autofocus, no delegatesFocus... but got Element node <body>
5-
6-
<!--
7-
We focus this one between each test, to en...
3+
PASS show: No autofocus, no delegatesFocus, no siblings
4+
PASS showModal: No autofocus, no delegatesFocus, no siblings
85
PASS show: No autofocus, no delegatesFocus, sibling before
96
PASS showModal: No autofocus, no delegatesFocus, sibling before
107
PASS show: No autofocus, no delegatesFocus, sibling after
@@ -29,11 +26,8 @@ PASS show: Autofocus on shadow host, yes delegatesFocus, sibling before
2926
PASS showModal: Autofocus on shadow host, yes delegatesFocus, sibling before
3027
PASS show: Autofocus on shadow host, yes delegatesFocus, sibling after
3128
PASS showModal: Autofocus on shadow host, yes delegatesFocus, sibling after
32-
FAIL show: Autofocus on shadow host, no delegatesFocus, no siblings assert_equals: expected Element node <dialog data-description="Autofocus on shadow host, no de... but got Element node <button id="focus-between-tests">Focus between tests</but...
33-
FAIL showModal: Autofocus on shadow host, no delegatesFocus, no siblings assert_equals: expected Element node <dialog data-description="Autofocus on shadow host, no de... but got Element node <body>
34-
35-
<!--
36-
We focus this one between each test, to en...
29+
PASS show: Autofocus on shadow host, no delegatesFocus, no siblings
30+
PASS showModal: Autofocus on shadow host, no delegatesFocus, no siblings
3731
PASS show: Autofocus on shadow host, no delegatesFocus, sibling before
3832
PASS showModal: Autofocus on shadow host, no delegatesFocus, sibling before
3933
PASS show: Autofocus on shadow host, no delegatesFocus, sibling after
@@ -44,11 +38,8 @@ PASS show: Autofocus inside shadow tree, yes delegatesFocus, sibling before
4438
PASS showModal: Autofocus inside shadow tree, yes delegatesFocus, sibling before
4539
PASS show: Autofocus inside shadow tree, yes delegatesFocus, sibling after
4640
PASS showModal: Autofocus inside shadow tree, yes delegatesFocus, sibling after
47-
FAIL show: Autofocus inside shadow tree, no delegatesFocus, no siblings assert_equals: expected Element node <dialog data-description="Autofocus inside shadow tree, n... but got Element node <button id="focus-between-tests">Focus between tests</but...
48-
FAIL showModal: Autofocus inside shadow tree, no delegatesFocus, no siblings assert_equals: expected Element node <dialog data-description="Autofocus inside shadow tree, n... but got Element node <body>
49-
50-
<!--
51-
We focus this one between each test, to en...
41+
PASS show: Autofocus inside shadow tree, no delegatesFocus, no siblings
42+
PASS showModal: Autofocus inside shadow tree, no delegatesFocus, no siblings
5243
PASS show: Autofocus inside shadow tree, no delegatesFocus, sibling before
5344
PASS showModal: Autofocus inside shadow tree, no delegatesFocus, sibling before
5445
PASS show: Autofocus inside shadow tree, no delegatesFocus, sibling after

LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-expected.txt

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ PASS showModal() on a <dialog> that already has an open attribute throws an Inva
44
PASS showModal() on a <dialog> after initial showModal() and removing the open attribute
55
PASS showModal() on a <dialog> not in a Document throws an InvalidStateError exception
66
PASS when opening multiple dialogs, only the newest one is non-inert
7-
FAIL opening dialog without focusable children assert_equals: expected Element node <dialog id="d6" open=""></dialog> but got Element node <body><div id="log"></div>
8-
<button id="b0">OK</button>
9-
<d...
7+
PASS opening dialog without focusable children
108
PASS opening dialog with multiple focusable children
119
PASS opening dialog with multiple focusable children, one having the autofocus attribute
1210
FAIL when opening multiple dialogs, the most recently opened is rendered on top assert_equals: expected Element node <dialog id="d10" open=""></dialog> but got Element node <dialog id="d11" open=""></dialog>

LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/focus-previous-iframe.tentative-expected.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
CONSOLE MESSAGE: Error: assert_equals: expected Element node <input></input> but got Element node <iframe srcdoc="<input><dialog> Dialog in child </dialog>...
12

23

34
PASS Focus should move back from parent document to child document
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11

22

3-
FAIL focus when a modal dialog is opened assert_equals: expected Element node <dialog id="outer-dialog" open="">
4-
<dialog id="dialog... but got Element node <body>
5-
<button id="outer-button" autofocus=""></button>
6-
<...
3+
PASS focus when a modal dialog is opened
74

LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-dialog-initial-focus-expected.txt

Lines changed: 0 additions & 5 deletions
This file was deleted.

LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-dialog-initial-focus.html

Lines changed: 0 additions & 25 deletions
This file was deleted.

LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-focus-expected.txt

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,50 @@ PASS Popover corner cases test: autofocus multiple children
2323
PASS Popover focus test: autofocus popover and multiple autofocus children
2424
PASS Popover button click focus test: autofocus popover and multiple autofocus children
2525
PASS Popover corner cases test: autofocus popover and multiple autofocus children
26-
FAIL Popover focus test: Opening dialogs as popovers should use dialog initial focus algorithm. assert_equals: Opening dialogs as popovers should use dialog initial focus algorithm. directly focus with popover.focus() expected Element node <dialog popover="auto" data-test="Opening dialogs as popo... but got Element node <button class="should-be-focused" tabindex="0">button</bu...
27-
FAIL Popover button click focus test: Opening dialogs as popovers should use dialog initial focus algorithm. assert_false: popover should start out hidden expected false got true
28-
FAIL Popover corner cases test: Opening dialogs as popovers should use dialog initial focus algorithm. assert_false: popover should start out hidden expected false got true
29-
FAIL Popover focus test: Opening dialogs as popovers which have autofocus should focus the dialog. assert_equals: expected Element node <button tabindex="0" id="priorFocus"></button> but got Element node <button class="should-be-focused" tabindex="0">button</bu...
30-
FAIL Popover button click focus test: Opening dialogs as popovers which have autofocus should focus the dialog. assert_equals: expected Element node <button tabindex="0" id="priorFocus"></button> but got Element node <button class="should-be-focused" tabindex="0">button</bu...
26+
PASS Popover focus test: Opening dialogs as popovers should use dialog initial focus algorithm.
27+
FAIL Popover button click focus test: Opening dialogs as popovers should use dialog initial focus algorithm. assert_equals: focus should move to the button when clicked, and should stay there when the popover closes expected Element node <button tabindex="0" popovertarget="popover-id">Click me<... but got Element node <body>
28+
29+
30+
31+
32+
33+
34+
35+
36+
37+
38+
39+
40+
41+
42+
43+
44+
45+
<dialog popover="auto" autofocus=...
46+
PASS Popover corner cases test: Opening dialogs as popovers should use dialog initial focus algorithm.
47+
PASS Popover focus test: Opening dialogs as popovers which have autofocus should focus the dialog.
48+
FAIL Popover button click focus test: Opening dialogs as popovers which have autofocus should focus the dialog. assert_equals: focus should move to the button when clicked, and should stay there when the popover closes expected Element node <button tabindex="0" popovertarget="popover-id">Click me<... but got Element node <body>
49+
50+
51+
52+
53+
54+
55+
56+
57+
58+
59+
60+
61+
62+
63+
64+
65+
66+
67+
68+
<style>
69+
[popover] {
70+
borde...
3171
PASS Popover corner cases test: Opening dialogs as popovers which have autofocus should focus the dialog.
3272

Source/WebCore/dom/Element.cpp

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3682,6 +3682,9 @@ RefPtr<Element> Element::findFocusDelegateForTarget(ContainerNode& target, Focus
36823682
if (RefPtr element = autoFocusDelegate(target, trigger))
36833683
return element;
36843684
for (Ref element : descendantsOfType<Element>(target)) {
3685+
if (is<HTMLDialogElement>(&target) && element->isKeyboardFocusable(nullptr))
3686+
return element;
3687+
36853688
switch (trigger) {
36863689
case FocusTrigger::Click:
36873690
if (element->isMouseFocusable())

0 commit comments

Comments
 (0)