mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests to revision b'c9f81de4242294a0d694ecd5a63155acfe6bf49a'
This commit is contained in:
WPT Sync Bot
parent
8c1703219d
commit
632afc64ae
403 changed files with 7449 additions and 5597 deletions
|
|
@ -0,0 +1,354 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Toggles: ARIA roles</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Google" href="http://www.google.com/">
|
||||
<link rel="help" href="https://tabatkins.github.io/css-toggle/">
|
||||
<link rel="help" href="https://github.com/tabatkins/css-toggle/issues/41">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/toggle-helpers.js"></script>
|
||||
<style id="style"></style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
|
||||
let aria_role_tests = [
|
||||
// Markup to create the test assertions:
|
||||
// data-expected-role: The expected aria role for this element.
|
||||
//
|
||||
// Helper markup to create more markup:
|
||||
// class=group: group the group with the toggle-group property
|
||||
// class=group-self: same, but with the self keyword (narrow scope)
|
||||
// class=root: create a test-role toggle with the toggle-root property
|
||||
// class=root-group: same, but with the 'group' keyword
|
||||
// class=root-self: same, but with the 'self' keyword
|
||||
// class=trigger: toggle-trigger to activate test-role toggle
|
||||
// class=visibility: toggle-visibility connected to test-role toggle
|
||||
`
|
||||
<div></div>
|
||||
`,
|
||||
`
|
||||
<div class="root">
|
||||
<div></div>
|
||||
</div>
|
||||
`,
|
||||
`
|
||||
<div class="root trigger" data-expected-role="checkbox"></div>
|
||||
`,
|
||||
// Test that ARIA attributes override the toggle inference:
|
||||
`
|
||||
<div class="root trigger" role="link" data-expected-role="link"></div>
|
||||
`,
|
||||
`
|
||||
<div class="root">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
// Radios and radio groups:
|
||||
`
|
||||
<div class="group" data-expected-role="radiogroup">
|
||||
<div class="root-group trigger" data-expected-role="radio"></div>
|
||||
</div>
|
||||
`,
|
||||
`
|
||||
<div class="group" data-expected-role="radiogroup">
|
||||
<div class="root-group trigger" data-expected-role="radio"></div>
|
||||
<div class="root-group trigger" data-expected-role="radio"></div>
|
||||
</div>
|
||||
`,
|
||||
`
|
||||
<div>
|
||||
<div class="root-group trigger" data-expected-role="radio"></div>
|
||||
</div>
|
||||
`,
|
||||
`
|
||||
<div style="toggle-group: another-group">
|
||||
<div class="root-group trigger" data-expected-role="radio"></div>
|
||||
</div>
|
||||
`,
|
||||
`
|
||||
<div style="toggle-group: another-group, test-role, third-group" data-expected-role="radiogroup">
|
||||
<div class="root-group trigger" data-expected-role="radio"></div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
|
||||
// Checkboxes and checkbox groups:
|
||||
`
|
||||
<div>
|
||||
<div class="root trigger" data-expected-role="checkbox"></div>
|
||||
</div>
|
||||
`,
|
||||
// TODO(dbaron): This is a checkbox group... but we can't distinguish
|
||||
// that with current ARIA roles.
|
||||
`
|
||||
<div>
|
||||
<div class="root trigger" data-expected-role="checkbox"></div>
|
||||
<div class="root trigger" data-expected-role="checkbox"></div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
// Disclosure:
|
||||
// TODO(dbaron): This is a disclosure... but how is it possible to
|
||||
// distinguish with ARIA roles (compare to next test!)?
|
||||
`
|
||||
<div class="root">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
<div class="visibility"></div>
|
||||
</div>
|
||||
`,
|
||||
// This is not a disclosure because it has a toggle-group.
|
||||
`
|
||||
<div class="root-group">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
<div class="visibility"></div>
|
||||
</div>
|
||||
`,
|
||||
// This is button with popup (absolute positioning)
|
||||
// TODO(dbaron): This test doesn't actually distinguish this from
|
||||
// disclosure because the internal kPopUpButton role maps to "button"
|
||||
// in kReverseRoles in ax_object.cc.
|
||||
`
|
||||
<div class="root">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
<div class="visibility" style="position: absolute"></div>
|
||||
</div>
|
||||
`,
|
||||
// This is button with popup (fixed positioning)
|
||||
// TODO(dbaron): This test doesn't actually distinguish this from
|
||||
// disclosure because the internal kPopUpButton role maps to "button"
|
||||
// in kReverseRoles in ax_object.cc.
|
||||
`
|
||||
<div class="root">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
<div class="visibility" style="position: fixed"></div>
|
||||
</div>
|
||||
`,
|
||||
// This is button with popup (popover)
|
||||
// TODO(dbaron): This test doesn't actually distinguish this from
|
||||
// disclosure because the internal kPopUpButton role maps to "button"
|
||||
// in kReverseRoles in ax_object.cc.
|
||||
`
|
||||
<div class="root">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
<div class="visibility" popover="auto"></div>
|
||||
</div>
|
||||
`,
|
||||
// This is disclosure (NOT button with popup) (sticky positioning)
|
||||
`
|
||||
<div class="root">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
<div class="visibility" style="position: sticky"></div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
// Accordion:
|
||||
`
|
||||
<div class="group">
|
||||
<div class="root-group" data-expected-role="region">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
<div class="visibility"></div>
|
||||
</div>
|
||||
<div class="root-group" data-expected-role="region">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
<div class="visibility"></div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
// Not accordion because of other siblings:
|
||||
`
|
||||
<div class="group">
|
||||
<div class="root-group">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
<div class="visibility"></div>
|
||||
</div>
|
||||
<div class="root-group">
|
||||
<div class="trigger" data-expected-role="button"></div>
|
||||
<div class="visibility"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
// Tree:
|
||||
// TODO(dbaron): This should probably also work with the toggles on
|
||||
// the <button>!
|
||||
// TODO(dbaron): This should probably mark the non-interactive items
|
||||
// as treeitem as well!
|
||||
// TODO(dbaron): Do the elements getting the roles here make sense?
|
||||
// TODO(dbaron): The requirement for having multiple disclosure-ish
|
||||
// children to qualify as accordion-ish probably doesn't make sense
|
||||
// here. The test below is basically the minimal example that gets
|
||||
// detected as a tree, but simpler things definitely should be!
|
||||
// TODO(dbaron): The inner parts of the tree should also be getting
|
||||
// tree roles!
|
||||
`
|
||||
<ul data-expected-role="tree">
|
||||
<li class="root-self" data-expected-role="group">
|
||||
<button class="trigger" data-expected-role="treeitem"></button>
|
||||
<ul class="visibility" data-expected-role="list">
|
||||
<li>item</li>
|
||||
<li class="root-self">
|
||||
<button class="trigger" data-expected-role="button"></button>
|
||||
<ul class="visibility" data-expected-role="list">
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="root-self">
|
||||
<button class="trigger" data-expected-role="button"></button>
|
||||
<ul class="visibility" data-expected-role="list">
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="root-self" data-expected-role="group">
|
||||
<button class="trigger" data-expected-role="treeitem"></button>
|
||||
<ul class="visibility" data-expected-role="list">
|
||||
<li class="root-self">
|
||||
<button class="trigger" data-expected-role="button"></button>
|
||||
<ul class="visibility" data-expected-role="list">
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="root-self">
|
||||
<button class="trigger" data-expected-role="button"></button>
|
||||
<ul class="visibility" data-expected-role="list">
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
`,
|
||||
|
||||
// Tabs:
|
||||
`
|
||||
<section class="group" data-expected-role="tablist">
|
||||
<h1 class="root-group trigger" data-expected-role="tab"></h1>
|
||||
<div class="visibility" data-expected-role="tabpanel"></div>
|
||||
<h1 class="root-group trigger" data-expected-role="tab"></h1>
|
||||
<div class="visibility" data-expected-role="tabpanel"></div>
|
||||
<h1 class="root-group trigger" data-expected-role="tab"></h1>
|
||||
<div class="visibility" data-expected-role="tabpanel"></div>
|
||||
</section>
|
||||
`,
|
||||
`
|
||||
<section class="group" data-expected-role="tablist">
|
||||
<h1 class="root-group trigger" data-expected-role="tab"></h1>
|
||||
<div class="visibility" data-expected-role="tabpanel"></div>
|
||||
<h1 class="root-group trigger" data-expected-role="tab"></h1>
|
||||
<div class="visibility" data-expected-role="tabpanel"></div>
|
||||
<div></div>
|
||||
</section>
|
||||
`,
|
||||
`
|
||||
<section class="group" data-expected-role="tablist">
|
||||
<h1 class="root-group trigger" data-expected-role="tab"></h1>
|
||||
<div class="visibility" data-expected-role="tabpanel"></div>
|
||||
<h1 class="root-group trigger" data-expected-role="tab"></h1>
|
||||
<div class="visibility" data-expected-role="tabpanel"></div>
|
||||
<h1 style="toggle-root: other-toggle; toggle-trigger: other-toggle" data-expected-role="checkbox"></h1>
|
||||
</section>
|
||||
`,
|
||||
`
|
||||
<section class="group" data-expected-role="tablist">
|
||||
<h1 class="root-group trigger" data-expected-role="tab"></h1>
|
||||
<div class="visibility" data-expected-role="tabpanel"></div>
|
||||
<h1 class="root-group trigger" data-expected-role="tab"></h1>
|
||||
<div class="visibility" data-expected-role="tabpanel"></div>
|
||||
<h1 style="toggle-root: other-toggle; toggle-trigger: other-toggle" data-expected-role="button"></h1>
|
||||
<div style="toggle-visibility: toggle other-toggle"></div>
|
||||
</section>
|
||||
`,
|
||||
// TODO(https://crbug.com/758089): The expected role for the <section>
|
||||
// should be generic rather than null!
|
||||
`
|
||||
<section class="group" data-expected-role="null">
|
||||
<h1 class="root-group trigger" data-expected-role="button"></h1>
|
||||
<div class="visibility"></div>
|
||||
<h1 class="root-group trigger" data-expected-role="button"></h1>
|
||||
<div class="visibility"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
`,
|
||||
`
|
||||
<section class="group" data-expected-role="radiogroup">
|
||||
<h1 class="root-group trigger" data-expected-role="radio"></h1>
|
||||
<h1 class="root-group trigger" data-expected-role="radio"></h1>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
`,
|
||||
];
|
||||
|
||||
for (let t of aria_role_tests) {
|
||||
promise_test(async function() {
|
||||
container.innerHTML = t;
|
||||
|
||||
for (let e of container.querySelectorAll('.group')) {
|
||||
e.style.toggleGroup = "test-role";
|
||||
}
|
||||
for (let e of container.querySelectorAll('.group-self')) {
|
||||
e.style.toggleGroup = "test-role self";
|
||||
}
|
||||
for (let e of container.querySelectorAll('.root')) {
|
||||
e.style.toggleRoot = "test-role";
|
||||
}
|
||||
for (let e of container.querySelectorAll('.root-group')) {
|
||||
e.style.toggleRoot = "test-role group";
|
||||
}
|
||||
for (let e of container.querySelectorAll('.root-self')) {
|
||||
e.style.toggleRoot = "test-role self";
|
||||
}
|
||||
for (let e of container.querySelectorAll('.trigger')) {
|
||||
e.style.toggleTrigger = "test-role";
|
||||
}
|
||||
for (let e of container.querySelectorAll('.visibility')) {
|
||||
e.style.toggleVisibility = "toggle test-role";
|
||||
}
|
||||
|
||||
for (let e of container.querySelectorAll('.root, .root-nogroup')) {
|
||||
await wait_for_toggle_creation(e);
|
||||
}
|
||||
|
||||
let count = 0;
|
||||
for (let e of container.querySelectorAll("*")) {
|
||||
if (e == container)
|
||||
continue;
|
||||
|
||||
let expected_role = "generic";
|
||||
if (e.hasAttribute("data-expected-role")) {
|
||||
expected_role = e.getAttribute("data-expected-role");
|
||||
// TODO(https://crbug.com/758089): See above regarding <section>;
|
||||
// this null handling should eventually be removed.
|
||||
if (expected_role === "null") {
|
||||
expected_role = null;
|
||||
}
|
||||
}
|
||||
++count;
|
||||
// NOTE: This relies on Element.computedRole, which is an
|
||||
// experimental feature behind the ComputedAccessibilityInfo flag
|
||||
// in blink.
|
||||
assert_equals(e.computedRole, expected_role, `role on ${e.tagName} element (#${count})`);
|
||||
}
|
||||
|
||||
}, `aria role test: ${t}`);
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue