diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/html-aam | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html-aam')
10 files changed, 800 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html-aam/META.yml b/testing/web-platform/tests/html-aam/META.yml new file mode 100644 index 0000000000..212cae7fa5 --- /dev/null +++ b/testing/web-platform/tests/html-aam/META.yml @@ -0,0 +1,4 @@ +spec: https://w3c.github.io/html-aam/ +suggested_reviewers: + - cookiecrook + - scottaohara diff --git a/testing/web-platform/tests/html-aam/fragile/area-role.html b/testing/web-platform/tests/html-aam/fragile/area-role.html new file mode 100644 index 0000000000..315d4a8e83 --- /dev/null +++ b/testing/web-platform/tests/html-aam/fragile/area-role.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> +<head> + <title>HTMLAreaElement 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> + +<map name="areamap"> + <area shape="rect" coords="0,0,15,15" href="#" alt="x" data-testname="el-area" data-expectedrole="link" class="ex"> + <area shape="rect" coords="15,15,31,31" alt="x" data-testname="el-area-no-href" class="ex-generic"> +</map> +<img usemap="#areamap" style="width: 32px; height: 32px;" alt="x" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> + +<script> +AriaUtils.verifyRolesBySelector(".ex"); +AriaUtils.verifyGenericRolesBySelector(".ex-generic"); +</script> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html-aam/fragile/optgroup-role.html b/testing/web-platform/tests/html-aam/fragile/optgroup-role.html new file mode 100644 index 0000000000..f36a5d6983 --- /dev/null +++ b/testing/web-platform/tests/html-aam/fragile/optgroup-role.html @@ -0,0 +1,30 @@ +<!doctype html> +<html> +<head> + <title>HTMLOptGroupElement 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> + +<select> + <optgroup label="x" data-testname="el-optgroup" data-expectedrole="group" class="ex"> + <option>x1</option> + <option>x2</option> + </optgroup> + <optgroup data-testname="el-optgroup-no-label" data-expectedrole="not defined in spec?" class="ex-todo"> + <option>y1</option> + <option>y2</option> + </optgroup> +</select> + +<script> +AriaUtils.verifyRolesBySelector(".ex"); +</script> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html-aam/names.html b/testing/web-platform/tests/html-aam/names.html new file mode 100644 index 0000000000..cd32fde5c7 --- /dev/null +++ b/testing/web-platform/tests/html-aam/names.html @@ -0,0 +1,260 @@ +<!doctype html> +<html> +<head> + <title>HTML-AAM Element Accessible Name From Author 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 the accName for elements defined in <a href="https://w3c.github.io/html-aam/#accessible-name-and-description-computation">HTML-AAM: Accessible Name Computations By HTML Element</a>. + These tests are meant to show whether an element returns a name per the naming mechanism used. See <a href="https://wpt.fyi/results/accname">wpt: accname</a> for expanded accName testing.</p> + + +<!-- +The following elements are those which can be named by authors. They do not receive their name from elements for which they are an accessibility ancestor. + +There are other elements which can be named by author, but have additional ways in which they can be named. These elements will be tested separately. +--> + + +<h2>address element</h2> +<address data-testname="address no name" data-expectedlabel="" class="ex">x</address> + +<address data-testname="address aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</address> +<address data-testname="address aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</address> +<address data-testname="address title" title="title" data-expectedlabel="title" class="ex">x</address> + +<address data-testname="address aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</address> +<address data-testname="address aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</address> + +<address data-testname="address aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</address> +<address data-testname="address aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</address> + + + +<h2>aside element</h2> +<aside data-testname="aside no name" data-expectedlabel="" class="ex">x</aside> + +<aside data-testname="aside aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</aside> +<aside data-testname="aside aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</aside> +<aside data-testname="aside title" title="title" data-expectedlabel="title" class="ex">x</aside> + +<aside data-testname="aside aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</aside> +<aside data-testname="aside aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</aside> + +<aside data-testname="aside aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</aside> +<aside data-testname="aside aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</aside> + + +<h2>blockquote element</h2> +<blockquote data-testname="blockquote no name" data-expectedlabel="" class="ex">x</blockquote> + +<blockquote data-testname="blockquote aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</blockquote> +<blockquote data-testname="blockquote aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</blockquote> +<blockquote data-testname="blockquote title" title="title" data-expectedlabel="title" class="ex">x</blockquote> + +<blockquote data-testname="blockquote aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</blockquote> +<blockquote data-testname="blockquote aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</blockquote> + +<blockquote data-testname="blockquote aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</blockquote> +<blockquote data-testname="blockquote aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</blockquote> + + + +<h2>details element</h2> +<details data-testname="details no name" data-expectedlabel="" class="ex"><summary>x</summary></details> + +<details data-testname="details aria-label" aria-label="label" data-expectedlabel="label" class="ex"><summary>x</summary></details> +<details data-testname="details aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details> +<details data-testname="details title" title="title" data-expectedlabel="title" class="ex"><summary>x</summary></details> + +<details data-testname="details aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details> +<details data-testname="details aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details> + +<details data-testname="details aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details> +<details data-testname="details aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><summary>x</summary></details> + + +<h2>figure element</h2> +<figure data-testname="figure no name" data-expectedlabel="" class="ex">x</figure> + +<figure data-testname="figure aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</figure> +<figure data-testname="figure aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</figure> +<figure data-testname="figure title" title="title" data-expectedlabel="title" class="ex">x</figure> + +<figure data-testname="figure aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</figure> +<figure data-testname="figure aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</figure> + +<figure data-testname="figure aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</figure> +<figure data-testname="figure aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</figure> + + +<h2>footer element</h2> +<footer data-testname="footer no name" data-expectedlabel="" class="ex">x</footer> + +<footer data-testname="footer aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</footer> +<footer data-testname="footer aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</footer> +<footer data-testname="footer title" title="title" data-expectedlabel="title" class="ex">x</footer> + +<footer data-testname="footer aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</footer> +<footer data-testname="footer aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</footer> + +<footer data-testname="footer aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</footer> +<footer data-testname="footer aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</footer> + + +<h2>form element</h2> +<form data-testname="form no name" data-expectedlabel="" class="ex">x</form> + +<form data-testname="form aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</form> +<form data-testname="form aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</form> +<form data-testname="form title" title="title" data-expectedlabel="title" class="ex">x</form> + +<form data-testname="form aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</form> +<form data-testname="form aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</form> + +<form data-testname="form aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</form> +<form data-testname="form aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</form> + + +<h2>hgroup element</h2> +<hgroup data-testname="hgroup no name" data-expectedlabel="" class="ex"><h3>x</h3><p>y</p></hgroup> + +<hgroup data-testname="hgroup aria-label" aria-label="label" data-expectedlabel="label" class="ex"><h3>x</h3><p>y</p></hgroup> +<hgroup data-testname="hgroup aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup> +<hgroup data-testname="hgroup title" title="title" data-expectedlabel="title" class="ex"><h3>x</h3><p>y</p></hgroup> + +<hgroup data-testname="hgroup aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup> +<hgroup data-testname="hgroup aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup> + +<hgroup data-testname="hgroup aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup> +<hgroup data-testname="hgroup aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><h3>x</h3><p>y</p></hgroup> + + +<h2>hr element</h2> +<hr data-testname="hr no name" data-expectedlabel="" class="ex"> + +<hr data-testname="hr aria-label" aria-label="label" data-expectedlabel="label" class="ex"> +<hr data-testname="hr aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"> +<hr data-testname="hr title" title="title" data-expectedlabel="title" class="ex"> + +<hr data-testname="hr aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"> +<hr data-testname="hr aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"> + +<hr data-testname="hr aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"> +<hr data-testname="hr aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"> + + +<h2>ol element</h2> +<ol data-testname="ol no name" data-expectedlabel="" class="ex"><li>x</li></ol> + +<ol data-testname="ol aria-label" aria-label="label" data-expectedlabel="label" class="ex"><li>x</li></ol> +<ol data-testname="ol aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><li>x</li></ol> +<ol data-testname="ol title" title="title" data-expectedlabel="title" class="ex"><li>x</li></ol> + +<ol data-testname="ol aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ol> +<ol data-testname="ol aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><li>x</li></ol> + +<ol data-testname="ol aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ol> +<ol data-testname="ol aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><li>x</li></ol> + + +<h2>main element</h2> +<main data-testname="main no name" data-expectedlabel="" class="ex">x</main> + +<main data-testname="main aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</main> +<main data-testname="main aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</main> +<main data-testname="main title" title="title" data-expectedlabel="title" class="ex">x</main> + +<main data-testname="main aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</main> +<main data-testname="main aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</main> + +<main data-testname="main aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</main> +<main data-testname="main aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</main> + + +<h2>menu element</h2> +<menu data-testname="menu no name" data-expectedlabel="" class="ex"><li>x</li></menu> + +<menu data-testname="menu aria-label" aria-label="label" data-expectedlabel="label" class="ex"><li>x</li></menu> +<menu data-testname="menu aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><li>x</li></menu> +<menu data-testname="menu title" title="title" data-expectedlabel="title" class="ex"><li>x</li></menu> + +<menu data-testname="menu aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></menu> +<menu data-testname="menu aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><li>x</li></menu> + +<menu data-testname="menu aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></menu> +<menu data-testname="menu aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><li>x</li></menu> + + +<h2>nav element</h2> +<nav data-testname="nav no name" data-expectedlabel="" class="ex">x</nav> + +<nav data-testname="nav aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</nav> +<nav data-testname="nav aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</nav> +<nav data-testname="nav title" title="title" data-expectedlabel="title" class="ex">x</nav> + +<nav data-testname="nav aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</nav> +<nav data-testname="nav aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</nav> + +<nav data-testname="nav aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</nav> +<nav data-testname="nav aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</nav> + + +<h2>search element</h2> +<search data-testname="search no name" data-expectedlabel="" class="ex">x</search> + +<search data-testname="search aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</search> +<search data-testname="search aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</search> +<search data-testname="search title" title="title" data-expectedlabel="title" class="ex">x</search> + +<search data-testname="search aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</search> +<search data-testname="search aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</search> + +<search data-testname="search aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</search> +<search data-testname="search aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</search> + + +<h2>section element</h2> +<section data-testname="section no name" data-expectedlabel="" class="ex">x</section> + +<section data-testname="section aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</section> +<section data-testname="section aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</section> +<section data-testname="section title" title="title" data-expectedlabel="title" class="ex">x</section> + +<section data-testname="section aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</section> +<section data-testname="section aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</section> + +<section data-testname="section aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</section> +<section data-testname="section aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</section> + + +<h2>ul element</h2> +<ul data-testname="ul no name" data-expectedlabel="" class="ex"><li>x</li></ul> + +<ul data-testname="ul aria-label" aria-label="label" data-expectedlabel="label" class="ex"><li>x</li></ul> +<ul data-testname="ul aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><li>x</li></ul> +<ul data-testname="ul title" title="title" data-expectedlabel="title" class="ex"><li>x</li></ul> + +<ul data-testname="ul aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ul> +<ul data-testname="ul aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><li>x</li></ul> + +<ul data-testname="ul aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ul> +<ul data-testname="ul aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><li>x</li></ul> + + +<!-- element to reference for aria-labelledby tests --> +<div id="labelledby">labelledby</div> + +<script> +AriaUtils.verifyLabelsBySelector(".ex"); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/html-aam/roles-contextual.html b/testing/web-platform/tests/html-aam/roles-contextual.html new file mode 100644 index 0000000000..200fed7e75 --- /dev/null +++ b/testing/web-platform/tests/html-aam/roles-contextual.html @@ -0,0 +1,81 @@ +<!doctype html> +<html> +<head> + <title>HTML-AAM Contextual-Specific 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 contextual computedrole mappings defined in <a href="https://w3c.github.io/html-aam/">HTML-AAM</a>, where the returned computed role is expected to change based on the context. Most test names correspond to a unique ID defined in the spec.<p> + +<p>These should remain in alphabetical order.</code></p> + + +<!-- el-a --> +<a href="#" data-testname="el-a" data-expectedrole="link" class="ex">x</a> +<a data-testname="el-a-no-href" class="ex-generic">x</a> + +<!-- el-aside --> +<aside data-testname="el-aside" data-expectedrole="complementary" class="ex">x</aside> +<main> + <aside data-testname="el-aside-in-main" data-expectedrole="complementary" class="ex">x</aside> + <article> + <aside data-testname="el-aside-in-article-in-main" class="ex-generic">x</aside> + <aside data-testname="el-aside-in-article-in-main-with-name" data-expectedrole="complementary" aria-label="x" class="ex">x</aside> + </article> +</main> +<article> + <aside data-testname="el-aside-in-article" class="ex-generic">x</aside> + <aside data-testname="el-aside-in-article-with-name" data-expectedrole="complementary" aria-label="x" class="ex">x</aside> +</article> +<aside> + <aside data-testname="el-aside-in-aside" class="ex-generic">x</aside> + <aside data-testname="el-aside-in-aside-with-name" data-expectedrole="complementary" aria-label="x" class="ex">x</aside> +</aside> +<nav> + <aside data-testname="el-aside-in-nav" class="ex-generic">x</aside> + <aside data-testname="el-aside-in-nav-with-name" data-expectedrole="complementary" aria-label="x" class="ex">x</aside> + <aside data-testname="el-aside-in-nav-with-role" data-expectedrole="complementary" class="ex" role="complementary">x</aside> +</nav> +<!-- Spec says that the conditional aside mapping happens when nested in a sectioning content element. + However, this doesn't make sense if the parent <section> isn't a landmark in the first place. + Let's force the section to always be a landmark for now, but we should probably expand on this test + case pending discussions in https://github.com/w3c/html-aam/pull/484 --> +<section aria-label="x"> + <aside data-testname="el-aside-in-section" class="ex-generic">x</aside> + <aside data-testname="el-aside-in-section-with-name" data-expectedrole="complementary" aria-label="x" class="ex">x</aside> +</section> + +<!-- el-footer --> +<nav> + <footer data-testname="el-footer" aria-label="x" class="ex-generic">x</aside> +</nav> +<footer data-testname="el-footer-ancestorbody" data-expectedrole="contentinfo" class="ex">x</footer> + +<!-- el-header --> +<nav> + <header data-testname="el-header" aria-label="x" class="ex-generic">x</header> +</nav> +<header data-testname="el-header-ancestorbody" data-expectedrole="banner" class="ex">x</header> +<main> + <header data-testname="el-header-ancestormain" data-expectedrole="generic" class="ex-generic">x</header> +</main> + +<!-- el-section --> +<section data-testname="el-section" aria-label="x" data-expectedrole="region" class="ex">x</section> +<section data-testname="el-section-no-name" class="ex-generic">x</section> + + +<script> +AriaUtils.verifyRolesBySelector(".ex"); +AriaUtils.verifyGenericRolesBySelector(".ex-generic"); +</script> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html-aam/roles-dynamic-switch.tentative.window.js b/testing/web-platform/tests/html-aam/roles-dynamic-switch.tentative.window.js new file mode 100644 index 0000000000..2993c36764 --- /dev/null +++ b/testing/web-platform/tests/html-aam/roles-dynamic-switch.tentative.window.js @@ -0,0 +1,71 @@ +// META: script=/resources/testdriver.js +// META: script=/resources/testdriver-vendor.js +// META: script=/resources/testdriver-actions.js + +promise_test(async () => { + const control = document.createElement("input"); + control.type = "checkbox"; + control.switch = true; + const role = await test_driver.get_computed_role(control); + assert_equals(role, ""); +}, `Disconnected <input type=checkbox switch>`); + +promise_test(async t => { + const control = document.createElement("input"); + t.add_cleanup(() => control.remove()); + control.type = "checkbox"; + control.switch = true; + document.body.append(control); + const role = await test_driver.get_computed_role(control); + assert_equals(role, "switch"); +}, `Connected <input type=checkbox switch>`); + +promise_test(async t => { + const control = document.createElement("input"); + t.add_cleanup(() => control.remove()); + control.type = "checkbox"; + document.body.append(control); + let role = await test_driver.get_computed_role(control); + assert_equals(role, "checkbox"); + control.switch = true; + role = await test_driver.get_computed_role(control); + assert_equals(role, "switch"); +}, `Connected <input type=checkbox switch>: adding switch attribute`); + +promise_test(async t => { + const control = document.createElement("input"); + t.add_cleanup(() => control.remove()); + control.type = "checkbox"; + control.switch = true; + document.body.append(control); + let role = await test_driver.get_computed_role(control); + assert_equals(role, "switch"); + control.switch = false; + role = await test_driver.get_computed_role(control); + assert_equals(role, "checkbox"); +}, `Connected <input type=checkbox switch>: removing switch attribute`); + +promise_test(async t => { + const control = document.createElement("input"); + t.add_cleanup(() => control.remove()); + control.type = "checkbox"; + document.body.append(control); + control.switch = true; + let role = await test_driver.get_computed_role(control); + assert_equals(role, "switch"); + control.removeAttribute("type"); + role = await test_driver.get_computed_role(control); + assert_equals(role, "textbox"); +}, `Connected <input type=checkbox switch>: removing type attribute`); + +promise_test(async t => { + const control = document.createElement("input"); + t.add_cleanup(() => control.remove()); + control.switch = true; + document.body.append(control); + let role = await test_driver.get_computed_role(control); + assert_equals(role, "textbox"); + control.type = "checkbox"; + role = await test_driver.get_computed_role(control); + assert_equals(role, "switch"); +}, `Connected <input type=checkbox switch>: adding type attribute`); diff --git a/testing/web-platform/tests/html-aam/roles-generic.html b/testing/web-platform/tests/html-aam/roles-generic.html new file mode 100644 index 0000000000..e6ff46b066 --- /dev/null +++ b/testing/web-platform/tests/html-aam/roles-generic.html @@ -0,0 +1,43 @@ +<!doctype html> +<html> +<head> + <title>HTML-AAM 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 ONLY the <code>generic</code> mappings defined in <a href="https://w3c.github.io/html-aam/">HTML-AAM</a>. Most test names correspond to a unique ID defined in the spec.<p> + +<p>These should remain in alphabetical order by tagname.</p> + +<!-- a -> ./roles-contextual.html --> +<!-- aside -> ./roles-contextual.html --> +<b data-testname="el-b" class="ex-generic">x</b> +<bdi data-testname="el-bdi" class="ex-generic">x</bdi> +<bdo data-testname="el-bdo" class="ex-generic">x</bdo> +<data value="1" data-testname="el-data" class="ex-generic">x</data> +<div open data-testname="el-div" class="ex-generic">x</div> +<!-- footer -> ./roles-contextual.html --> +<!-- header -> ./roles-contextual.html --> +<i data-testname="el-i" class="ex-generic">x</i> +<li data-testname="el-li-orphaned" class="ex-generic">x</li><!-- todo: should orphaned roles be tested in a new ./roles-orphaned.html file? --> +<pre data-testname="el-pre" class="ex-generic">x</pre> +<q data-testname="el-q" class="ex-generic">x</q> +<samp data-testname="el-samp" class="ex-generic">x</samp> +<!-- section -> ./roles-contextual.html --> +<small data-testname="el-small" class="ex-generic">x</small> +<span data-testname="el-span" class="ex-generic">x</span> +<u data-testname="el-u" class="ex-generic">x</u> + +<script> +AriaUtils.verifyGenericRolesBySelector(".ex-generic"); +</script> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html-aam/roles.html b/testing/web-platform/tests/html-aam/roles.html new file mode 100644 index 0000000000..7cfb2852c2 --- /dev/null +++ b/testing/web-platform/tests/html-aam/roles.html @@ -0,0 +1,206 @@ +<!doctype html> +<html> +<head> + <title>HTML-AAM 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 the computedrole mappings defined in <a href="https://w3c.github.io/html-aam/">HTML-AAM</a>. Most test names correspond to a unique ID defined in the spec.<p> + +<p>These should remain in alphabetical order, and include all HTML tagnames. If a tag is not tested here, include a pointer to the file where it is tested, such as: <code><!-- caption -> ./table-roles.html --></code></p> + + +<!-- a (w/ and w/o href) -> ./roles-contextual.html --> +<!-- todo: abbr --> +<address data-testname="el-address" data-expectedrole="group" class="ex">x</address> +<!-- area -> ./fragile/area-role.html --> +<article data-testname="el-article" data-expectedrole="article" class="ex">x</article> +<!-- aside -> ./roles-contextual.html --> +<!-- todo: audio --> +<!-- todo: autonomous custom element --> +<!-- b -> ./roles-generic.html --> +<!-- base (not mapped) --> +<!-- bdi -> ./roles-generic.html --> +<!-- bdo -> ./roles-generic.html --> +<blockquote data-testname="el-blockquote" data-expectedrole="blockquote" class="ex">x</blockquote> +<!-- todo: body --> +<!-- br (not mapped) --> +<button data-testname="el-button" data-expectedrole="button" class="ex">x</button> +<!-- todo: canvas --> +<!-- caption -> ./table-roles.html --> +<!-- todo: cite --> +<code data-testname="el-code" data-expectedrole="code" class="ex">x</code> +<!-- todo: col --> +<!-- todo: colgroup --> +<!-- data -> ./roles-generic.html --> +<!-- todo: datalist --> + +<!-- el-dd --> +<dl> + <dt>x</dt> + <dd data-testname="el-dd" data-expectedrole="definition" class="ex">x</dd> +</dl> + +<del data-testname="el-del" data-expectedrole="deletion" class="ex">x</del> +<details data-testname="el-details" data-expectedrole="group" class="ex"><summary>x</summary>x</details> +<dfn data-testname="el-dfn" data-expectedrole="term" class="ex">x</dfn> +<!-- div -> ./roles-generic.html --> +<!-- todo: dl --> + +<!-- el-dt --> +<dl> + <dt data-testname="el-dt" data-expectedrole="term" class="ex">x</dt> + <dd>x</dd> +</dl> + +<em data-testname="el-em" data-expectedrole="emphasis" class="ex">x</em> +<!-- todo: embed --> +<fieldset data-testname="el-fieldset" data-expectedrole="group" class="ex"><legend>x</legend><input></fieldset> +<!-- todo: figcaption --> +<figure data-testname="el-figure" data-expectedrole="figure" class="ex"><img alt="x" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="><figcaption>x</figcaption></figure> +<!-- footer -> ./roles-contextual.html --> +<form data-testname="el-form" data-expectedrole="form" class="ex"><input></form> +<!-- todo: form-associated custom element --> + +<!-- el-h1-h6 --> +<h1 data-testname="el-h1" data-expectedrole="heading" class="ex">x</h1> +<h2 data-testname="el-h2" data-expectedrole="heading" class="ex">x</h2> +<h3 data-testname="el-h3" data-expectedrole="heading" class="ex">x</h3> +<h4 data-testname="el-h4" data-expectedrole="heading" class="ex">x</h4> +<h5 data-testname="el-h5" data-expectedrole="heading" class="ex">x</h5> +<h6 data-testname="el-h6" data-expectedrole="heading" class="ex">x</h6> + +<!-- head (not mapped) --> + +<!-- header -> ./roles-contextual.html --> +<hgroup data-testname="el-hgroup" data-expectedrole="group" class="ex"><h1>x</h1></hgroup> +<hr data-testname="el-hr" data-expectedrole="separator" class="ex"> +<!-- todo: html --> +<!-- i -> ./roles-generic.html --> +<!-- todo: iframe --> +<img alt="x" data-testname="el-img" data-expectedrole="image" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> + +<!-- Implementations might also be valid if ignored rather than returning 'none' for the following images. --> +<img alt data-testname="el-img-alt-no-value" class="ex-generic" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> +<img alt="" data-testname="el-img-empty-alt" class="ex-generic" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> + +<input type="button" value="x" data-testname="el-input-button" data-expectedrole="button" class="ex"> +<input type="checkbox" data-testname="el-input-checkbox" data-expectedrole="checkbox" class="ex"> +<!-- todo: input type="color" --> +<!-- todo: input type="date" --> +<!-- todo: input type="datetime" --> +<!-- todo: input type="datetime-local" --> +<input type="email" data-testname="el-input-email" data-expectedrole="textbox" class="ex"> +<!-- todo: input type="file" --> +<!-- input type="hidden" (not mapped) --> +<!-- todo: input type="month" --> + +<!-- Blocked: HTML-AAM Issue #467 --> +<!-- <input type="number" data-testname="el-input-number" data-expectedrole="spinbutton" class="ex"> --> + +<!-- todo: input type="password" --> +<input type="radio" data-testname="el-input-radio" data-expectedrole="radio" class="ex"> +<input type="range" data-testname="el-input-range" data-expectedrole="slider" class="ex"> +<input type="reset" value="x" data-testname="el-input-reset" data-expectedrole="button" class="ex"> +<input type="search" data-testname="el-input-search" data-expectedrole="searchbox" class="ex"> +<input type="submit" value="x" data-testname="el-input-submit" data-expectedrole="button" class="ex"> +<input type="tel" data-testname="el-input-tel" data-expectedrole="textbox" class="ex"> +<input type="text" data-testname="el-input-text" data-expectedrole="textbox" class="ex"> +<!-- todo: input (type attribute in the Text, Search, Telephone, URL, or E-mail states with a suggestions source element) --> +<!-- todo: input type="time" --> +<input type="url" data-testname="el-input-url" data-expectedrole="textbox" class="ex"> +<!-- todo: input type="week" --> +<ins data-testname="el-ins" data-expectedrole="insertion" class="ex">x</ins> +<!-- todo: kbd --> +<!-- todo: label --> +<!-- todo: legend --> + +<!-- el-li --> +<!-- li (orphaned) -> ./roles-generic.html --> +<ul><li data-testname="el-li-in-ul" data-expectedrole="listitem" class="ex">x</li><li>x</li></ul> +<ol><li data-testname="el-li-in-ol" data-expectedrole="listitem" class="ex">x</li><li>x</li></ol> + +<!-- link (not mapped) --> +<main data-testname="el-main" data-expectedrole="main" class="ex">x</main> +<!-- map (not mapped) --> +<mark data-testname="el-mark" data-expectedrole="mark" class="ex">x</mark> +<!-- todo: math --> +<menu data-testname="el-menu" data-expectedrole="list" class="ex"><li>x</li></menu> +<!-- meta (not mapped) --> +<meter data-testname="el-meter" data-expectedrole="meter" class="ex" min="0" max="100" low="20" high="80" optimum="60" value="50">x</meter> +<nav data-testname="el-nav" data-expectedrole="navigation" class="ex">x</nav> +<!-- noscript (not mapped) --> +<!-- object (not mapped) --> +<ol data-testname="el-ol" data-expectedrole="list" class="ex"><li>x</li><li>x</li></ol> + +<!-- optgroup -> ./fragile/optgroup-role.html --> + +<!-- option --> +<select> + <option data-testname="el-option" data-expectedrole="option" class="ex">x</option> + <option>x</option> +</select> + +<output data-testname="el-output" data-expectedrole="status" class="ex">x</output> +<p data-testname="el-p" data-expectedrole="paragraph" class="ex">x</p> +<!-- param (not mapped) --> +<!-- todo: picture --> +<!-- pre -> ./roles-generic.html --> +<progress data-testname="el-progress" data-expectedrole="progressbar" class="ex">x</progress> +<!-- q -> ./roles-generic.html --> +<!-- todo: rp -> /ruby-aam? --> +<!-- todo: rt -> /ruby-aam? --> +<!-- todo: ruby -> /ruby-aam? --> +<s data-testname="el-s" data-expectedrole="deletion" class="ex">x</s> +<!-- samp -> ./roles-generic.html --> +<!-- script (not mapped) --> +<search data-testname="el-search" data-expectedrole="search" class="ex">x</search> +<!-- section -> ./roles-contextual.html --> + +<!-- Blocked: HTML-AAM Issue #467 --> +<!-- <select data-testname="el-select-combobox" data-expectedrole="combobox" class="ex"><option>a1</option><option>a2</option></select>--> + +<select data-testname="el-select-listbox" size="2" data-expectedrole="listbox" class="ex"><option>b1</option><option>b2</option></select> + +<!-- slot (not mapped) --> +<!-- small -> ./roles-generic.html --> +<!-- source (not mapped) --> +<!-- span -> ./roles-generic.html --> +<strong data-testname="el-strong" data-expectedrole="strong" class="ex">x</strong> +<!-- style (not mapped) --> +<sub data-testname="el-sub" data-expectedrole="subscript" class="ex">x</sub> +<!-- todo: summary --> +<sup data-testname="el-sup" data-expectedrole="superscript" class="ex">x</sup> +<!-- todo: svg (see /graphics-aam and /svg-aam tests) --> +<!-- table -> ./table-roles.html --> +<!-- tbody -> ./table-roles.html --> +<!-- td -> ./table-roles.html --> +<!-- template (not mapped) --> +<!-- tfoot -> ./table-roles.html --> +<!-- th -> ./table-roles.html --> +<!-- thead -> ./table-roles.html --> +<time data-testname="el-time" data-expectedrole="time" class="ex">x</time> +<!-- title (not mapped) --> +<!-- tr -> ./table-roles.html --> +<textarea data-testname="el-textarea" data-expectedrole="textbox" class="ex">x</textarea> +<!-- track (not mapped) --> +<!-- u -> ./roles-generic.html --> +<ul data-testname="el-ul" data-expectedrole="list" class="ex"><li>x</li><li>x</li></ul> +<!-- var (not mapped) --> +<!-- todo: video --> +<!-- wbr (not mapped) --> + +<script> +AriaUtils.verifyRolesBySelector(".ex"); +AriaUtils.verifyGenericRolesBySelector(".ex-generic"); +</script> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html-aam/roles.tentative.html b/testing/web-platform/tests/html-aam/roles.tentative.html new file mode 100644 index 0000000000..a3eb850497 --- /dev/null +++ b/testing/web-platform/tests/html-aam/roles.tentative.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> +<head> + <title>HTML-AAM 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 the computedrole mappings defined in <a href="https://w3c.github.io/html-aam/">HTML-AAM</a>. Most test names correspond to a unique ID defined in the spec.<p> + +<p>These should remain in alphabetical order, and include all HTML tagnames. If a tag is not tested here, include a pointer to the file where it is tested, such as: <code><!-- caption -> ./table-roles.html --></code></p> + +<input type="checkbox" switch data-testname="el-input-checkbox-switch" data-expectedrole="switch" class="ex"> + +<script> +AriaUtils.verifyRolesBySelector(".ex"); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/html-aam/table-roles.html b/testing/web-platform/tests/html-aam/table-roles.html new file mode 100644 index 0000000000..a81caa3d3f --- /dev/null +++ b/testing/web-platform/tests/html-aam/table-roles.html @@ -0,0 +1,53 @@ +<!doctype html> +<html> +<head> + <title>HTML-AAM 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 the computedrole mappings for the table-related roles defined in <a href="https://w3c.github.io/html-aam/">HTML-AAM</a>. Most test names correspond to unique ID defined in the spec.<p> + +<!-- ARIA table roles tested in wpt/wai-aria/role/table-roles.html --> + +<table data-testname="el-table" data-expectedrole="table" class="ex"> + <caption data-testname="el-caption" data-expectedrole="caption" class="ex">caption</caption> + <thead data-testname="el-thead" data-expectedrole="rowgroup" class="ex"> + <tr data-testname="el-tr-thead" data-expectedrole="row" class="ex"> + <th data-testname="el-th" data-expectedrole="columnheader" class="ex">a</th> + <th>b</th> + <th>c</th> + </tr> + </thead> + <tbody data-testname="el-tbody" data-expectedrole="rowgroup" class="ex"> + <tr data-testname="el-tr-tbody" data-expectedrole="row" class="ex"> + <th data-testname="el-th-in-row" data-expectedrole="rowheader" class="ex">1</th> + <td data-testname="el-td" data-expectedrole="cell" class="ex">2</td> + <td>3</td> + </tr> + <tr> + <th>4</th> + <td>5</td> + <td>6</td> + </tr> + </tbody> + <tfoot data-testname="el-tfoot" data-expectedrole="rowgroup" class="ex"> + <tr> + <th>x</th> + <th>y</th> + <th>z</th> + </tr> + </tfoot> +</table> + +<script> +AriaUtils.verifyRolesBySelector(".ex"); +</script> + +</body> +</html>
\ No newline at end of file |