Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

initial role verification cases #38925

Merged
merged 13 commits into from
Mar 28, 2023
Merged

initial role verification cases #38925

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
950e206
simple role cases and region special cases
cookiecrook Mar 10, 2023
6d3502f
synonym roles tests, reviewer+, and minor errata
cookiecrook Mar 10, 2023
2256234
synonym roles tests, reviewer+, and minor errata
cookiecrook Mar 10, 2023
47e6e65
use assert_equals instead of assert_true
cookiecrook Mar 10, 2023
4216394
use tagName with implicit role to test non-generic fallback
cookiecrook Mar 10, 2023
44b091a
remove synonym role test; will spawn a new issue
cookiecrook Mar 10, 2023
709fc6a
add list roles and break scripts into a shared utils file
cookiecrook Mar 11, 2023
85c6727
m. whitespace.
cookiecrook Mar 11, 2023
cdce5b1
new roles ReadMe
cookiecrook Mar 11, 2023
b8be822
clarity in attr name and removing code duplication
cookiecrook Mar 11, 2023
f81ed43
m. lint tabs -> spaces
cookiecrook Mar 11, 2023
dc01eef
review feedback from @zcorpan; include a permanent and unique test na…
cookiecrook Mar 21, 2023
af7eca0
Gecko-specific fix from @zcorpan
cookiecrook Mar 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions wai-aria/META.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
spec: https://w3c.github.io/aria/
suggested_reviewers:
- cookiecrook
- halindrome
- joanmarie
- michael-n-cooper
16 changes: 16 additions & 0 deletions wai-aria/role/ReadMe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@

# WPT Roles Tests

/wai-aria/roles/ includes various files broken up by test type

- **roles.html** covers simple assignment/verification of most core WAI-ARIA roles, and includes a list of cross-references to other specific files and spec directories.
- role testing of *host language* implicit roles (E.g., `<main> -> main`) are in other directories (E.g., [html-aam](https://github.com/web-platform-tests/interop-2023-accessibility-testing/issues/13))
- role testing of **ARIA extension specs** are in other directories (E.g., [graphics-aria](https://github.com/web-platform-tests/interop-2023-accessibility-testing/issues/9))
- basic.html was the first to ensure basic test coverage of webdriver getcomputedrole
- other context-dependent role tests, error handling, and edge cases are covered in separate files
- list-roles.html
- region-roles.html
- grid, listbox, menu, tree, etc
- fallback roles
- invalid roles
- error handling, etc.
4 changes: 2 additions & 2 deletions wai-aria/role/basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ <h1 id="h">test heading</h1>

promise_test(async t => {
const role = await test_driver.get_computed_role(document.getElementById('d'));
assert_true(role == "group");
assert_equals(role, "group");
}, "tests explicit role");


promise_test(async t => {
const role = await test_driver.get_computed_role(document.getElementById('h'));
assert_true(role == "heading");
assert_equals(role, "heading");
}, "tests implicit role");

</script>
24 changes: 24 additions & 0 deletions wai-aria/role/list-roles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!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>

<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>
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved

<script>
AriaUtils.verifyRolesBySelector(".ex");
</script>

</body>
</html>
25 changes: 25 additions & 0 deletions wai-aria/role/region-roles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!doctype html>
<html>
<head>
<title>Region 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>

<!-- no label -->
<nav role="region" data-testname="region without label" data-expectedrole="navigation" class="ex">x</nav>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an interesting case. In Gecko, computedRole currently returns "region" here. While it's clear from the HTML AAM spec that <section> without a label shouldn't return "region", I'm not sure where it's specified that role="region" without a label shouldn't map to "region". Core AAM says that region without a label shouldn't be exposed as a landmark to individual platforms, but it says nothing about the fact that it shouldn't be exposed as a "region" as far as ARIA (not the platform APIs) are concerned. You can intuit the latter from the former, but unless I'm missing something, there's no spec concept which allows a role to be completely ignored/invalidated based on a missing name. There's "Name required true", but that's specified for button as well, and I'm not sure we'd want to completely ignore the role for an unlabelled button.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Possibly a mistake. Since this PR is already merged, I filed your comment as a new issue:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Closing the loop here too. The test is correct as written.

Certain landmark roles require names from authors. In situations where an author has not specified names for these landmarks, it is considered an authoring error. The user agent MUST treat such elements as if no role had been provided. If a valid fallback role had been specified, or if the element had an implicit ARIA role, then user agents would continue to expose that role, instead. Instances of such roles are as follows:

Citation: https://w3c.github.io/aria/#document-handling_author-errors_roles


<!-- w/ label -->
<nav role="region" data-testname="region with label" data-expectedrole="region" aria-label="x" class="ex">x</nav>

<script>
AriaUtils.verifyRolesBySelector(".ex");
</script>

</body>
</html>
137 changes: 137 additions & 0 deletions wai-aria/role/roles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!doctype html>
<html>
<head>
<title>Simple Core ARIA 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>
<script>

/*

Tests simple role assignment: <div role="alert">x</div>

- Nested role structures (table>row>cell, etc) and
Abstract roles (e.g. widget, composite) are
commented with pointers to a separate test file.

- ARIA extension specs (e.g. doc-*, graphics-*) are
commented with pointers to a separate spec directory.

*/

AriaUtils.assignAndVerifyRolesByRoleNames([
"alert",
"alertdialog",
"application",
"article",
// "associationlist" [AT-RISK: ARIA #1662] or possibly -> ./list-roles.html
// "associationlistitemkey" [AT-RISK: ARIA #1662] or possibly -> ./list-roles.html
// "associationlistitemvalue" [AT-RISK: ARIA #1662] or possibly -> ./list-roles.html
"banner",
"blockquote",
"button",
"caption",
// "cell" -> ./grid-roles.html
"checkbox",
"code",
// "columnheader" -> ./grid-roles.html
"combobox",
// "command" -> ./abstract-roles.html
// "comment" -> [AT-RISK: ARIA #1885]
"complementary",
// "composite" -> ./abstract-roles.html
"contentinfo",
"definition",
"deletion",
"dialog",
// "directory" -> FAIL. WONTFIX. Deprecated in ARIA 1.2; re-mapped to list role.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this still be tested to check that computed role is list? (i.e. synonym-roles.html)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will add that to web-platform-tests/interop-accessibility#10

"document",
// doc-* roles -> TBD /dpub-aria or /dpub-aam
"emphasis",
"feed",
"figure",
"form",
"generic",
// graphics-* roles -> /graphics-aria
// "grid" -> ./grid-roles.html
// "gridcell" -> ./grid-roles.html
"group",
"heading",
// "image" -> ./synonym-roles.html
// "img" -> ./synonym-roles.html
// "input" -> ./abstract-roles.html
"insertion",
// "landmark" -> ./abstract-roles.html
"link",
// "list" -> ./list-roles.html
// "listitem" -> ./list-roles.html
// "listitemkey" [See: ARIA #1662] or possibly -> ./list-roles.html
// "listitemvalue" [See: ARIA #1662] or possibly -> ./list-roles.html
// "listbox" -> ./listbox-roles.html
"log",
"main",
"marquee",
"math",
// "menu" -> ./menu-roles.html
// "menuitem" -> ./menu-roles.html
// "menuitemcheckbox" -> ./menu-roles.html
// "menuitemradio" -> ./menu-roles.html
// "menubar" -> ./menu-roles.html
"meter",
"navigation",
// "none" -> ./synonym-roles.html
"note",
// "option" -> ./listbox-roles.html
"paragraph",
// "presentation" -> ./synonym-roles.html
"progressbar",
"radio",
"radiogroup",
// "range" -> ./abstract-roles.html
// "region" -> ./region-roles.html
// "roletype" -> ./abstract-roles.html
// "row" -> ./grid-roles.html
// "rowgroup" -> ./grid-roles.html
// "rowheader" -> ./grid-roles.html
"scrollbar",
"search",
"searchbox",
// "section" -> ./abstract-roles.html
// "sectionhead" -> ./abstract-roles.html
// "select" -> ./abstract-roles.html
"separator",
"slider",
"spinbutton",
"status",
"strong",
// "structure" -> ./abstract-roles.html
"subscript",
"suggestion",
"superscript",
"switch",
// "tab" -> ./tab-roles.html
// "table" -> ./grid-roles.html
// "tablist" -> ./tab-roles.html
// "tabpanel" -> ./tab-roles.html
"term",
"textbox",
"time",
"timer",
"toolbar",
"tooltip",
// "tree" -> ./tree-roles.html
// "treeitem" -> ./tree-roles.html
// "treegrid" -> ./treegrid-roles.html
// "widget" -> ./abstract-roles.html
// "window" -> ./abstract-roles.html
]);

</script>
</body>
</html>
61 changes: 61 additions & 0 deletions wai-aria/scripts/aria-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/* Utilities related to WAI-ARIA */

const AriaUtils = {

/*
Tests simple role assignment: <div role="alert">x</div>
Not intended for nested, context-dependent, or other complex role tests.
*/
assignAndVerifyRolesByRoleNames: function(roleNames) {
for (const role of roleNames) {
promise_test(async t => {
let el = document.createElement("div");
el.appendChild(document.createTextNode("x"));
el.role = role;
cookiecrook marked this conversation as resolved.
Show resolved Hide resolved
el.id = `role_${role}`;
document.body.appendChild(el);
const computedRole = await test_driver.get_computed_role(document.getElementById(el.id));
assert_equals(computedRole, role, el.outerHTML);
}, `role: ${role}`);
}
},

/*
Tests computed role of all elements matching selector
against the string value of their data-role attribute.

Ex: <div role="list"
data-testname="optional unique test name"
data-expectedrole="list"
class="ex">

AriaUtils.verifyRolesBySelector(".ex")

*/
verifyRolesBySelector: function(selector) {
const els = document.querySelectorAll(selector);
for (const el of els) {
let role = el.getAttribute("data-expectedrole");
let testName = el.getAttribute("data-testname") || role; // data-testname optional if role unique per test file
promise_test(async t => {
const expectedRole = el.getAttribute("data-expectedrole");

// ensure ID existence and uniqueness for the webdriver callback
if (!el.id) {
let roleCount = 1;
let elID = `${expectedRole}${roleCount}`;
while(document.getElementById(elID)) {
roleCount++;
elID = `${expectedRole}${roleCount}`;
}
el.id = elID;
}

const computedRole = await test_driver.get_computed_role(document.getElementById(el.id));
assert_equals(computedRole, expectedRole, el.outerHTML);
}, `${testName}`);
}
},

};