diff options
Diffstat (limited to 'testing/web-platform/tests/wai-aria/role/menu-roles.html')
| -rw-r--r-- | testing/web-platform/tests/wai-aria/role/menu-roles.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/testing/web-platform/tests/wai-aria/role/menu-roles.html b/testing/web-platform/tests/wai-aria/role/menu-roles.html new file mode 100644 index 0000000000..4af4d8d2ff --- /dev/null +++ b/testing/web-platform/tests/wai-aria/role/menu-roles.html @@ -0,0 +1,82 @@ +<!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> + +<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"); +</script> + +</body> +</html>
\ No newline at end of file |