5d5b5c3d388ec65971c27e404de534aa8f0fef4e
[WebKit-https.git] / LayoutTests / accessibility / mac / aria-modal-auto-focus.html
1 <!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'); document.getElementById('new').focus(); 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" aria-modal="false">
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 focus will automatically move to aria-modal dialogs");
35
36     if (window.accessibilityController) {
37         window.jsTestIsAsync = true;
38
39         shouldBeTrue("backgroundAccessible()");
40         var newBtn;
41         var okBtn;
42         var closeBtn;
43         
44         // 1. Click the display button, dialog1 shows and focus shouldn't move since we have
45         // javascript code to focus on the "new" button.
46         document.getElementById("displayBtn").click();
47         newBtn = accessibilityController.accessibleElementById("new");
48         setTimeout(function(){ 
49             shouldBeTrue("newBtn.isFocused");
50             
51             // 2. Click the new button, dialog2 shows and focus should move to the close button.
52             document.getElementById("new").click();
53             closeBtn = accessibilityController.accessibleElementById("close");
54             setTimeout(function(){ 
55                 shouldBeTrue("closeBtn.isFocused");
56                 
57                 // 3. Click the close button, dialog2 closes and focus should go back to the
58                 // first focusable child of dialog1.
59                 document.getElementById("close").click();
60                 okBtn = accessibilityController.accessibleElementById("ok");
61                 setTimeout(function(){
62                     shouldBeTrue("okBtn.isFocused");
63                     finishJSTest();
64                 }, 50);
65             }, 50);
66         }, 50);
67     }
68     
69     function backgroundAccessible() {
70         var displayBtn = accessibilityController.accessibleElementById("displayBtn");
71         var bgContent = accessibilityController.accessibleElementById("bgContent");
72         
73         if (!displayBtn || !bgContent)
74             return false;
75         
76         return !displayBtn.isIgnored && !bgContent.isIgnored;
77     }
78     
79     function toggleDialog(dialog, sh) {
80         if (sh == "show") {
81             // show the dialog 
82             dialog.style.display = 'block';
83             dialog.setAttribute("aria-modal", "true");
84         } else {
85             dialog.style.display = 'none';
86             dialog.setAttribute("aria-modal", "false"); 
87         }
88     }
89
90 </script>
91
92
93 <script src="../../resources/js-test-post.js"></script>
94 </body>
95 </html>