Implement dialog initial focus proposal
This has been discussed here:
https://github.com/whatwg/html/pull/4184
https://github.com/whatwg/html/pull/8199
The gist of the changes are:
1. Make the dialog focusing steps look at keyboard focusable elements
instead of any focusable element.
2. Make the dialog element itself get focus if it has the autofocus
attribute set.
3. Make the dialog element itself get focus as a fallback instead of
focus being "reset" to the body element.
This patch also adds "outline:none" to several WPTs because this patch
causes the dialog element to become initially focused in some cases and
get a focus ring.
I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/CEL3wWHrTAQ
Fixed: 1193482
Change-Id: I1fee5981f72039a4467cbb35b2317832dd31bbea
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3984630
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1100024}
diff --git a/css/css-anchor-position/anchor-position-top-layer-001.html b/css/css-anchor-position/anchor-position-top-layer-001.html
index c96f6ee..ffa1c1c 100644
--- a/css/css-anchor-position/anchor-position-top-layer-001.html
+++ b/css/css-anchor-position/anchor-position-top-layer-001.html
@@ -22,6 +22,7 @@
height: 100px;
background: lime;
anchor-scroll: --a;
+ outline: none;
}
body {
diff --git a/css/css-anchor-position/anchor-position-top-layer-002.html b/css/css-anchor-position/anchor-position-top-layer-002.html
index e626e6b..849558f 100644
--- a/css/css-anchor-position/anchor-position-top-layer-002.html
+++ b/css/css-anchor-position/anchor-position-top-layer-002.html
@@ -22,6 +22,7 @@
height: 100px;
background: lime;
anchor-scroll: --a;
+ outline: none;
}
body {
diff --git a/css/css-anchor-position/anchor-position-top-layer-003.html b/css/css-anchor-position/anchor-position-top-layer-003.html
index 39f3c36..5012b52 100644
--- a/css/css-anchor-position/anchor-position-top-layer-003.html
+++ b/css/css-anchor-position/anchor-position-top-layer-003.html
@@ -22,6 +22,7 @@
height: 100px;
background: lime;
anchor-scroll: --a;
+ outline: none;
}
body {
diff --git a/css/css-anchor-position/anchor-position-top-layer-004.html b/css/css-anchor-position/anchor-position-top-layer-004.html
index 8e189e0..84e9296 100644
--- a/css/css-anchor-position/anchor-position-top-layer-004.html
+++ b/css/css-anchor-position/anchor-position-top-layer-004.html
@@ -22,6 +22,7 @@
height: 100px;
background: lime;
anchor-scroll: --a;
+ outline: none;
}
body {
diff --git a/css/css-anchor-position/anchor-position-top-layer-005.html b/css/css-anchor-position/anchor-position-top-layer-005.html
index d9e4fa8..6adf896 100644
--- a/css/css-anchor-position/anchor-position-top-layer-005.html
+++ b/css/css-anchor-position/anchor-position-top-layer-005.html
@@ -35,6 +35,7 @@
border: 0;
padding: 0;
inset: auto;
+ outline: none;
}
dialog::backdrop {
diff --git a/css/css-anchor-position/anchor-position-top-layer-006.html b/css/css-anchor-position/anchor-position-top-layer-006.html
index 5f5cd67..d2a39ea 100644
--- a/css/css-anchor-position/anchor-position-top-layer-006.html
+++ b/css/css-anchor-position/anchor-position-top-layer-006.html
@@ -34,6 +34,7 @@
margin: 0;
border: 0;
padding: 0;
+ outline: none;
}
dialog::backdrop {
diff --git a/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html b/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html
index b868595..7fb1f20 100644
--- a/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html
+++ b/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html
@@ -12,6 +12,7 @@
<style>
.box { width: 100px; height: 100px; border: 1px solid black; }
.hidden { content-visibility: hidden }
+#dialog { outline: none; }
</style>
<div id=container class=box>
diff --git a/css/css-contain/content-visibility/content-with-top-layer-ref.html b/css/css-contain/content-visibility/content-with-top-layer-ref.html
index 1a3cad3..eadc5f6 100644
--- a/css/css-contain/content-visibility/content-with-top-layer-ref.html
+++ b/css/css-contain/content-visibility/content-with-top-layer-ref.html
@@ -4,6 +4,7 @@
<style>
.box { width: 100px; height: 100px; border: 1px solid black; }
+dialog { outline: none; }
</style>
<div id=container class=box>
diff --git a/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html b/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html
index e84167a..0473209 100644
--- a/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html
+++ b/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html
@@ -18,6 +18,8 @@
view-transition-name: dialog;
contain: layout;
+
+ outline: none;
}
#target::backdrop {
diff --git a/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html b/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html
index 672295c..3634f65 100644
--- a/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html
+++ b/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html
@@ -18,6 +18,8 @@
view-transition-name: dialog;
contain: layout;
+
+ outline: none;
}
#target::backdrop {
diff --git a/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html b/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html
index 57cc63a..897f54a 100644
--- a/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html
+++ b/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html
@@ -6,6 +6,7 @@
padding: 0px;
border: none;
margin: 0px;
+ outline: none;
}
#bottom::backdrop {
diff --git a/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus.html b/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus.html
new file mode 100644
index 0000000..1b4dd30
--- /dev/null
+++ b/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/pull/8199">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<dialog autofocus id=autofocusdialog data-description="dialog element with autofocus should get initial focus.">
+ <button>focusable button</button>
+ <button autofocus class=target>autofocusable button</button>
+</dialog>
+
+<dialog id=keyboardfocusdialog data-description="Only keyboard-focusable elements should get dialog initial focus.">
+ <button tabindex="-1">mouse focusable button</button>
+ <button class=target>keyboard focusable button</button>
+</dialog>
+
+<dialog id=autofocuswithoutkeyboarddialog data-description="Autofocus takes precedence over keyboard-focusable requirement.">
+ <button>keyboard focusable button</button>
+ <button tabindex="-1" autofocus class=target>mouse focusable autofocus button</button>
+</dialog>
+
+<dialog id=subtree data-description="Only keyboard-focusable elements should get dialog initial focus including in subtrees.">
+ <div>
+ <button tabindex="-1">mouse focusable button</button>
+ <button class=target>keyboard focusable button</button>
+ </div>
+</dialog>
+
+<dialog id=nestedbuttons data-description="Only keyboard-focusable elements should get dialog initial focus including in nested buttons.">
+ <button tabindex="-1">
+ <span>mouse focusable button</span>
+ <button tabindex="-1">nested mouse focusable button</button>
+ </button>
+ <button class=target>keyboard focusable button</button>
+</dialog>
+
+<script>
+document.querySelectorAll('dialog').forEach(dialog => {
+ test(t => {
+ const target = dialog.querySelector('.target');
+ t.add_cleanup
+ t.add_cleanup(() => {
+ if (dialog.open)
+ dialog.close();
+ });
+
+ dialog.showModal();
+ assert_equals(document.activeElement,
+ dialog.hasAttribute('autofocus') ? dialog : target,
+ 'showModal: the target element did not receive initial focus.');
+ dialog.close();
+
+ dialog.show();
+ assert_equals(document.activeElement, target, 'show: the target element did not receive initial focus.');
+ dialog.close();
+ }, dialog.dataset.description);
+});
+</script>
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 e9ea155..7e57685 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
@@ -9,21 +9,21 @@
We focus this one between each test, to ensure that for non-modal dialogs,
if there is no focus delegate, it stays focused (instead of causing focus to reset to the body).
-->
-<button tabindex="-1" id="focus-between-tests">Focus between tests</button>
+<button id="focus-between-tests">Focus between tests</button>
<dialog data-description="No autofocus, no delegatesFocus, no siblings">
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="No autofocus, no delegatesFocus, sibling before">
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
@@ -31,25 +31,25 @@
<dialog data-description="No autofocus, no delegatesFocus, sibling after">
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
</dialog>
<dialog data-description="No autofocus, yes delegatesFocus, no siblings">
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="No autofocus, yes delegatesFocus, sibling before">
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
@@ -57,26 +57,26 @@
<dialog data-description="No autofocus, yes delegatesFocus, sibling after">
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
</dialog>
<dialog data-description="Autofocus before, no delegatesFocus">
- <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+ <button autofocus class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus before, yes delegatesFocus">
- <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+ <button autofocus class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
@@ -84,34 +84,34 @@
<dialog data-description="Autofocus after, no delegatesFocus">
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
- <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+ <button autofocus class="focus-me">Focusable</button>
</dialog>
<dialog data-description="Autofocus after, yes delegatesFocus">
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
- <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+ <button autofocus class="focus-me">Focusable</button>
</dialog>
<dialog data-description="Autofocus on shadow host, yes delegatesFocus, no siblings">
<template class="turn-into-shadow-tree delegates-focus autofocus">
<button disabled>Non-focusable</button>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus on shadow host, yes delegatesFocus, sibling before">
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<template class="turn-into-shadow-tree delegates-focus autofocus">
<button disabled>Non-focusable</button>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
@@ -119,25 +119,25 @@
<dialog data-description="Autofocus on shadow host, yes delegatesFocus, sibling after">
<template class="turn-into-shadow-tree delegates-focus autofocus">
<button disabled>Non-focusable</button>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
</dialog>
<dialog data-description="Autofocus on shadow host, no delegatesFocus, no siblings">
<template class="turn-into-shadow-tree autofocus">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus on shadow host, no delegatesFocus, sibling before">
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree autofocus">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
@@ -145,91 +145,91 @@
<dialog data-description="Autofocus on shadow host, no delegatesFocus, sibling after">
<template class="turn-into-shadow-tree autofocus">
<button disabled>Non-focusable</button>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<button disabled>Non-focusable</button>
</template>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
</dialog>
<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, no siblings">
<template class="turn-into-shadow-tree delegates-focus">
- <button tabindex="-1">Focusable</button>
- <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+ <button>Focusable</button>
+ <button autofocus class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling before">
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree delegates-focus">
- <button tabindex="-1">Focusable</button>
- <button tabindex="-1" autofocus>Focusable</button>
+ <button>Focusable</button>
+ <button autofocus>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling after">
<template class="turn-into-shadow-tree delegates-focus">
- <button tabindex="-1">Focusable</button>
- <button tabindex="-1" autofocus class="focus-me">Focusable</button>
+ <button>Focusable</button>
+ <button autofocus class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
</dialog>
<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, no siblings">
<template class="turn-into-shadow-tree">
- <button tabindex="-1">Focusable</button>
- <button tabindex="-1" autofocus>Focusable</button>
+ <button>Focusable</button>
+ <button autofocus>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling before">
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree">
- <button tabindex="-1">Focusable</button>
- <button tabindex="-1" autofocus>Focusable</button>
+ <button>Focusable</button>
+ <button autofocus>Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>
<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling after">
<template class="turn-into-shadow-tree">
- <button tabindex="-1">Focusable</button>
- <button tabindex="-1" autofocus>Focusable</button>
+ <button>Focusable</button>
+ <button autofocus>Focusable</button>
<button disabled>Non-focusable</button>
</template>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
</dialog>
<dialog data-description="Two shadow trees, both delegatesFocus, first tree doesn't have autofocus element, second does">
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
<template class="turn-into-shadow-tree delegates-focus">
- <button tabindex="-1" autofocus>Focusable</button>
+ <button autofocus>Focusable</button>
</template>
</dialog>
<dialog data-description="No autofocus, no delegatesFocus, slotted target">
<template class="turn-into-shadow-tree">
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
<slot></slot>
- <button tabindex="-1">Focusable</button>
+ <button>Focusable</button>
</template>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button 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>
+ <button>Focusable</button>
</template>
</div>
- <button tabindex="-1" class="focus-me">Focusable</button>
+ <button class="focus-me">Focusable</button>
</dialog>
<script>
@@ -264,12 +264,8 @@
assert_equals(document.activeElement, shadowHost);
assert_equals(shadowHost.shadowRoot.activeElement, expectedFocusInsideShadowTree);
} else {
- // There is no focus delegate. Expected result depends on show() vs. showModal().
- if (method === "show") {
- assert_equals(document.activeElement, focusBetweenTests);
- } else {
- assert_equals(document.activeElement, document.body);
- }
+ // There is no focus delegate. The dialog element should be focused.
+ assert_equals(document.activeElement, dialog);
}
}
}, `${method}: ${dialog.dataset.description}`);
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html b/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html
index 2e8563f..4d1e792 100644
--- a/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html
@@ -14,7 +14,7 @@
input.autofocus = true;
document.body.insertBefore(input, dialog);
await waitUntilStableAutofocusState();
- assert_equals(document.activeElement, document.body,
+ assert_not_equals(document.activeElement, input,
'Non-dialog autofocus processing should be skipped.');
}, 'After showing a dialog, non-dialog autofocus processing won\'t work.');
</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html b/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
index c511631..5edff18 100644
--- a/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
@@ -116,7 +116,7 @@
d6.showModal();
this.add_cleanup(function() { d6.close(); });
assert_true(d6.open);
- assert_equals(document.activeElement, document.body);
+ assert_equals(document.activeElement, d6);
}, "opening dialog without focusable children");
test(function(){
diff --git a/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html b/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html
index 535ac93..7e6112b 100644
--- a/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html
+++ b/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer-ref.html
@@ -1,5 +1,8 @@
<!doctype html>
<style>
+dialog {
+ outline: none;
+}
#non-modal {
position: static;
}
diff --git a/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html b/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html
index efbbab0..e4f4ce5 100644
--- a/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html
+++ b/html/semantics/interactive-elements/the-dialog-element/dont-share-style-to-top-layer.html
@@ -5,6 +5,9 @@
dialog {
position: static;
}
+#modal {
+ outline: none;
+}
</style>
<p>Test that a non-top layer element doesn't share style with a top layer
element. The test passes if you see two boxes.</p>
diff --git a/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html b/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html
index d78051a..0dead33 100644
--- a/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html
+++ b/html/semantics/interactive-elements/the-dialog-element/element-removed-from-top-layer-has-original-position.html
@@ -14,6 +14,7 @@
border: none;
padding: 0;
margin: 0;
+ outline: none;
}
</style>
</head>
diff --git a/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html b/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html
index 98835cb..5ee64fc 100644
--- a/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html
+++ b/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-contain-ancestor.html
@@ -8,6 +8,9 @@
::backdrop {
display: none;
}
+#dialog {
+ outline: none;
+}
</style>
</head>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html b/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html
index fe625f1..2bc294b 100644
--- a/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html
+++ b/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-fo-ancestor.html
@@ -8,6 +8,9 @@
::backdrop {
display: none;
}
+#dialog {
+ outline: none;
+}
</style>
</head>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html b/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html
index 5862744..527d508 100644
--- a/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html
+++ b/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-transformed-ancestor.html
@@ -8,6 +8,9 @@
::backdrop {
display: none;
}
+#dialog {
+ outline: none;
+}
</style>
</head>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html b/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html
index 14f4391..e9db732 100644
--- a/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html
+++ b/html/semantics/interactive-elements/the-dialog-element/fixed-position-child-with-will-change-ancestor.html
@@ -8,6 +8,9 @@
::backdrop {
display: none;
}
+#dialog {
+ outline: none;
+}
</style>
</head>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html b/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html
index 05f4069..61e3dde 100644
--- a/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html
+++ b/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html
@@ -39,12 +39,15 @@
document.querySelector('#text').focus();
label = document.querySelector('label');
+ submit = document.querySelector('#submit');
label.focus();
- assert_equals(document.activeElement, document.querySelector('#submit'),
+ assert_equals(document.activeElement, submit,
'label.focus() should send focus to the target.');
await clickOn(label);
- assert_equals(document.activeElement, document.body,
- 'Clicking the label should be the same as clicking the document body.');
+ assert_not_equals(document.activeElement, label,
+ 'Clicking the label should not focus the label.');
+ assert_not_equals(document.activeElement, submit,
+ 'Clicking the label should not focus the submit input.');
}, 'Tests focusing of an inert label for a non-inert target.');
</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html b/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
index 56f31f3..74379f5 100644
--- a/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
+++ b/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
@@ -7,6 +7,11 @@
<script src="/resources/testharnessreport.js"></script>
</head>
<body id="body" tabindex="1">
+<style>
+dialog {
+ outline: none;
+}
+</style>
<dialog id="top-dialog" tabindex="1" style="width: 100px; top: 30px"><button id="top-dialog-button">I get focus</button></dialog>
<dialog id="bottom-dialog" tabindex="-1" style="width: 100px; bottom: 30px"><button id="bottom-dialog-button">I don't get focus.</button></dialog>
<div id="container">
diff --git a/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html
index a18af0d..55d7132 100644
--- a/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html
+++ b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html
@@ -7,6 +7,7 @@
height: 100px;
width: 100px;
background: green;
+ outline: none;
}
</style>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html
index 86f43e5..96b97f8 100644
--- a/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html
+++ b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-generated-content.html
@@ -11,6 +11,7 @@
height: 100px;
width: 100px;
background: green;
+ outline: none;
}
dialog::before {
diff --git a/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html b/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
index 164b414..6a2ad8c 100644
--- a/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
+++ b/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
@@ -10,10 +10,10 @@
outerButton = document.getElementById('outer-button');
assert_equals(document.activeElement, outerButton);
- // Test that focus goes to body if the dialog has no focusable elements, including itself
+ // Test that focus goes to the dialog if the dialog has no focusable elements
var outerDialog = document.getElementById('outer-dialog');
outerDialog.showModal();
- assert_equals(document.activeElement, document.body);
+ assert_equals(document.activeElement, outerDialog);
// Test that an autofocus element in the dialog gets focus.
var dialog = document.getElementById('dialog');
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html
index 10f6c69..0886c2c 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-containing-block.html
@@ -14,7 +14,7 @@
This tests that a modal dialog's containing block is in the initial containing block and that it is unaffected by
ancestor elements with overflow or opacity.
<div style="position: absolute; top: 400px; opacity: 0.3">
- <dialog id="opaqueDialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta">
+ <dialog id="opaqueDialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta; outline: none">
This dialog should be unaffected by its ancestor with opacity.
</dialog>
</div>
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html
index 5257823e..ba790c1 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html
@@ -7,6 +7,7 @@
dialog {
height: 150px;
width: 150px;
+ outline: none;
}
::backdrop {
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html
index 6397584..9e0616e 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html
@@ -7,6 +7,7 @@
dialog {
height: 150px;
width: 150px;
+ outline: none;
}
::backdrop {
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html
index 9a621e7..6e3c52a 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-clip.html
@@ -15,6 +15,7 @@
dialog::backdrop,
dialog {
background: green;
+ outline: none;
}
</style>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html
index 020d90a..589d539 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-filter.html
@@ -16,6 +16,7 @@
dialog {
background: green;
position: absolute;
+ outline: none;
}
</style>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html
index daa5ccb..8ba3ed4 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-mask.html
@@ -16,6 +16,7 @@
dialog::backdrop,
dialog {
background: green;
+ outline: none;
}
</style>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html
index 82aa09d..46c5de2 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html
@@ -16,6 +16,7 @@
dialog::backdrop,
dialog {
background: green;
+ outline: none;
}
</style>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html
index 8658725..d805954 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-clip.html
@@ -21,6 +21,7 @@
dialog {
background: green;
position: absolute;
+ outline: none;
}
</style>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html
index afcde73..f5389dd 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-hidden.html
@@ -20,6 +20,7 @@
dialog::backdrop,
dialog {
background: green;
+ outline: none;
}
</style>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html
index dd04c2e..a230def 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-overflow-scroll.html
@@ -21,6 +21,7 @@
dialog {
background: green;
position: absolute;
+ outline: none;
}
</style>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html
index cf35a71..ac6f3cf 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-transform.html
@@ -15,6 +15,7 @@
dialog::backdrop,
dialog {
background: green;
+ outline: none;
}
</style>
<body>
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html
index 3b3e336..4fdd288 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html
@@ -8,6 +8,7 @@
dialog {
height: 100px;
width: 100px;
+ outline: none;
}
::backdrop {
diff --git a/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html b/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html
index 8ab7068..ebccdc6 100644
--- a/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html
+++ b/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic.html
@@ -8,6 +8,7 @@
dialog {
height: 150px;
width: 150px;
+ outline: none;
}
::backdrop {
