Title: [294559] trunk/LayoutTests/accessibility/mac
- Revision
- 294559
- Author
- tyle...@apple.com
- Date
- 2022-05-20 10:33:20 -0700 (Fri, 20 May 2022)
Log Message
Make accessibility/mac/aria-modal-auto-focus.html async so it can pass 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
Modified Paths
Diff
Modified: trunk/LayoutTests/accessibility/mac/aria-modal-auto-focus-expected.txt (294558 => 294559)
--- trunk/LayoutTests/accessibility/mac/aria-modal-auto-focus-expected.txt 2022-05-20 17:26:36 UTC (rev 294558)
+++ trunk/LayoutTests/accessibility/mac/aria-modal-auto-focus-expected.txt 2022-05-20 17:33:20 UTC (rev 294559)
@@ -1,12 +1,16 @@
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.
-PASS backgroundAccessible() is true
-PASS newBtn.isFocused is true
-PASS closeBtn.isFocused is true
-PASS okBtn.isFocused is true
+Opening dialog2.
+PASS: #close button is focused.
+
+Closing dialog2 and making dialog1 `ariaModal = true`.
+PASS: #ok button is focused.
+
PASS successfullyParsed is true
TEST COMPLETE
@@ -14,6 +18,6 @@
Display a dialog
-Just an example.
+Dialog1 heading
OK New
Modified: trunk/LayoutTests/accessibility/mac/aria-modal-auto-focus.html (294558 => 294559)
--- trunk/LayoutTests/accessibility/mac/aria-modal-auto-focus.html 2022-05-20 17:26:36 UTC (rev 294558)
+++ trunk/LayoutTests/accessibility/mac/aria-modal-auto-focus.html 2022-05-20 17:33:20 UTC (rev 294559)
@@ -1,78 +1,90 @@
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
-<script src=""
+<script src=""
+<script src=""
</head>
-
<style>
-.box-hidden {
- display: none;
-}
+.hidden { display: none; }
</style>
+<body>
-<body id="body">
-
<div id="bg">
-<p id="bgContent">Other page content with <a href="" 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="" 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>
+ var testOutput = "This tests that focus will automatically move to aria-modal dialogs\n\n";
- description("This tests that focus will automatically move to aria-modal dialogs");
-
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 @@
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=""
</body>
</html>
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
