summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/conformance-checkers/html-aria/testcases-multiselectable/testcase-multiselectable-D.html
blob: cc13b5cfe01625ee5f35f3d0c19b57d802ec92dd (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html><head>
    <title>ARIA 1.0 Test Case: Listbox role with multiseclect</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      div[aria-selected="true"] {color:white;background-color:black;}
    </style>
  </head>
  <body>
    <h1>ARIA 1.0 Test Case: Listbox role with multiseclect</h1>
        
    <div role="listbox" aria-label="charlotte" aria-multiselectable="true">
      <div role="option" aria-selected="false" id="ID1" tabindex="-1" onclick="handle1(event)">Option 1 (test for click elected)</div> 
      <div role="option" aria-selected="false" id="ID2" tabindex="-1">Option 2</div>
      <div role="option" aria-selected="false" id="ID3" onmousedown="handle2(event)">Option 3 (test for shift click selected)</div> 
    </div>
    
    <script type="text/javascript">  
     function handle1(e) {
        var node=document.getElementById('ID1');
        node.focus();
        e.stopPropagation();
        return false;
     }
     function handle2(e) {
        shiftpressed=0;
        shiftpressed=e.shiftKey;
        if (shiftpressed){
           var node=document.getElementById('ID1');
           node.setAttribute("aria-selected", "true");
           node=document.getElementById('ID2');
           node.setAttribute("aria-selected", "true");
           node=document.getElementById('ID3');
           node.setAttribute("aria-selected", "true");
        }
        e.stopPropagation();
        return false;
     }
    </script>

</body></html>