diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/wai-aria/role/tab-roles.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/wai-aria/role/tab-roles.html')
-rw-r--r-- | testing/web-platform/tests/wai-aria/role/tab-roles.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/testing/web-platform/tests/wai-aria/role/tab-roles.html b/testing/web-platform/tests/wai-aria/role/tab-roles.html new file mode 100644 index 0000000000..e3d14741c8 --- /dev/null +++ b/testing/web-platform/tests/wai-aria/role/tab-roles.html @@ -0,0 +1,94 @@ +<!doctype html> +<html> +<head> + <title>Tab-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> +<body> + +<p>Tests <a href="https://w3c.github.io/aria/#tab">tab</a> and related roles.</p> + +<!--<div> tab with tablist/tab/tabpanel semantics--> +<div role="tablist" data-testname="div role is tablist" data-expectedrole="tablist" class="ex"> + <div role="tab" data-testname="role is tab (in div tablist)" data-expectedrole="tab" class="ex">x</div> +</div> +<div role="tabpanel" data-testname="role is tabpanel (with sibling div tablist)" data-expectedrole="tabpanel" class="ex"></div> + +<!--<div> tabs with tablist/tab/tabpanel semantics, selection, no focus management--> +<div role="tablist" data-testname="div role is tablist (with selection)" data-expectedrole="tablist" class="ex"> + <div role="tab" aria-selected="true" data-testname="role is tab and tab is selected" data-expectedrole="tab" class="ex">x</div> + <div role="tab" aria-selected="false" data-testname="role is tab and tab is not selected" data-expectedrole="tab" class="ex">y</div> +</div> +<div role="tabpanel" data-testname="role is tabpanel (faux selected)" data-expectedrole="tabpanel" class="ex"></div> +<div role="tabpanel" data-testname="role is tabpanel (faux unselected)" data-expectedrole="tabpanel" class="ex"></div> + +<!--<div> tabs with tablist/tab/tabpanel semantics, selection, roving tabindex--> +<div role="tablist" data-testname="div role is tablist (with selection, roving tabindex)" data-expectedrole="tablist" class="ex"> + <div role="tab" aria-selected="true" tabindex = "0" data-testname="role is tab, tab is selected and in tab order" data-expectedrole="tab" class="ex">x</div> + <div role="tab" aria-selected="false" tabindex = "-1" data-testname="role is tab and tab is not selected, not tabbable" data-expectedrole="tab" class="ex">y</div> + <div role="tab" aria-selected="false" tabindex = "-1" data-testname="role is tab and tab is not selected, not tabbable (duplicate)" data-expectedrole="tab" class="ex">z</div> +</div> +<div role="tabpanel" data-testname="role is tabpanel with selection, roving tabindex" data-expectedrole="tabpanel" class="ex"></div> +<div role="tabpanel" data-testname="role is tabpanel with selection, roving tabindex (duplicate)" data-expectedrole="tabpanel" class="ex"></div> +<div role="tabpanel" data-testname="role is tabpanel with selection, roving tabindex (duplicate 2)" data-expectedrole="tabpanel" class="ex"></div> + +<!--<div> tabs with tablist/tab/tabpanel semantics and non-empty tabpanel--> +<div role="tablist" data-testname="div role is tablist (with non-empty tabpanel)" data-expectedrole="tablist" class="ex"> + <div role="tab" aria-selected="true" data-testname="role is tab and tab is selected (with non-empty tabpanel content)" data-expectedrole="tab" class="ex">x</div> + <div role="tab" aria-selected="false" data-testname="role is tab and tab is not selected (with non-empty tabpanel content)" data-expectedrole="tab" class="ex">y</div> +</div> +<div role="tabpanel" data-testname="role is tabpanel with selection, non-empty content" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div> +<div role="tabpanel" data-testname="role is tabpanel with selection, non-empty content (duplicate)" data-expectedrole="tabpanel" class="ex">Tab two's stuff</div> + +<!--<div> tabs with tablist/tab/tabpanel semantics, non-empty tabpanel and aria-controls--> +<div role="tablist" data-testname="div role is tablist (with non-empty tabpanel and aria-controls)" data-expectedrole="tablist" class="ex"> + <div role="tab" aria-controls = "tabpanel1" aria-selected="true" data-testname="role is tab, tab is selected (with aria-controls)" data-expectedrole="tab" class="ex">x</div> + <div role="tab" aria-controls = "tabpanel2" aria-selected="false" data-testname="role is tab, tab is not selected (with aria-controls)" data-expectedrole="tab" class="ex">y</div> +</div> +<div role="tabpanel" id="tabpanel1" data-testname="role is tabpanel with aria-controls and non-empty content" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div> +<div role="tabpanel" id="tabpanel2" data-testname="role is tabpanel with aria-controls and non-empty content (duplicate)" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div> + +<!--<div> tablist with child <button> that has explicit role="tab"--> +<div role="tablist" data-testname="div role for button parent container is tablist" data-expectedrole="tablist" class="ex"> + <button role="tab" data-testname="button role is tab (in div tablist)" data-expectedrole="tab" class="ex">x</div> +</div> + +<!--<ul> tablist with child <divs> that have explicit role="tab"--> +<ul role="tablist" data-testname="ul role is tablist" data-expectedrole="tablist" class="ex"> + <li> + <div role="tab" aria-selected="true" tabindex = "0" data-testname="role is tab (within li), tab is selected and in tab order" data-expectedrole="tab" class="ex">x</div> + </li> + <li> + <div role="tab" aria-selected="false" tabindex = "-1" data-testname="role is tab (within li), tab is not selected and in tab order" data-expectedrole="tab" class="ex">y</div> + </li> +</ul> +<div role="tabpanel" data-testname="role is tabpanel as sibling to ul" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div> +<div role="tabpanel" data-testname="role is tabpanel as sibling to ul (duplicate)" data-expectedrole="tabpanel" class="ex">Tab two's stuff</div> + +<!--<ul> tablist with child <divs> that have explicit role="tab", role="none" on li elements--> + <ul role="tablist" data-testname="ul role is tablist (child li have role none)" data-expectedrole="tablist" class="ex"> + <li role="none"> + <div role="tab" aria-selected="true" tabindex = "0" data-testname="role is tab (within li with role none), tab is selected and in tab order" data-expectedrole="tab" class="ex">x</div> + </li> + <li role="none"> + <div role="tab" aria-selected="false" tabindex = "-1" data-testname="role is tab (within li with role none), tab is not selected and in tab order" data-expectedrole="tab" class="ex">y</div> + </li> + </ul> + <div role="tabpanel" data-testname="role is tabpanel as sibling to ul with child role none li elements" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div> + <div role="tabpanel" data-testname="role is tabpanel as sibling to ul with child role none li elements (duplicate)" data-expectedrole="tabpanel" class="ex">Tab two's stuff</div> + +<!--orphan tab semantics --> +<button role="tab" data-testname="orphan button with tab role" data-expectedrole="button" class="ex">x</button> +<span role="tab" data-testname="orphan span with tab role" class="ex-generic">x</span> + +<script> + AriaUtils.verifyRolesBySelector(".ex"); +</script> + +</body> +</html>
\ No newline at end of file |