Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /wai-aria/role/menu-roles.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<title>Menu-related Role Verification Tests</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/wai-aria/scripts/aria-utils.js"></script>
</head>
<style>
/* Typically horizontal */
[role="menubar"] {
display: flex;
}
</style>
<body>
<div role="menu" data-testname="role is menu" data-expectedrole="menu" class="ex">
<div role="menuitem" data-testname="role is menuitem (in menu)" data-expectedrole="menuitem" class="ex">x</div>
<div role="menuitem">x</div>
<div role="menuitem">x</div>
<div role="group" data-testname="role is group (in menu)" data-expectedrole="group" class="ex">
<div role="menuitem" data-testname="role is menuitem (in group, in menu)" data-expectedrole="menuitem" class="ex">x</div>
<div role="menuitem">x</div>
</div>
<div role="group">
<div role="menuitemradio" aria-checked="true" data-testname="role is menuitemradio (in group, in menu)" data-expectedrole="menuitemradio" class="ex">x</div>
<div role="menuitemradio">x</div>
</div>
<div role="group">
<div role="menuitemcheckbox" aria-checked="true" data-testname="role is menuitemcheckbox (in group, in menu)" data-expectedrole="menuitemcheckbox" class="ex">x</div>
<div role="menuitemcheckbox">x</div>
</div>
</div>
<div role="menubar" data-testname="role is menubar" data-expectedrole="menubar" class="ex">
<div role="menuitem" data-testname="role is menuitem (in menubar)" data-expectedrole="menuitem" class="ex">x</div>
<div role="menuitem">x</div>
<div role="menuitem">x</div>
<div role="group" data-testname="role is group (in menubar)" data-expectedrole="group" class="ex">
<div role="menuitem" data-testname="role is menuitem (in group, in menubar)" data-expectedrole="menuitem" class="ex">x</div>
<div role="menuitem">x</div>
</div>
<div role="group">
<div role="menuitemradio" aria-checked="true" data-testname="role is menuitemradio (in group, in menubar)" data-expectedrole="menuitemradio" class="ex">x</div>
<div role="menuitemradio">x</div>
</div>
<div role="group">
<div role="menuitemcheckbox" aria-checked="true" data-testname="role is menuitemcheckbox (in group, in menubar)" data-expectedrole="menuitemcheckbox" class="ex">x</div>
<div role="menuitemcheckbox">x</div>
</div>
</div>
<!--
CORE-AAM requires that, for elements with roles not contained in the
required context, user agents must ignore the role token and return the
computed role as if the ignored role token had not been included.
-->
<nav role="menuitem" data-testname="orphaned menuitem outside the context of menu/menubar" data-expectedrole="navigation"
class="ex">x
</nav>
<nav role="menuitemradio" data-testname="orphaned menuitemradio outside the context of menu/menubar" data-expectedrole="navigation"
class="ex">x
</nav>
<nav role="menuitemcheckbox" data-testname="orphaned menuitemcheckbox outside the context of menu/menubar" data-expectedrole="navigation"
class="ex">x
</nav>
<button role="menuitem" data-testname="orphan button with menuitem role" data-expectedrole="button" class="ex">x</button>
<div role="menuitem" data-testname="orphan div with menuitem role" class="ex-generic">x</div>
<button role="menuitemcheckbox" data-testname="orphan button with menuitemcheckbox role" data-expectedrole="button" class="ex">x</button>
<div role="menuitemcheckbox" data-testname="orphan div with menuitemcheckbox role" class="ex-generic">x</div>
<button role="menuitemradio" data-testname="orphan button with menuitemradio role" data-expectedrole="button" class="ex">x</button>
<div role="menuitemradio" data-testname="orphan div with menuitemradio role" class="ex-generic">x</div>
<script>
AriaUtils.verifyRolesBySelector(".ex");
AriaUtils.verifyGenericRolesBySelector(".ex-generic");
</script>
</body>
</html>