testcase-listbox-multiselectable-C.html (2319B)
1 <!DOCTYPE html> 2 <html><head> 3 <title>ARIA 1.0 Test Case: Listbox role with multiseclect</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <style> 6 [aria-selected="true"] { font-weight: bold; } 7 </style> 8 </head> 9 <body> 10 <h1>ARIA 1.0 Test Case: Listbox role with multiseclect</h1> 11 12 <div role="listbox" aria-multiselectable="true"> 13 <div role="option">Option 1</div> 14 <div role="option" aria-selected="false" tabindex="-1">Option 2 (test for selected)</div> 15 <div role="option" aria-selected="false" id="ID_TARGET" tabindex="0">Option 3 (test for selected)</div> 16 <div role="option">Option 4</div> 17 </div> 18 <p><button onclick="toggleSelectedState();">Toggle Option 3 Selected State</button> 19 20 <h2>Description</h2> 21 <p>A DIV element with role role "listbox" has an aria-multiselect attribute set to "true". 22 Two of the four child "div" elements with the role "option" have the "aria-selected" attribute set 23 to "true".</p> 24 25 <h2>Accessibility API Mappings</h2> 26 27 <h3>MSAA + UIA Express</h3> 28 <p>Expose <code>STATE_SYSTEM_SELECTED</code>; Expose <code>STATE_SYSTEM_SELECTABLE</code></p> 29 30 <h3>MSAA + IAccessible2</h3> 31 <p>Expose STATE_SYSTEM_SELECTED and STATE_SYSTEM_SELECTABLE for each of the elements with role option</p> 32 33 <h3>UIA</h3> 34 <p>Expose IsSelected property in SelectionItem Control Pattern. The availability of the SelectionItem Control Pattern indicates the item is selectable.</p> 35 36 <h3>ATK/AT-SPI</h3> 37 <p>Expose STATE_SELECTED on each of the elements with role option.</p> 38 39 <h3>AXAPI</h3> 40 <p>AXSelected:Yes on option 2 and 3 and AXSelected:No on option 1 and 4</p> 41 42 <script> 43 /* 44 function setSelection() { 45 var node = document.getElementById('ID_TARGET'); 46 node.setAttribute("aria-selected","true"); 47 } 48 49 window.addEventListener('load', setSelection); 50 */ 51 function toggleSelectedState() { 52 var el = document.getElementById('ID_TARGET'); 53 if (el.getAttribute('aria-selected') == 'true') 54 el.setAttribute('aria-selected', 'false'); 55 else 56 el.setAttribute('aria-selected', 'true'); 57 } 58 59 </script> 60 61 62 63 64 </body></html>