<!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>