AriaUtils.verifyLabelsBySelector(".ex")
*/
verifyLabelsBySelector: function(selector, labelTestNamePrefix) {
const els = document.querySelectorAll(selector);
if (!els.length) {
throw `Selector passed in verifyLabelsBySelector("${selector}") should match at least one element.`;
}
for (const el of els) {
let label = el.getAttribute("data-expectedlabel");
let testName = el.getAttribute("data-testname") || label; // data-testname optional if label is unique per test file
if (typeof labelTestNamePrefix !== "undefined") {
testName = labelTestNamePrefix + testName;
}
promise_test(async t => {
const expectedLabel = el.getAttribute("data-expectedlabel");
let computedLabel = await test_driver.get_computed_label(el);
assert_not_equals(computedLabel, null, `get_computed_label(el) shouldn't return null for ${el.outerHTML}`);
// See:
// - https://github.com/w3c/accname/pull/165
// - https://github.com/w3c/accname/issues/192
// - https://github.com/w3c/accname/issues/208
//
// AccName references HTML's definition of ASCII Whitespace
// https://infra.spec.whatwg.org/#ascii-whitespace
// which matches tab (\t), newline (\n), formfeed (\f), return (\r), and regular space (\u0020).
// but it does NOT match non-breaking space (\xA0,\u00A0) and others matched by \s
const asciiWhitespace = /[\t\n\f\r\u0020]+/g;
computedLabel = computedLabel.replace(asciiWhitespace, '\u0020').replace(/^\u0020|\u0020$/g, '');
assert_equals(computedLabel, expectedLabel, el.outerHTML);
}, `${testName}`);
}
},
/*
Tests computed LABEL and ROLE of all elements matching selector using existing
verifyLabelsBySelector(), verifyRolesBySelector() functions and passes a test name prefix
to ensure uniqueness.
Ex:
AriaUtils.verifyRolesAndLabelsBySelector(".ex-role-and-label")
*/
verifyRolesAndLabelsBySelector: function(selector) {
let labelTestNamePrefix = "Label: ";
let roleTestNamePrefix = "Role: ";
const els = document.querySelectorAll(selector);
if (!els.length) {
throw `Selector passed in verifyRolesAndLabelsBySelector("${selector}") should match at least one element.`;
}
for (const el of els) {
el.classList.add("ex-label-only");
el.classList.add("ex-role-only");
}
this.verifyLabelsBySelector(".ex-label-only", labelTestNamePrefix);
this.verifyRolesBySelector(".ex-role-only", roleTestNamePrefix);
},
};