mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-01-22 09:12:13 -05:00
Tests: Import more WPT ARIA tests (more regression coverage); no code
This commit is contained in:
sideshowbarker
Tim Flynn
parent
0378645c25
commit
3365cae4a9
Notes:
github-actions[bot]
2024-12-20 14:24:17 +00:00
Author: https://github.com/sideshowbarker Commit: https://github.com/LadybirdBrowser/ladybird/commit/3365cae4a9f Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2987
22 changed files with 920 additions and 0 deletions
|
|
@ -0,0 +1,17 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 12 tests
|
||||
|
||||
12 Pass
|
||||
Pass command role
|
||||
Pass composite role
|
||||
Pass input role
|
||||
Pass landmark role
|
||||
Pass range role
|
||||
Pass roletype role
|
||||
Pass section role
|
||||
Pass sectionhead role
|
||||
Pass select role
|
||||
Pass structure role
|
||||
Pass widget role
|
||||
Pass window role
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 2 tests
|
||||
|
||||
2 Pass
|
||||
Pass tests explicit role
|
||||
Pass tests implicit role
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 10 tests
|
||||
|
||||
10 Pass
|
||||
Pass button aria-haspopup false
|
||||
Pass button aria-haspopup true
|
||||
Pass button aria-haspopup menu
|
||||
Pass button aria-haspopup dialog
|
||||
Pass button aria-haspopup listbox
|
||||
Pass button aria-haspopup tree
|
||||
Pass button aria-haspopup grid
|
||||
Pass button aria-pressed true
|
||||
Pass button aria-pressed false
|
||||
Pass button aria-pressed undefined
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 2 tests
|
||||
|
||||
2 Pass
|
||||
Pass footer scoped to body element is contentinfo
|
||||
Pass contentinfo region scoped to body element is contentinfo
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass generic role on p element is generic
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 10 tests
|
||||
|
||||
10 Pass
|
||||
Pass role is grid
|
||||
Pass role is row (in grid)
|
||||
Pass role is columnheader (in row, in grid)
|
||||
Pass role is rowheader (in row, in grid)
|
||||
Pass role is gridcell (in row, in grid)
|
||||
Pass role is rowgroup (in grid)
|
||||
Pass role is row (in rowgroup, in grid)
|
||||
Pass role is columnheader (in row, in rowgroup, in grid)
|
||||
Pass role is rowheader (in row, in rowgroup, in grid)
|
||||
Pass role is gridcell (in row, in rowgroup, in grid)
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 76 tests
|
||||
|
||||
76 Pass
|
||||
Pass nav with invalid role name foo
|
||||
Pass nav with two invalid role names
|
||||
Pass nav with three invalid role names
|
||||
Pass button with invalid role name foo
|
||||
Pass button with two invalid role names
|
||||
Pass button with three invalid role names
|
||||
Pass nav with empty character as role
|
||||
Pass nav with line break (
) character as role
|
||||
Pass nav with tab ( ) as role (should be treated as whitespace)
|
||||
Pass nav with zero-width space as role (should be treated as whitespace)
|
||||
Pass nav with braille space (10240) as role
|
||||
Pass nav with braille space (x2800) as role
|
||||
Pass nav with non-breaking space (nbsp) as role
|
||||
Pass nav with standard space (nbsp) as role
|
||||
Pass link with role set to tilde diacritic
|
||||
Pass link with role foo that has tilde diacritic
|
||||
Pass link with role set to overline diacritic
|
||||
Pass link with role foo that has overline diacritic
|
||||
Pass link with role set to circumflex diacritic below
|
||||
Pass link with role foo that has circumflex diacritic below
|
||||
Pass link with role set to button with tilde diacritic
|
||||
Pass button with role set to zero-width joiner
|
||||
Pass button with role set to foo with zero-width joiner
|
||||
Pass nav with role set to theta (Θ)
|
||||
Pass nav with role set to Persian character (ژ)
|
||||
Pass nav with multiple non-latin character roles, Persian character (ژ) and ♮
|
||||
Pass nav with role set to Japanese kanji
|
||||
Pass nav with role set to Arabic text
|
||||
Pass nav with multiple role assignments set to Arabic text
|
||||
Pass nav with role set to Hebrew text
|
||||
Pass nav with multiple role assignments set to Hebrew text
|
||||
Pass link with role set to ampersand character
|
||||
Pass link with role set to less than angle bracket character
|
||||
Pass nav with role set to region followed by backslash
|
||||
Pass nav with role set to backslash followed by region
|
||||
Pass nav with role set to region with backslash after e character
|
||||
Pass span with invalid role name foo
|
||||
Pass span with two invalid role names
|
||||
Pass span with three invalid role names
|
||||
Pass div with invalid role name foo
|
||||
Pass div with two invalid role names
|
||||
Pass div with three invalid role names
|
||||
Pass span with escaped empty character as role
|
||||
Pass span with escaped line break (
) character as role
|
||||
Pass span with escaped tab ( ) as role (should be treated as whitespace)
|
||||
Pass span with escaped zero-width space as role (should be treated as whitespace)
|
||||
Pass span with escaped braille space (10240) as role
|
||||
Pass span with escaped braille space (x2800) as role
|
||||
Pass span with escaped non-breaking space (nbsp) as role
|
||||
Pass span with escaped standard space (nbsp) as role
|
||||
Pass span with empty character as role
|
||||
Pass span with line break (
) character as role
|
||||
Pass span with tab ( ) as role (should be treated as whitespace)
|
||||
Pass span with zero-width space as role (should be treated as whitespace)
|
||||
Pass span with braille space (10240) as role
|
||||
Pass span with non-breaking space (nbsp) as role
|
||||
Pass span with standard space as role
|
||||
Pass div with role set to tilde diacritic
|
||||
Pass div with role foo that has tilde diacritic
|
||||
Pass div with role set to button with tilde diacritic
|
||||
Pass div with role set to button with unescaped tilde diacritic
|
||||
Pass span with role set to theta (Θ)
|
||||
Pass span with role set to Persian character (ژ)
|
||||
Pass span with multiple non-latin character roles, Persian character (ژ) and ♮
|
||||
Pass span with role set to Japanese kanji
|
||||
Pass div with role set to Arabic text
|
||||
Pass div with multiple role assignments set to Arabic text
|
||||
Pass div with role set to Hebrew text
|
||||
Pass div with multiple role assignments set to Hebrew text
|
||||
Pass span with role set to ampersand character
|
||||
Pass span with role set to less than angle bracket character
|
||||
Pass span with role set to unescaped ampersand character
|
||||
Pass span with role set to unescaped less than angle bracket character
|
||||
Pass span with role set to region followed by backslash
|
||||
Pass span with role set to backslash followed by region
|
||||
Pass span with role set to region with forward slash after e character
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 3 tests
|
||||
|
||||
3 Pass
|
||||
Pass first simple list
|
||||
Pass first simple listitem
|
||||
Pass last simple listitem
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 6 tests
|
||||
|
||||
6 Pass
|
||||
Pass div role is listbox
|
||||
Pass role is option (in div listbox)
|
||||
Pass role is group (in div listbox)
|
||||
Pass role is option (in group, in div listbox)
|
||||
Pass ul role is listbox
|
||||
Pass li role is option (in ul listbox)
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 37 tests
|
||||
|
||||
37 Pass
|
||||
Pass div role is tablist
|
||||
Pass role is tab (in div tablist)
|
||||
Pass role is tabpanel (with sibling div tablist)
|
||||
Pass div role is tablist (with selection)
|
||||
Pass role is tab and tab is selected
|
||||
Pass role is tab and tab is not selected
|
||||
Pass role is tabpanel (faux selected)
|
||||
Pass role is tabpanel (faux unselected)
|
||||
Pass div role is tablist (with selection, roving tabindex)
|
||||
Pass role is tab, tab is selected and in tab order
|
||||
Pass role is tab and tab is not selected, not tabbable
|
||||
Pass role is tab and tab is not selected, not tabbable (duplicate)
|
||||
Pass role is tabpanel with selection, roving tabindex
|
||||
Pass role is tabpanel with selection, roving tabindex (duplicate)
|
||||
Pass role is tabpanel with selection, roving tabindex (duplicate 2)
|
||||
Pass div role is tablist (with non-empty tabpanel)
|
||||
Pass role is tab and tab is selected (with non-empty tabpanel content)
|
||||
Pass role is tab and tab is not selected (with non-empty tabpanel content)
|
||||
Pass role is tabpanel with selection, non-empty content
|
||||
Pass role is tabpanel with selection, non-empty content (duplicate)
|
||||
Pass div role is tablist (with non-empty tabpanel and aria-controls)
|
||||
Pass role is tab, tab is selected (with aria-controls)
|
||||
Pass role is tab, tab is not selected (with aria-controls)
|
||||
Pass role is tabpanel with aria-controls and non-empty content
|
||||
Pass role is tabpanel with aria-controls and non-empty content (duplicate)
|
||||
Pass div role for button parent container is tablist
|
||||
Pass button role is tab (in div tablist)
|
||||
Pass ul role is tablist
|
||||
Pass role is tab (within li), tab is selected and in tab order
|
||||
Pass role is tab (within li), tab is not selected and in tab order
|
||||
Pass role is tabpanel as sibling to ul
|
||||
Pass role is tabpanel as sibling to ul (duplicate)
|
||||
Pass ul role is tablist (child li have role none)
|
||||
Pass role is tab (within li with role none), tab is selected and in tab order
|
||||
Pass role is tab (within li with role none), tab is not selected and in tab order
|
||||
Pass role is tabpanel as sibling to ul with child role none li elements
|
||||
Pass role is tabpanel as sibling to ul with child role none li elements (duplicate)
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 7 tests
|
||||
|
||||
7 Pass
|
||||
Pass role is tree
|
||||
Pass role is treeitem (in tree)
|
||||
Pass role is group (in treeitem)
|
||||
Pass role is treeitem (in group, in treeitem)
|
||||
Pass role is treegrid
|
||||
Pass role is row (in treegrid)
|
||||
Pass role is gridcell (in row, in treegrid)
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Abstract 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/#abstract_roles">Abstract Roles</a> and related <a href="https://w3c.github.io/aria/#document-handling_author-errors_roles">9.1 Roles - handling author errors</a></p>
|
||||
|
||||
<nav role="command" data-testname="command role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="composite" data-testname="composite role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="input" data-testname="input role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="landmark" data-testname="landmark role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="range" data-testname="range role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="roletype" data-testname="roletype role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="section" data-testname="section role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="sectionhead" data-testname="sectionhead role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="select" data-testname="select role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="structure" data-testname="structure role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="widget" data-testname="widget role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="window" data-testname="window role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
|
||||
|
||||
<script>
|
||||
AriaUtils.verifyRolesBySelector(".ex");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
Tests/LibWeb/Text/input/wpt-import/wai-aria/role/basic.html
Normal file
33
Tests/LibWeb/Text/input/wpt-import/wai-aria/role/basic.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<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>
|
||||
|
||||
<!--
|
||||
|
||||
These tests should remain solid and passing in any implementation that supports get_computed_role.
|
||||
|
||||
It uses a standard promise_test (rather than aria-util.js) to reduce other dependencies.
|
||||
|
||||
If you're adding something you expect to fail in one or more implementations, you probably want a different file.
|
||||
|
||||
-->
|
||||
|
||||
<div id='d' style='height: 100px; width: 100px' role="group" aria-label="test label"></div>
|
||||
<h1 id="h">test heading</h1>
|
||||
<script>
|
||||
|
||||
promise_test(async t => {
|
||||
const role = await test_driver.get_computed_role(document.getElementById('d'));
|
||||
assert_equals(role, "group");
|
||||
}, "tests explicit role");
|
||||
|
||||
|
||||
promise_test(async t => {
|
||||
const role = await test_driver.get_computed_role(document.getElementById('h'));
|
||||
assert_equals(role, "heading");
|
||||
}, "tests implicit role");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Button-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/#button">button</a> and related roles.</p>
|
||||
|
||||
<div role="button" aria-haspopup="false" data-testname="button aria-haspopup false" data-expectedrole="button" class="ex"></div>
|
||||
<div role="button" aria-haspopup="true" data-testname="button aria-haspopup true" data-expectedrole="button" class="ex"></div>
|
||||
<div role="button" aria-haspopup="menu" data-testname="button aria-haspopup menu" data-expectedrole="button" class="ex"></div>
|
||||
<div role="button" aria-haspopup="dialog" data-testname="button aria-haspopup dialog" data-expectedrole="button" class="ex"></div>
|
||||
<div role="button" aria-haspopup="listbox" data-testname="button aria-haspopup listbox" data-expectedrole="button" class="ex"></div>
|
||||
<div role="button" aria-haspopup="tree" data-testname="button aria-haspopup tree" data-expectedrole="button" class="ex"></div>
|
||||
<div role="button" aria-haspopup="grid" data-testname="button aria-haspopup grid" data-expectedrole="button" class="ex"></div>
|
||||
<div role="button" aria-pressed="true" data-testname="button aria-pressed true" data-expectedrole="button" class="ex"></div>
|
||||
<div role="button" aria-pressed="false" data-testname="button aria-pressed false" data-expectedrole="button" class="ex"></div>
|
||||
<div role="button" aria-pressed="" data-testname="button aria-pressed undefined" data-expectedrole="button" class="ex"></div>
|
||||
|
||||
<script>
|
||||
AriaUtils.verifyRolesBySelector(".ex");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Contextual 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>Verifies Required Accessibility Parent Roles from <a href="https://w3c.github.io/aria/#scope">5.2.7 Required Accessibility Parent Role</a></p>
|
||||
<p>Also verifies Allowed Accessibility Child Roles from <a href="https://w3c.github.io/aria/#mustContain">5.2.6 Allowed Accessibility Child Roles</a></p>
|
||||
|
||||
<!-- Notes for "required context" testing:
|
||||
|
||||
- See Computed Role for more details on role computation when an element lacks required context:
|
||||
https://w3c.github.io/core-aam/#roleMappingComputedRole
|
||||
|
||||
- See ARIA spec for full listing of "Required Accessibility Parent Role" for each element:
|
||||
https://w3c.github.io/aria/#scope
|
||||
|
||||
Identified roles with "Required Context" excluding abstract roles (e.g., child -> parent):
|
||||
|
||||
- caption -> {figure, grid, table, treegrid}
|
||||
- cell -> row
|
||||
- columnheader -> row
|
||||
- gridcell -> row
|
||||
- listitem -> {list, directory} *Note: directory role is deprecated as of ARIA 1.2
|
||||
- menuitem -> {group, menu, menubar}
|
||||
- menuitemcheckbox -> {group, menu, menubar}
|
||||
- menuitemradio -> {group, menu, menubar}
|
||||
- option -> {group, listbox}
|
||||
- row -> {grid, rowgroup, table, treegrid}
|
||||
- rowgroup -> {grid, table, treegrid}
|
||||
- rowheader -> row
|
||||
- tab -> tablist
|
||||
- treeitem -> {group, tree}
|
||||
|
||||
-->
|
||||
|
||||
<!-- Required Context Roles Testing -->
|
||||
|
||||
<!-- caption -> ./table-roles.html -->
|
||||
|
||||
<!-- cell -> ./table-roles.html -->
|
||||
|
||||
<!-- columnheader -> ./grid-roles.html, ./table-roles.html -->
|
||||
|
||||
<!-- gridcell -> ./grid-roles.html -->
|
||||
|
||||
<!-- listitem -> ./list-roles.html -->
|
||||
|
||||
<!-- menuitem, menuitemcheckbox, menuitemradio -> ./menu-roles.html -->
|
||||
|
||||
<!-- option -> ./listbox-roles.html -->
|
||||
|
||||
<!-- row -> ./grid-roles.html, ./table-roles.html -->
|
||||
|
||||
<!-- rowgroup -> ./grid-roles.html, ./table-roles.html -->
|
||||
|
||||
<!-- rowheader -> ./grid-roles.html, ./table-roles.html -->
|
||||
|
||||
<!-- tab -> ./tab-roles.html -->
|
||||
|
||||
<!-- treeitem -> ./tree-roles.html -->
|
||||
|
||||
<!-- Misc Contextual Role Testing -->
|
||||
|
||||
<!-- Testing contentinfo role computation when scoped to <main> or not:
|
||||
1. If <footer> is a descendant of <main>, it should become 'generic'
|
||||
2. If <footer> is scoped to <body>, it should be 'contentinfo' as expected
|
||||
|
||||
see: https://w3c.github.io/html-aam/#el-footer-ancestorbody -->
|
||||
<!-- main>footer -> ./roles-contextual.tentative.html -->
|
||||
|
||||
<footer data-testname="footer scoped to body element is contentinfo" data-expectedrole="contentinfo" class="ex">x</footer>
|
||||
<div role="contentinfo" data-testname="contentinfo region scoped to body element is contentinfo" data-expectedrole="contentinfo" class="ex">x</div>
|
||||
|
||||
<script>
|
||||
AriaUtils.verifyRolesBySelector(".ex");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Generic 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/#generic">generic</a>.</p>
|
||||
|
||||
<p role="generic" data-testname="generic role on p element is generic" class="ex-generic">x</p>
|
||||
|
||||
<script>
|
||||
AriaUtils.verifyGenericRolesBySelector(".ex-generic");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Grid 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/#grid">grid</a> and related roles.</p>
|
||||
|
||||
<!-- ARIA table roles tested in ./table-roles.html -->
|
||||
|
||||
<div role="grid" data-testname="role is grid" data-expectedrole="grid" class="ex">
|
||||
<div role="row" data-testname="role is row (in grid)" data-expectedrole="row" class="ex">
|
||||
<span role="columnheader" data-testname="role is columnheader (in row, in grid)" data-expectedrole="columnheader" class="ex">x</span>
|
||||
<span role="columnheader">x</span>
|
||||
</div>
|
||||
<div role="row">
|
||||
<span role="rowheader" data-testname="role is rowheader (in row, in grid)" data-expectedrole="rowheader" class="ex">x</span>
|
||||
<span role="gridcell" data-testname="role is gridcell (in row, in grid)" data-expectedrole="gridcell" class="ex">x</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div role="grid">
|
||||
<div role="rowgroup" data-testname="role is rowgroup (in grid)" data-expectedrole="rowgroup" class="ex">
|
||||
<div role="row" data-testname="role is row (in rowgroup, in grid)" data-expectedrole="row" class="ex">
|
||||
<span role="columnheader" data-testname="role is columnheader (in row, in rowgroup, in grid)" data-expectedrole="columnheader" class="ex">x</span>
|
||||
<span role="columnheader">x</span>
|
||||
<span role="columnheader">x</span>
|
||||
</div>
|
||||
</div>
|
||||
<div role="rowgroup">
|
||||
<div role="row">
|
||||
<span role="rowheader" data-testname="role is rowheader (in row, in rowgroup, in grid)" data-expectedrole="rowheader" class="ex">x</span>
|
||||
<span role="gridcell" data-testname="role is gridcell (in row, in rowgroup, in grid)" data-expectedrole="gridcell" class="ex">x</span>
|
||||
<span role="gridcell">x</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
AriaUtils.verifyRolesBySelector(".ex");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Invalid 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>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Tests invalid ARIA roles from <a href="https://w3c.github.io/aria/#document-handling_author-errors_roles">9.1 Roles - handling author errors</a>.</p>
|
||||
|
||||
<!-- Tests fallback for <nav> when 1/2/3 invalid roles are supplied -->
|
||||
<nav role="foo" data-testname="nav with invalid role name foo" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="foo bar" data-testname="nav with two invalid role names" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="foo bar baz" data-testname="nav with three invalid role names" data-expectedrole="navigation" class="ex">x</nav>
|
||||
|
||||
<!-- Tests fallback for <button> when 1/2/3 invalid roles are supplied -->
|
||||
<button role="foo" data-testname="button with invalid role name foo" data-expectedrole="button" class="ex">x</button>
|
||||
<button role="foo bar" data-testname="button with two invalid role names" data-expectedrole="button" class="ex">x</button>
|
||||
<button role="foo bar baz" data-testname="button with three invalid role names" data-expectedrole="button" class="ex">x</button>
|
||||
|
||||
<!-- Tests fallback for semantically neutral elements when 1/2/3 invalid roles are supplied -->
|
||||
<span role="foo" data-testname="span with invalid role name foo" class="ex-generic">x</span>
|
||||
<span role="foo bar" data-testname="span with two invalid role names" class="ex-generic">x</span>
|
||||
<span role="foo bar baz" data-testname="span with three invalid role names" class="ex-generic">x</span>
|
||||
<div role="foo" data-testname="div with invalid role name foo" class="ex-generic">x</div>
|
||||
<div role="foo bar" data-testname="div with two invalid role names" class="ex-generic">x</div>
|
||||
<div role="foo bar baz" data-testname="div with three invalid role names"class="ex-generic">x</div>
|
||||
|
||||
<!-- Whitespace tests with <nav> (including line breaks, tabs, zero-width space, braille space, non-breaking space, standard space) -->
|
||||
<nav role=" " data-testname="nav with empty character as role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="
" data-testname="nav with line break (
) character as role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="	" data-testname="nav with tab (	) as role (should be treated as whitespace)" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="​" data-testname="nav with zero-width space as role (should be treated as whitespace)" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="⠀" data-testname="nav with braille space (10240) as role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="⠀" data-testname="nav with braille space (x2800) as role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role=" " data-testname="nav with non-breaking space (nbsp) as role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="" data-testname="nav with standard space (nbsp) as role" data-expectedrole="navigation" class="ex">x</nav>
|
||||
|
||||
<!-- Escaped whitespace tests with <span> (including line breaks, tabs, zero-width space, braille space, non-breaking space, standard space) -->
|
||||
<span role=" " data-testname="span with escaped empty character as role" class="ex-generic">x</span>
|
||||
<span role="
" data-testname="span with escaped line break (
) character as role" class="ex-generic">x</span>
|
||||
<span role="	" data-testname="span with escaped tab (	) as role (should be treated as whitespace)" class="ex-generic">x</span>
|
||||
<span role="​" data-testname="span with escaped zero-width space as role (should be treated as whitespace)" class="ex-generic">x</span>
|
||||
<span role="⠀" data-testname="span with escaped braille space (10240) as role" class="ex-generic">x</span>
|
||||
<span role="⠀" data-testname="span with escaped braille space (x2800) as role" class="ex-generic">x</span>
|
||||
<span role=" " data-testname="span with escaped non-breaking space (nbsp) as role" class="ex-generic">x</span>
|
||||
<span role="" data-testname="span with escaped standard space (nbsp) as role" class="ex-generic">x</span>
|
||||
|
||||
<!-- Unescaped whitespace tests with <span> (including line breaks, tabs, zero-width space, braille space, non-breaking space, standard space) -->
|
||||
<span role=" " data-testname="span with empty character as role" class="ex-generic">x</span>
|
||||
<span role="
|
||||
" data-testname="span with line break (
) character as role" class="ex-generic">x</span>
|
||||
<span role=" " data-testname="span with tab (	) as role (should be treated as whitespace)" class="ex-generic">x</span>
|
||||
<span role="" data-testname="span with zero-width space as role (should be treated as whitespace)" class="ex-generic">x</span>
|
||||
<span role="⠀" data-testname="span with braille space (10240) as role" class="ex-generic">x</span>
|
||||
<span role=" " data-testname="span with non-breaking space (nbsp) as role" class="ex-generic">x</span>
|
||||
<span role=" " data-testname="span with standard space as role" class="ex-generic">x</span>
|
||||
|
||||
<!-- Diacritics with <a> -->
|
||||
<a href="#" role="̃" data-testname="link with role set to tilde diacritic" data-expectedrole="link" class="ex">x</a>
|
||||
<a href="#" role="foõ" data-testname="link with role foo that has tilde diacritic" data-expectedrole="link" class="ex">x</a>
|
||||
<a href="#" role="̅" data-testname="link with role set to overline diacritic" data-expectedrole="link" class="ex">x</a>
|
||||
<a href="#" role="foo̅" data-testname="link with role foo that has overline diacritic" data-expectedrole="link" class="ex">x</a>
|
||||
<a href="#" role="̭" data-testname="link with role set to circumflex diacritic below" data-expectedrole="link" class="ex">x</a>
|
||||
<a href="#" role="foo̭" data-testname="link with role foo that has circumflex diacritic below" data-expectedrole="link" class="ex">x</a>
|
||||
<a href="#" role="buttoñ" data-testname="link with role set to button with tilde diacritic" data-expectedrole="link" class="ex">x</a>
|
||||
|
||||
<!-- Diacritics with <div> -->
|
||||
<div role="̃" data-testname="div with role set to tilde diacritic" class="ex-generic">x</div>
|
||||
<div role="foõ" data-testname="div with role foo that has tilde diacritic" class="ex-generic">x</div>
|
||||
<div role="buttoñ" data-testname="div with role set to button with tilde diacritic" class="ex-generic">x</div>
|
||||
<div role="button´" data-testname="div with role set to button with unescaped tilde diacritic" class="ex-generic">x</div>
|
||||
|
||||
<!-- Zero-width joiners (e.g., ZWJ like emoji variants use) with <button> -->
|
||||
<!-- [sic] role="" should include an invisible ZWJ], and role="link" ends with an invisible ZWJ. Use caution when editing. -->
|
||||
<button role="" data-testname="button with role set to zero-width joiner" data-expectedrole="button" class="ex">x</button>
|
||||
<button role="link" data-testname="button with role set to foo with zero-width joiner" data-expectedrole="button" class="ex">x</button>
|
||||
|
||||
<!-- Non-western chars with <nav> -->
|
||||
<nav role="Θ" data-testname="nav with role set to theta (Θ)" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="ژ" data-testname="nav with role set to Persian character (ژ)" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="ژ ♮" data-testname="nav with multiple non-latin character roles, Persian character (ژ) and ♮" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="漢字" data-testname="nav with role set to Japanese kanji" data-expectedrole="navigation" class="ex">x</nav>
|
||||
|
||||
<!-- Non-western chars with <span> -->
|
||||
<span role="Θ" data-testname="span with role set to theta (Θ)" class="ex-generic">x</span>
|
||||
<span role="ژ" data-testname="span with role set to Persian character (ژ)" class="ex-generic">x</span>
|
||||
<span role="ژ ♮" data-testname="span with multiple non-latin character roles, Persian character (ژ) and ♮" class="ex-generic">x</span>
|
||||
<span role="漢字" data-testname="span with role set to Japanese kanji" class="ex-generic">x</span>
|
||||
|
||||
<!-- RTL strings (Hebrew & Arabic) with <nav> -->
|
||||
<nav role="سلام" data-testname="nav with role set to Arabic text" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="سلام حبيب" data-testname="nav with multiple role assignments set to Arabic text" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="שלום" data-testname="nav with role set to Hebrew text" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="שלום חבר" data-testname="nav with multiple role assignments set to Hebrew text" data-expectedrole="navigation" class="ex">x</nav>
|
||||
|
||||
<!-- RTL strings (Hebrew & Arabic) with <div> -->
|
||||
<div role="سلام" data-testname="div with role set to Arabic text" class="ex-generic">x</div>
|
||||
<div role="سلام حبيب" data-testname="div with multiple role assignments set to Arabic text" class="ex-generic">x</div>
|
||||
<div role="שלום" data-testname="div with role set to Hebrew text" class="ex-generic">x</div>
|
||||
<div role="שלום חבר" data-testname="div with multiple role assignments set to Hebrew text" class="ex-generic">x</div>
|
||||
|
||||
<!-- Escaped chars, URL-encoded chars with <a> -->
|
||||
<a href="https://www.apple.com/" role="&" data-testname="link with role set to ampersand character" data-expectedrole="link" class="ex">x</a>
|
||||
<a href="https://www.apple.com/" role="<" data-testname="link with role set to less than angle bracket character" data-expectedrole="link" class="ex">x</a>
|
||||
|
||||
<!-- Escaped chars, URL-encoded chars with <span> -->
|
||||
<span role="&" data-testname="span with role set to ampersand character" class="ex-generic">x</span>
|
||||
<span role="<" data-testname="span with role set to less than angle bracket character" class="ex-generic">x</span>
|
||||
<span role="&" data-testname="span with role set to unescaped ampersand character" class="ex-generic">x</span>
|
||||
<span role="<" data-testname="span with role set to unescaped less than angle bracket character" class="ex-generic">x</span>
|
||||
|
||||
<!-- Backslash closing quote and other malformed roles with characters with <nav> -->
|
||||
<nav role="region\" data-testname="nav with role set to region followed by backslash" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="\region" data-testname="nav with role set to backslash followed by region" data-expectedrole="navigation" class="ex">x</nav>
|
||||
<nav role="re/gion" data-testname="nav with role set to region with backslash after e character" data-expectedrole="navigation" class="ex">x</nav>
|
||||
|
||||
<!-- Backslash closing quote and other malformed roles with characters with <span> -->
|
||||
<span role="region\" data-testname="span with role set to region followed by backslash" class="ex-generic">x</span>
|
||||
<span role="\region" data-testname="span with role set to backslash followed by region" class="ex-generic">x</span>
|
||||
<span role="re/gion" data-testname="span with role set to region with forward slash after e character" class="ex-generic">x</span>
|
||||
|
||||
<script>
|
||||
AriaUtils.verifyRolesBySelector(".ex");
|
||||
AriaUtils.verifyGenericRolesBySelector(".ex-generic");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>List-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/#list">list</a> and related roles.</p>
|
||||
|
||||
<div role="list" data-testname="first simple list" data-expectedrole="list" class="ex">
|
||||
<div role="listitem" data-testname="first simple listitem" data-expectedrole="listitem" class="ex">x</div>
|
||||
<div role="listitem" data-testname="last simple listitem" data-expectedrole="listitem" class="ex">x</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
AriaUtils.verifyRolesBySelector(".ex");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Listbox-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/#listbox">listbox</a> and related roles.</p>
|
||||
|
||||
<div role="listbox" data-testname="div role is listbox" data-expectedrole="listbox" class="ex">
|
||||
<div role="option" data-testname="role is option (in div listbox)" data-expectedrole="option" class="ex">x</div>
|
||||
<div role="group" data-testname="role is group (in div listbox)" data-expectedrole="group" class="ex">
|
||||
<span role="option" data-testname="role is option (in group, in div listbox)" data-expectedrole="option" class="ex">x</span>
|
||||
<span role="option">x</span>
|
||||
</div>
|
||||
<div role="option">x</div>
|
||||
</div>
|
||||
|
||||
<ul role="listbox" data-testname="ul role is listbox" data-expectedrole="listbox" class="ex">
|
||||
<li role="option" data-testname="li role is option (in ul listbox)" data-expectedrole="option" class="ex">
|
||||
x
|
||||
</li>
|
||||
<li role="option">
|
||||
x
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
AriaUtils.verifyRolesBySelector(".ex");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!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>
|
||||
|
||||
<script>
|
||||
AriaUtils.verifyRolesBySelector(".ex");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
147
Tests/LibWeb/Text/input/wpt-import/wai-aria/role/tree-roles.html
Normal file
147
Tests/LibWeb/Text/input/wpt-import/wai-aria/role/tree-roles.html
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tree 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>
|
||||
/* Hide collapsed rows */
|
||||
[role="treegrid"] tr.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Indents */
|
||||
[role="treegrid"] tr[aria-level="2"] > td:first-child {
|
||||
padding-left: 2ch;
|
||||
}
|
||||
|
||||
[role="treegrid"] tr[aria-level="3"] > td:first-child {
|
||||
padding-left: 4ch;
|
||||
}
|
||||
|
||||
/* Collapse/expand icons */
|
||||
[role="treegrid"] tr > td:first-child::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 2ch;
|
||||
height: 11px;
|
||||
transition: transform 0.3s;
|
||||
transform-origin: 5px 5px;
|
||||
}
|
||||
|
||||
[role="treegrid"] tr[aria-expanded] > td:first-child::before,
|
||||
[role="treegrid"] td[aria-expanded]:first-child::before {
|
||||
cursor: pointer;
|
||||
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='black' points='2,0 2,10 10,5'%3E%3C/polygon%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
[role="treegrid"] tr[aria-expanded="true"] > td:first-child::before,
|
||||
[role="treegrid"] td[aria-expanded="true"]:first-child::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<p>Tests <a href="https://w3c.github.io/aria/#tree">tree</a> and related roles.</p>
|
||||
|
||||
<ul role="tree" data-testname="role is tree" data-expectedrole="tree" class="ex">
|
||||
<li role="treeitem" data-testname="role is treeitem (in tree)" data-expectedrole="treeitem" class="ex">
|
||||
x
|
||||
<ul role="group" data-testname="role is group (in treeitem)" data-expectedrole="group" class="ex">
|
||||
<li role="treeitem" data-testname="role is treeitem (in group, in treeitem)" data-expectedrole="treeitem" class="ex">x</li>
|
||||
<li role="treeitem">x</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="treeitem">x</li>
|
||||
</ul>
|
||||
|
||||
<table role="treegrid" data-testname="role is treegrid" data-expectedrole="treegrid" class="ex">
|
||||
<tbody>
|
||||
<tr role="row" aria-expanded="true" aria-level="1" aria-posinset="1" aria-setsize="2" data-testname="role is row (in treegrid)" data-expectedrole="row" class="ex expander">
|
||||
<td role="gridcell" data-testname="role is gridcell (in row, in treegrid)" data-expectedrole="gridcell" class="ex">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
</tr>
|
||||
<tr role="row" aria-level="2" aria-posinset="1" aria-setsize="2">
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
</tr>
|
||||
<tr aria-expanded="false" aria-level="2" aria-posinset="2" aria-setsize="2" role="row" class="expander">
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
</tr>
|
||||
<tr role="row" aria-level="3" aria-posinset="1" aria-setsize="1" class="hidden">
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
</tr>
|
||||
<tr role="row" aria-expanded="false" aria-level="1" aria-posinset="2" aria-setsize="2" class="expander">
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
</tr>
|
||||
<tr role="row" aria-level="2" aria-posinset="1" aria-setsize="2" class="hidden">
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
</tr>
|
||||
<tr role="row" aria-level="2" aria-posinset="1" aria-setsize="2" class="hidden">
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
<td role="gridcell">x</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
AriaUtils.verifyRolesBySelector(".ex");
|
||||
|
||||
const expanders = document.querySelectorAll(".expander");
|
||||
expanders.forEach((expander) => {
|
||||
expander.addEventListener("click", () => {
|
||||
|
||||
const expanderLevel = parseInt(expander.getAttribute("aria-level"))
|
||||
let nextSibling = expander.nextElementSibling;
|
||||
|
||||
// Toggle aria-expanded for the row being expanded
|
||||
let isExpanding = expander.getAttribute("aria-expanded") !== "true";
|
||||
expander.setAttribute("aria-expanded", isExpanding.toString());
|
||||
|
||||
while (nextSibling) {
|
||||
const nextSiblingLevel = parseInt(nextSibling.getAttribute("aria-level"));
|
||||
|
||||
// Don't expand rows found on the same level
|
||||
if (nextSiblingLevel === expanderLevel) nextSibling = null;
|
||||
|
||||
if (isExpanding) {
|
||||
// Don't expand rows beyond the next level if an ".expander" row is found as the nextSibling
|
||||
if (nextSiblingLevel - expanderLevel === 1) {
|
||||
nextSibling.classList.remove("hidden");
|
||||
// Don't expand sub rows found
|
||||
if (nextSibling.hasAttribute("aria-expanded")) nextSibling.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
} else {
|
||||
// Only expand rows that are more "indented" than the ".expander" row. A higher aria-level indicates a
|
||||
// higher "level"
|
||||
if (nextSiblingLevel > expanderLevel) {
|
||||
nextSibling.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
nextSibling = nextSibling.nextElementSibling;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue