initial role verification cases (web-platform-tests#38925)

* simple role cases and region special cases * synonym roles tests, reviewer+, and minor errata * synonym roles tests, reviewer+, and minor errata * use assert_equals instead of assert_true * use tagName with implicit role to test non-generic fallback * remove synonym role test; will spawn a new issue * add list roles and break scripts into a shared utils file * m. whitespace. * new roles ReadMe * clarity in attr name and removing code duplication * m. lint tabs -> spaces * review feedback from @zcorpan; include a permanent and unique test name for dashboard/logs. * Gecko-specific fix from @zcorpan
cookiecrook · Mar 29, 2023 · d70afec · d70afec
1 parent 90e5a02
commit d70afec
Show file tree

Hide file tree

Showing 7 changed files with 266 additions and 2 deletions.
diff --git a/wai-aria/META.yml b/wai-aria/META.yml
@@ -1,5 +1,6 @@
 spec: https://w3c.github.io/aria/
 suggested_reviewers:
+  - cookiecrook
   - halindrome
   - joanmarie
   - michael-n-cooper
diff --git a/wai-aria/role/ReadMe.md b/wai-aria/role/ReadMe.md
@@ -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.
diff --git a/wai-aria/role/basic.html b/wai-aria/role/basic.html
@@ -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>
diff --git a/wai-aria/role/list-roles.html b/wai-aria/role/list-roles.html
@@ -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>
+
+<script>
+AriaUtils.verifyRolesBySelector(".ex");
+</script>
+
+</body>
+</html>
diff --git a/wai-aria/role/region-roles.html b/wai-aria/role/region-roles.html
@@ -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>
+
+<!-- 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>
diff --git a/wai-aria/role/roles.html b/wai-aria/role/roles.html
@@ -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.
+  "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>
diff --git a/wai-aria/scripts/aria-utils.js b/wai-aria/scripts/aria-utils.js
@@ -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.setAttribute("role", role); // el.role not yet supported by Gecko.
+        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}`);
+    }
+  },
+
+};
+