menu-roles.html (2828B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Menu-related Role Verification Tests</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 <style> 13 /* Typically horizontal */ 14 [role="menubar"] { 15 display: flex; 16 } 17 </style> 18 <body> 19 20 <p>Tests <a href="https://w3c.github.io/aria/#menu">menu</a> and related roles.</p> 21 22 <div role="menu" data-testname="role is menu" data-expectedrole="menu" class="ex"> 23 <div role="menuitem" data-testname="role is menuitem (in menu)" data-expectedrole="menuitem" class="ex">x</div> 24 <div role="menuitem">x</div> 25 <div role="menuitem">x</div> 26 <div role="group" data-testname="role is group (in menu)" data-expectedrole="group" class="ex"> 27 <div role="menuitem" data-testname="role is menuitem (in group, in menu)" data-expectedrole="menuitem" class="ex">x</div> 28 <div role="menuitem">x</div> 29 </div> 30 <div role="group"> 31 <div role="menuitemradio" aria-checked="true" data-testname="role is menuitemradio (in group, in menu)" data-expectedrole="menuitemradio" class="ex">x</div> 32 <div role="menuitemradio">x</div> 33 </div> 34 <div role="group"> 35 <div role="menuitemcheckbox" aria-checked="true" data-testname="role is menuitemcheckbox (in group, in menu)" data-expectedrole="menuitemcheckbox" class="ex">x</div> 36 <div role="menuitemcheckbox">x</div> 37 </div> 38 </div> 39 40 <div role="menubar" data-testname="role is menubar" data-expectedrole="menubar" class="ex"> 41 <div role="menuitem" data-testname="role is menuitem (in menubar)" data-expectedrole="menuitem" class="ex">x</div> 42 <div role="menuitem">x</div> 43 <div role="menuitem">x</div> 44 <div role="group" data-testname="role is group (in menubar)" data-expectedrole="group" class="ex"> 45 <div role="menuitem" data-testname="role is menuitem (in group, in menubar)" data-expectedrole="menuitem" class="ex">x</div> 46 <div role="menuitem">x</div> 47 </div> 48 <div role="group"> 49 <div role="menuitemradio" aria-checked="true" data-testname="role is menuitemradio (in group, in menubar)" data-expectedrole="menuitemradio" class="ex">x</div> 50 <div role="menuitemradio">x</div> 51 </div> 52 <div role="group"> 53 <div role="menuitemcheckbox" aria-checked="true" data-testname="role is menuitemcheckbox (in group, in menubar)" data-expectedrole="menuitemcheckbox" class="ex">x</div> 54 <div role="menuitemcheckbox">x</div> 55 </div> 56 </div> 57 58 <script> 59 AriaUtils.verifyRolesBySelector(".ex"); 60 </script> 61 62 </body> 63 </html>