156 lines
6.2 KiB
HTML
156 lines
6.2 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<script src="../resources/js-test-pre.js"></script>
|
|
<script src="../resources/accessibility-helper.js"></script>
|
|
</head>
|
|
|
|
<body id="body">
|
|
|
|
<div id="background">
|
|
<p id="backgroundContent">Other page content with <a href="#">a dummy focusable element</a></p>
|
|
<p><a onclick="toggleDialog('show'); return false;" href="#" role="button" id="displayButton">Display a dialog</a></p>
|
|
</div>
|
|
|
|
<div id="dialogParent" role="group">
|
|
<div role="dialog" aria-modal="true" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1">
|
|
<h3 id="myDialog">Just an example.</h3>
|
|
<button id="ok" onclick="toggleDialog('hide');" class="close-button">OK</button>
|
|
<button onclick="toggleDialog('hide');" class="close-button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
description("This tests that aria-modal on dialog makes other elements inert.");
|
|
|
|
if (window.accessibilityController) {
|
|
window.jsTestIsAsync = true;
|
|
|
|
// Background should be unaccessible after loading, since the
|
|
// dialog is displayed and aria-modal=true.
|
|
debug("Dialog is displaying");
|
|
shouldBeFalse("backgroundAccessible()");
|
|
|
|
// Close the dialog, background should be accessible.
|
|
document.getElementById("ok").click();
|
|
setTimeout(async function() {
|
|
await waitFor(() => {
|
|
return backgroundAccessible();
|
|
});
|
|
debug("Dialog is not displaying");
|
|
shouldBeTrue("backgroundAccessible()");
|
|
|
|
// Click the display button, dialog shows and background becomes unaccessible.
|
|
document.getElementById("displayButton").click();
|
|
await waitFor(() => {
|
|
return !backgroundAccessible();
|
|
});
|
|
debug("Dialog is displaying")
|
|
shouldBeFalse("backgroundAccessible()");
|
|
window.okButton = accessibilityController.accessibleElementById("ok");
|
|
shouldBeFalse("okButton.isIgnored");
|
|
|
|
// Test the case that aria-modal=true when dialog is not displaying won't affect other objects.
|
|
document.getElementById("ok").click();
|
|
document.getElementById("box").setAttribute("aria-modal", "true");
|
|
await waitFor(() => {
|
|
return backgroundAccessible();
|
|
});
|
|
debug("Dialog is not displaying and aria-modal=true");
|
|
shouldBeTrue("backgroundAccessible()");
|
|
|
|
// With the dialog displaying, test that aria-hidden and the opacity also determine whether the background is accessible or not.
|
|
document.getElementById("displayButton").click();
|
|
await waitFor(() => {
|
|
return !backgroundAccessible();
|
|
});
|
|
debug("Dialog is displaying")
|
|
shouldBeFalse("backgroundAccessible()");
|
|
|
|
// Dialog is aria hidden
|
|
document.getElementById("box").setAttribute("aria-hidden", "true");
|
|
await waitFor(() => {
|
|
return backgroundAccessible();
|
|
});
|
|
debug("Dialog is displaying and aria-hidden=true")
|
|
shouldBeTrue("backgroundAccessible()");
|
|
|
|
// Set aria-hidden=false.
|
|
document.getElementById("box").setAttribute("aria-hidden", "false");
|
|
await waitFor(() => {
|
|
return !backgroundAccessible();
|
|
});
|
|
debug("Dialog is displaying and aria-hidden=false");
|
|
shouldBeFalse("backgroundAccessible()");
|
|
|
|
// Set opacity to 0 which should make the dialog invisible.
|
|
document.getElementById("box").style.opacity = 0;
|
|
await waitFor(() => {
|
|
return backgroundAccessible();
|
|
});
|
|
debug("Dialog is not displaying with opacity 0");
|
|
shouldBeTrue("backgroundAccessible()");
|
|
|
|
// Set opacity to 1 which should make the dialog visible again.
|
|
document.getElementById("box").style.opacity = 1;
|
|
await waitFor(() => {
|
|
return !backgroundAccessible();
|
|
});
|
|
debug("Dialog is displaying with opacity 1");
|
|
shouldBeFalse("backgroundAccessible()");
|
|
|
|
// Set opacity of the dialog parent to 0 which should make the dialog invisible since opacity multiply.
|
|
document.getElementById("dialogParent").style.opacity = 0;
|
|
await waitFor(() => {
|
|
return backgroundAccessible();
|
|
});
|
|
debug("Dialog is not displaying with parent opacity 0");
|
|
shouldBeTrue("backgroundAccessible()");
|
|
|
|
// Set opacity of the dialog parent to .5 which should make the dialog visible again.
|
|
document.getElementById("dialogParent").style.opacity = .5;
|
|
await waitFor(() => {
|
|
return !backgroundAccessible();
|
|
});
|
|
debug("Dialog is displaying with parent opacity .5");
|
|
shouldBeFalse("backgroundAccessible()");
|
|
|
|
// Test modal dialog is removed from DOM tree.
|
|
var dialog = document.getElementById("box");
|
|
dialog.parentNode.removeChild(dialog);
|
|
await waitFor(() => {
|
|
return backgroundAccessible();
|
|
});
|
|
debug("Dialog is removed from DOM");
|
|
shouldBeTrue("backgroundAccessible()");
|
|
|
|
finishJSTest();
|
|
}, 0);
|
|
}
|
|
|
|
function backgroundAccessible() {
|
|
var displayButton = accessibilityController.accessibleElementById("displayButton");
|
|
var backgroundContent = accessibilityController.accessibleElementById("backgroundContent");
|
|
|
|
if (!displayButton || !backgroundContent)
|
|
return false;
|
|
|
|
return !displayButton.isIgnored && !backgroundContent.isIgnored;
|
|
}
|
|
|
|
function toggleDialog(sh) {
|
|
dialog = document.getElementById("box");
|
|
if (sh == "show") {
|
|
// show the dialog
|
|
dialog.style.display = 'block';
|
|
dialog.setAttribute("aria-modal", "true");
|
|
} else {
|
|
dialog.style.display = 'none';
|
|
dialog.setAttribute("aria-modal", "false");
|
|
}
|
|
}
|
|
</script>
|
|
<script src="../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|