Skip to content

Commit

Permalink
Expand and change dialog focus delegation tests
Browse files Browse the repository at this point in the history 
Follows whatwg/html#7361.
  • Loading branch information
@domenic
domenic authored Jan 31, 2022
1 parent bda20d8 commit 4b4b82f
Show file tree
Hide file tree
Showing 2 changed files with 185 additions and 16 deletions.
4 changes: 2 additions & 2 deletions ...t/dialog-focus-shadow-delegatesfocus.html → ...nt/dialog-focus-shadow-double-nested.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>dialog focusing delegation with autofocus plus delegatesFocus inside the dialog</title>
<title>dialog focusing delegation: with two nested shadow trees</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>

<dialog>
<template class="turn-into-shadow-tree">
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
<template class="turn-into-shadow-tree delegates-focus">
<button tabindex="-1">Focusable</button>
Expand Down
197 changes: 183 additions & 14 deletions html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,224 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>dialog focus delegation</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>

<dialog data-description="When autofocus is not present, the first focusable shadow-including descendant must be focused">
<!--
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>

<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 disabled>Non-focusable</button>
</template>
</dialog>

<dialog data-description="No autofocus, no delegatesFocus, sibling before">
<button tabindex="-1" class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>

<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 disabled>Non-focusable</button>
</template>
<button tabindex="-1" 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 disabled>Non-focusable</button>
</template>
</dialog>

<dialog data-description="autofocus outside a shadow tree must take precedence over earlier in-shadow-tree focusable elements">
<button disabled>Non-focusable</button>
<dialog data-description="No autofocus, yes delegatesFocus, sibling before">
<button tabindex="-1" class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree delegates-focus">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>

<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 disabled>Non-focusable</button>
</template>
<button tabindex="-1">Focusable</button>
</dialog>

<dialog data-description="Autofocus before, no delegatesFocus">
<button tabindex="-1" autofocus class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1" autofocus>Focusable</button>
</dialog>

<dialog data-description="autofocus inside a shadow tree must be ignored: no focusable elements outside the shadow tree">
<dialog data-description="Autofocus before, yes delegatesFocus">
<button tabindex="-1" 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 disabled>Non-focusable</button>
</template>
</dialog>

<dialog data-description="Autofocus after, no delegatesFocus">
<template class="turn-into-shadow-tree">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1" 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 disabled>Non-focusable</button>
</template>
<button tabindex="-1" 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 tabindex="-1" autofocus>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>
<template class="turn-into-shadow-tree delegates-focus autofocus">
<button disabled>Non-focusable</button>
<button tabindex="-1" class="focus-me">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>

<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 disabled>Non-focusable</button>
</template>
<button tabindex="-1">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 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>
<template class="turn-into-shadow-tree autofocus">
<button disabled>Non-focusable</button>
<button tabindex="-1">Focusable</button>
<button disabled>Non-focusable</button>
</template>
</dialog>

<dialog data-description="autofocus inside a shadow tree must be ignored: focusable element before the shadow tree">
<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 disabled>Non-focusable</button>
</template>
<button tabindex="-1" class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree">
</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 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>
<template class="turn-into-shadow-tree delegates-focus">
<button tabindex="-1">Focusable</button>
<button tabindex="-1" 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>Focusable</button>
<button disabled>Non-focusable</button>
</template>
<button tabindex="-1" class="focus-me">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 disabled>Non-focusable</button>
</template>
</dialog>

<dialog data-description="autofocus inside a shadow tree must be ignored: focusable element after the shadow tree">
<dialog data-description="Autofocus inside shadow tree, no delegatesFocus, sibling before">
<button tabindex="-1" class="focus-me">Focusable</button>
<template class="turn-into-shadow-tree">
<button tabindex="-1">Focusable</button>
<button tabindex="-1" 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 disabled>Non-focusable</button>
</template>
<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");
div.attachShadow({ mode: "open" });
div.attachShadow({ mode: "open", delegatesFocus: template.classList.contains("delegates-focus") });
div.autofocus = template.classList.contains("autofocus");
div.shadowRoot.append(template.content);
template.replaceWith(div);
}

const focusBetweenTests = document.querySelector("#focus-between-tests");

for (const dialog of document.querySelectorAll("dialog")) {
for (const method of ["show", "showModal"]) {
test(t => {
focusBetweenTests.focus();

dialog[method]();
t.add_cleanup(() => dialog.close());

Expand All @@ -66,10 +228,17 @@
} else {
const shadowHost = dialog.querySelector("div");
const expectedFocusInsideShadowTree = shadowHost.shadowRoot.querySelector(".focus-me");
assert_not_equals(expectedFocusInsideShadowTree, "Precondition check: the test was set up to expect a focused element, either outside the shadow tree or inside");

assert_equals(document.activeElement, shadowHost);
assert_equals(shadowHost.shadowRoot.activeElement, expectedFocusInsideShadowTree);
if (expectedFocusInsideShadowTree) {
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);
}
}
}
}, `${method}: ${dialog.dataset.description}`);
}
Expand Down

0 comments on commit 4b4b82f

Please sign in to comment.