blob: 282aae4fb21693516ba1027bd9f9b9d6c22de60a [file] [log] [blame]
n_wang@apple.com79737422015-11-03 01:52:38 +00001<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2<html>
3<head>
4<script src="../resources/js-test-pre.js"></script>
5</head>
6
7<style>
8.box-hidden {
9 display: none;
10}
11</style>
12
13<body id="body">
14
15<div id="bg">
16<p id="bgContent">Other page content with <a href="#">a dummy focusable element</a></p>
17<p><a onclick="toggleDialog(document.getElementById('box'),'show'); return false;" href="#" role="button" id="displayBtn">Display a dialog</a></p>
18</div>
19
20<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1">
21 <h3 id="myDialog">Just an example.</h3>
22 <button id="ok" onclick="toggleDialog(document.getElementById('box'),'hide');" class="close-button">OK</button>
23 <button onclick="toggleDialog(document.getElementById('box2'),'show');" id="new">New</button>
24</div>
25
26<div role="dialog" aria-labelledby="myDialog2" id="box2" class="box-hidden" tabindex="-1">
27 <h3 id="myDialog2">Another dialog.</h3>
28 <button id="close" onclick="toggleDialog(document.getElementById('box2'),'hide');" class="close-button">Close</button>
29</div>
30
31
32<script>
33
34 description("This tests that aria-modal works correctly on multiple dialogs");
35
36 if (window.accessibilityController) {
37 // Background should be accessible after loading.
38 shouldBeTrue("backgroundAccessible()");
39
40 // Click the display button, dialog1 shows and background becomes unaccessible.
41 document.getElementById("displayBtn").click();
42 shouldBeFalse("backgroundAccessible()");
43 shouldBeTrue("dialog1Accessible()");
44
45 // Click the new button, dialog2 shows and background/dialog1 should both be unaccessible.
46 document.getElementById("new").click();
47 shouldBeFalse("backgroundAccessible()");
48 shouldBeFalse("dialog1Accessible()");
49 var closeBtn = accessibilityController.accessibleElementById("close");
50 shouldBeFalse("closeBtn.isIgnored");
51
52 // Close dialog2, dialog1 should become accessible but not the background
53 document.getElementById("close").click();
54 shouldBeFalse("backgroundAccessible()");
55 shouldBeTrue("dialog1Accessible()");
56
57 // Close dialog1, background should be accessible.
58 document.getElementById("ok").click();
59 shouldBeTrue("backgroundAccessible()");
60 }
61
62 function backgroundAccessible() {
63 var displayBtn = accessibilityController.accessibleElementById("displayBtn");
64 var bgContent = accessibilityController.accessibleElementById("bgContent");
65 if (!displayBtn || !bgContent)
66 return false;
67 return !displayBtn.isIgnored && !bgContent.isIgnored;
68 }
69
70 function dialog1Accessible() {
71 var okBtn = accessibilityController.accessibleElementById("ok");
72 var newBtn = accessibilityController.accessibleElementById("new");
73 if (!okBtn || !newBtn)
74 return false;
75 return !okBtn.isIgnored && !newBtn.isIgnored;
76 }
77
78 function toggleDialog(dialog, sh) {
79 if (sh == "show") {
80 // show the dialog
81 dialog.style.display = 'block';
82 dialog.setAttribute("aria-modal", "true");
83 } else {
84 dialog.style.display = 'none';
85 dialog.setAttribute("aria-modal", "false");
86 }
87}
88
89</script>
90
91
92<script src="../resources/js-test-post.js"></script>
93</body>
94</html>