89 lines
No EOL
4.2 KiB
HTML
89 lines
No EOL
4.2 KiB
HTML
<!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>
|
|
|
|
<p>Tests <a href="https://w3c.github.io/aria/#menu">menu</a> and related roles.</p>
|
|
|
|
<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.
|
|
See https://w3c.github.io/core-aam/#roleMappingComputedRole
|
|
-->
|
|
<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> |