Skip to content
Permalink
Browse files
Make accessibility/mac/aria-modal-auto-focus.html async so it can pas…
…s in isolated tree mode

https://bugs.webkit.org/show_bug.cgi?id=240676

Reviewed by Chris Fleizach.

* LayoutTests/accessibility/mac/aria-modal-auto-focus-expected.txt:
* LayoutTests/accessibility/mac/aria-modal-auto-focus.html:

Canonical link: https://commits.webkit.org/250806@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@294559 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
twilco committed May 20, 2022
1 parent c8887c5 commit 618d3e493d2bd0958cdc171836c0b52c0ac8b1da
Showing 2 changed files with 70 additions and 59 deletions.
@@ -1,19 +1,23 @@
This tests that focus will automatically move to aria-modal dialogs

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS: Background is initially accessible.

Opening dialog1.
PASS: #new button is focused.

Opening dialog2.
PASS: #close button is focused.

Closing dialog2 and making dialog1 `ariaModal = true`.
PASS: #ok button is focused.

PASS backgroundAccessible() is true
PASS newBtn.isFocused is true
PASS closeBtn.isFocused is true
PASS okBtn.isFocused is true
PASS successfullyParsed is true

TEST COMPLETE
Other page content with a dummy focusable element

Display a dialog

Just an example.
Dialog1 heading

OK New
@@ -1,78 +1,90 @@
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<script src="../../resources/accessibility-helper.js"></script>
<script src="../../resources/js-test.js"></script>
</head>

<style>
.box-hidden {
display: none;
}
.hidden { display: none; }
</style>

<body id="body">
<body>

<div id="bg">
<p id="bgContent">Other page content with <a href="#">a dummy focusable element</a></p>
<p><a onclick="toggleDialog(document.getElementById('box'),'show'); document.getElementById('new').focus(); return false;" href="#" role="button" id="displayBtn">Display a dialog</a></p>
<p id="bgContent">Other page content with <a href="#">a dummy focusable element</a></p>
<p>
<a onclick="toggleDialog(document.getElementById('dialog1'), 'show'); document.getElementById('new').focus(); return false;"
href="#" role="button" id="displayBtn">
Display a dialog
</a>
</p>
</div>

<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1" aria-modal="false">
<h3 id="myDialog">Just an example.</h3>
<button id="ok" onclick="toggleDialog(document.getElementById('box'),'hide');" class="close-button">OK</button>
<button onclick="toggleDialog(document.getElementById('box2'),'show');" id="new">New</button>
<div role="dialog" aria-labelledby="dialog1-heading" id="dialog1" class="hidden" tabindex="-1" aria-modal="false">
<h3 id="dialog1-heading">Dialog1 heading</h3>
<button id="ok" onclick="toggleDialog(document.getElementById('dialog1'), 'hide');" class="close-button">OK</button>
<button onclick="toggleDialog(document.getElementById('dialog2'), 'show');" id="new">New</button>
</div>

<div role="dialog" aria-labelledby="myDialog2" id="box2" class="box-hidden" tabindex="-1">
<h3 id="myDialog2">Another dialog.</h3>
<button id="close" onclick="toggleDialog(document.getElementById('box2'),'hide');" class="close-button">Close</button>
<div role="dialog" aria-labelledby="dialog2-heading" id="dialog2" class="hidden" tabindex="-1">
<h3 id="dialog2-heading">Dialog2 heading</h3>
<button id="close" onclick="toggleDialog(document.getElementById('dialog2'), 'hide');" class="close-button">Close</button>
</div>


<script>

description("This tests that focus will automatically move to aria-modal dialogs");
var testOutput = "This tests that focus will automatically move to aria-modal dialogs\n\n";

if (window.accessibilityController) {
window.jsTestIsAsync = true;

shouldBeTrue("backgroundAccessible()");
var newBtn;
var okBtn;
var closeBtn;

if (backgroundAccessible())
testOutput += `PASS: Background is initially accessible.\n`;
else
testOutput += `FAIL: Background is not initially accessible.\n`;

var newBtn, okBtn, closeBtn;
// 1. Click the display button, dialog1 shows and focus shouldn't move since we have
// javascript code to focus on the "new" button.
testOutput += "\nOpening dialog1.\n";
document.getElementById("displayBtn").click();
newBtn = accessibilityController.accessibleElementById("new");
setTimeout(function(){
shouldBeTrue("newBtn.isFocused");

setTimeout(async () => {
await waitFor(() => {
newBtn = accessibilityController.accessibleElementById("new");
return newBtn && newBtn.isFocused;
});
testOutput += "PASS: #new button is focused.\n";

// 2. Click the new button, dialog2 shows and focus should move to the close button.
// Set aria-modal to false on the previous modal object (we shouldn't have two modals in play).
testOutput += "\nOpening dialog2.\n";
document.getElementById("new").click();
document.getElementById("box").ariaModal = false;
setTimeout(function(){
document.getElementById("dialog1").ariaModal = false;

await waitFor(() => {
closeBtn = accessibilityController.accessibleElementById("close");
shouldBeTrue("closeBtn.isFocused");

// 3. Click the close button, dialog2 closes and focus should go back to the
// first focusable child of dialog1, which we now need to add aria-modal back to.
document.getElementById("close").click();
document.getElementById("box").ariaModal = true;
setTimeout(function(){
okBtn = accessibilityController.accessibleElementById("ok");
shouldBeTrue("okBtn.isFocused");
finishJSTest();
}, 100);
}, 100);
}, 100);
return closeBtn && closeBtn.isFocused;
});
testOutput += "PASS: #close button is focused.\n";

// 3. Click the close button, dialog2 closes and focus should go back to the
// first focusable child of dialog1, which we now need to add aria-modal back to.
testOutput += "\nClosing dialog2 and making dialog1 `ariaModal = true`.\n";
document.getElementById("close").click();
document.getElementById("dialog1").ariaModal = true;

await waitFor(() => {
okBtn = accessibilityController.accessibleElementById("ok");
return okBtn && okBtn.isFocused;
});
testOutput += "PASS: #ok button is focused.\n";

debug(testOutput);
finishJSTest();
});
}

function backgroundAccessible() {
var displayBtn = accessibilityController.accessibleElementById("displayBtn");
var bgContent = accessibilityController.accessibleElementById("bgContent");

const displayBtn = accessibilityController.accessibleElementById("displayBtn");
const bgContent = accessibilityController.accessibleElementById("bgContent");
if (!displayBtn || !bgContent)
return false;

@@ -81,18 +93,13 @@ <h3 id="myDialog2">Another dialog.</h3>

function toggleDialog(dialog, sh) {
if (sh == "show") {
// show the dialog
dialog.style.display = 'block';
dialog.style.display = "block";
dialog.setAttribute("aria-modal", "true");
} else {
dialog.style.display = 'none';
dialog.style.display = "none";
dialog.setAttribute("aria-modal", "false");
}
}

</script>


<script src="../../resources/js-test-post.js"></script>
</body>
</html>

0 comments on commit 618d3e4

Please sign in to comment.