From b9897f1bfea4115eac9a3f3b32cc632cfecb0563 Mon Sep 17 00:00:00 2001
From: sideshowbarker <mike@w3.org>
Date: Tue, 19 Nov 2024 21:14:36 +0900
Subject: [PATCH] =?UTF-8?q?LibWeb:=20Fix=20accessible-name=20computation?=
 =?UTF-8?q?=20for=20=E2=80=9Cencapsulation=E2=80=9D=20cases?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This change makes Ladybird correctly handle all “encapsulation” tests in
the https://wpt.fyi/results/accname/name/comp_host_language_label.html
set of tests in WPT.

Those all test the requirement that when computing the accessible name
for a <label>-ed form control, then any content (text content or
attribute values) from the control itself that would otherwise be
included in the accessible-name computation for it ancestor <label> must
instead be skipped and not included.

The HTML-AAM spec seems to try to achieve that result by expressing
specific steps for each particular type of form control. But what all
that reduces/optimizes/simplifies down to is just, “skip over self”.

Otherwise, without this change, Ladybird includes that “self” content
from those “encapsulated” elements when doing accessible-name
computation for the elements — which results in AT users hearing
unexpected extra content in the accessible names for those elements.
---
 Libraries/LibWeb/DOM/Node.cpp                 |   9 +
 .../accname/name/comp_host_language_label.txt |  88 ++++++++++
 .../name/comp_host_language_label.html        | 166 ++++++++++++++++++
 3 files changed, 263 insertions(+)
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/accname/name/comp_host_language_label.txt
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/accname/name/comp_host_language_label.html

diff --git a/Libraries/LibWeb/DOM/Node.cpp b/Libraries/LibWeb/DOM/Node.cpp
index 8f0e5330901e..67ec312a65de 100644
--- a/Libraries/LibWeb/DOM/Node.cpp
+++ b/Libraries/LibWeb/DOM/Node.cpp
@@ -2290,6 +2290,15 @@ ErrorOr<String> Node::name_or_description(NameOrDescription target, Document con
             for (u32 i = 0; i < labels->length(); i++) {
                 auto nodes = labels->item(i)->children_as_vector();
                 for (auto const& node : nodes) {
+                    // AD-HOC: https://wpt.fyi/results/accname/name/comp_host_language_label.html has “encapsulation”
+                    // tests, from which can be induced a requirement that when computing the accessible name for a
+                    // <label>-ed form control (“embedded control”), then any content (text content or attribute values)
+                    // from the control itself that would otherwise be included in the accessible-name computation for
+                    // it ancestor <label> must instead be skipped and not included. The HTML-AAM spec seems to maybe
+                    // be trying to achieve that result by expressing specific steps for each particular type of form
+                    // control. But what all that reduces/optimizes/simplifies down to is just, “skip over self”.
+                    if (node == this)
+                        continue;
                     if (node->is_element()) {
                         auto const& element = static_cast<DOM::Element const&>(*node);
                         auto role = element.role_or_default();
diff --git a/Tests/LibWeb/Text/expected/wpt-import/accname/name/comp_host_language_label.txt b/Tests/LibWeb/Text/expected/wpt-import/accname/name/comp_host_language_label.txt
new file mode 100644
index 000000000000..e4a77fac695e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/accname/name/comp_host_language_label.txt
@@ -0,0 +1,88 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 78 tests
+
+78 Pass
+Details
+Result	Test Name	MessagePass	html: input[type=button]	
+Pass	html: input[type=image]	
+Pass	html: input[type=reset]	
+Pass	html: input[type=submit]	
+Pass	html: label[for] input[type=checkbox]	
+Pass	html: label[for] input[type=checkbox][value='test']	
+Pass	html: label[for] input[type=checkbox][checked]	
+Pass	html: label[for] input[type=checkbox][checked][value='test']	
+Pass	html: label[for] input[type=color]	
+Pass	html: label[for] input[type=color][value='#999999']	
+Pass	html: label[for] input[type=date]	
+Pass	html: label[for] input[type=date][value='2025-01-01']	
+Pass	html: label[for] input[type=datetime-local]	
+Pass	html: label[for] input[type=datetime-local][value='2025-01-01T00:01']	
+Pass	html: label[for] input[type=email]	
+Pass	html: label[for] input[type=email][value='test@test.com']	
+Pass	html: label[for] input[type=month]	
+Pass	html: label[for] input[type=month][value='2025-01']	
+Pass	html: label[for] input[type=number]	
+Pass	html: label[for] input[type=number][value=2025]	
+Pass	html: label[for] input[type=password]	
+Pass	html: label[for] input[type=password][value='test']	
+Pass	html: label[for] input[type=radio]	
+Pass	html: label[for] input[type=radio][value='test']	
+Pass	html: label[for] input[type=range]	
+Pass	html: label[for] input[type=range][min=0][max=10][value=5]	
+Pass	html: label[for] input[type=search]	
+Pass	html: label[for] input[type=search][value='test']	
+Pass	html: label[for] input[type=tel]	
+Pass	html: label[for] input[type=tel][value='123-45-678']	
+Pass	html: label[for] input[type=text]	
+Pass	html: label[for] input[type=text][value='test']	
+Pass	html: label[for] input[type=time]	
+Pass	html: label[for] input[type=time][value='00:01']	
+Pass	html: label[for] input[type=url]	
+Pass	html: label[for] input[type=url][value='https://www.w3.org']	
+Pass	html: label[for] input[type=week]	
+Pass	html: label[for] input[type=week][value='2025-W01']	
+Pass	html: label input[type=checkbox] encapsulation	
+Pass	html: label input[type=checkbox][value='test'] encapsulation	
+Pass	html: label input[type=checkbox][checked] encapsulation	
+Pass	html: label input[type=checkbox][value='test'][checked] encapsulation	
+Pass	html: label input[type=color] encapsulation	
+Pass	html: label input[type=color][value='#999999'] encapsulation	
+Pass	html: label input[type=date] encapsulation	
+Pass	html: label input[type=date][value='2025-01-01'] encapsulation	
+Pass	html: label input[type=datetime-local] encapsulation	
+Pass	html: label input[type=datetime-local][value='2025-01-01T00:01'] encapsulation	
+Pass	html: label input[type=email] encapsulation	
+Pass	html: label input[type=email][value='test@test.com'] encapsulation	
+Pass	html: label input[type=month] encapsulation	
+Pass	html: label input[type=month][value='2025-01'] encapsulation	
+Pass	html: label input[type=number] encapsulation	
+Pass	html: label input[type=number][value=1] encapsulation	
+Pass	html: label input[type=password] encapsulation	
+Pass	html: label input[type=password][value='test'] encapsulation	
+Pass	html: label input[type=radio] encapsulation	
+Pass	html: label input[type=radio][value='test'] encapsulation	
+Pass	html: label input[type=range] encapsulation	
+Pass	html: label input[type=range][value='5'][min='0'][max='10'] encapsulation	
+Pass	html: label input[type=search] encapsulation	
+Pass	html: label input[type=search][value='test'] encapsulation	
+Pass	html: label input[type=tel] encapsulation	
+Pass	html: label input[type=tel][value='123-45-678'] encapsulation	
+Pass	html: label[for] input[type=text] encapsulation	
+Pass	html: label[for] input[type=text][value='test'] encapsulation	
+Pass	html: label input[type=time] encapsulation	
+Pass	html: label input[type=time][value='00:01'] encapsulation	
+Pass	html: label input[type=url] encapsulation	
+Pass	html: label input[type=url][value='https://www.w3.org'] encapsulation	
+Pass	html: label input[type=week] encapsulation	
+Pass	html: label input[type=week][value='2025-W01'] encapsulation	
+Pass	html: select for/id	
+Pass	html: select encapsulation	
+Pass	html: img[alt] (non-empty)	
+Pass	html: picture > img[alt] (non-empty)	
+Pass	html: fieldset > legend	
+Pass	html: table > caption	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/accname/name/comp_host_language_label.html b/Tests/LibWeb/Text/input/wpt-import/accname/name/comp_host_language_label.html
new file mode 100644
index 000000000000..2bb85d9682fc
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/accname/name/comp_host_language_label.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+<title>Name Comp: Host Language Label</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>
+<h1>AccName: Host Language Label Tests</h1>
+<p>Tests the <a href="https://w3c.github.io/accname/#comp_host_language_label">#comp_host_language_label</a> portions of the AccName <em>Name Computation</em> algorithm.</p>
+<h2>HTML input with value, alt, etc.</h2>
+<input class="ex" data-expectedlabel="button label" data-testname="html: input[type=button]" type="button" value="button label"/>
+<input alt="image input label" class="ex" data-expectedlabel="image input label" data-testname="html: input[type=image]" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" type="image"/>
+<input class="ex" data-expectedlabel="reset label" data-testname="html: input[type=reset]" type="reset" value="reset label"/>
+<input class="ex" data-expectedlabel="submit label" data-testname="html: input[type=submit]" type="submit" value="submit label"/>
+<h2>HTML input label/for</h2>
+<!-- above: input[type=button] -->
+<label for="cb">checkbox label</label><input class="ex" data-expectedlabel="checkbox label" data-testname="html: label[for] input[type=checkbox]" id="cb" type="checkbox"/><br/>
+<label for="cbv">checkbox label with non-empty value</label><input class="ex" data-expectedlabel="checkbox label with non-empty value" data-testname="html: label[for] input[type=checkbox][value='test']" id="cbv" type="checkbox" value="test"/><br/>
+<label for="cbc">checkbox label checked</label><input checked="" class="ex" data-expectedlabel="checkbox label checked" data-testname="html: label[for] input[type=checkbox][checked]" id="cbc" type="checkbox"/><br/>
+<label for="cbcv">checkbox label checked with non-empty value</label><input checked="" class="ex" data-expectedlabel="checkbox label checked with non-empty value" data-testname="html: label[for] input[type=checkbox][checked][value='test']" id="cbcv" type="checkbox" value="test"/><br/>
+<label for="co">color label</label><input class="ex" data-expectedlabel="color label" data-testname="html: label[for] input[type=color]" id="co" type="color"/><br/>
+<label for="cov">color label with non-empty value</label><input class="ex" data-expectedlabel="color label with non-empty value" data-testname="html: label[for] input[type=color][value='#999999']" id="cov" type="color" value="#999999"/><br/>
+<label for="da">date label</label><input class="ex" data-expectedlabel="date label" data-testname="html: label[for] input[type=date]" id="da" type="date"/><br/>
+<label for="dav">date label with non-empty value</label><input class="ex" data-expectedlabel="date label with non-empty value" data-testname="html: label[for] input[type=date][value='2025-01-01']" id="dav" type="date" value="2025-01-01"/><br/>
+<label for="dtl">datetime-local label</label><input class="ex" data-expectedlabel="datetime-local label" data-testname="html: label[for] input[type=datetime-local]" id="dtl" type="date"/><br/>
+<label for="dtlv">datetime-local label with non-empty value</label><input class="ex" data-expectedlabel="datetime-local label with non-empty value" data-testname="html: label[for] input[type=datetime-local][value='2025-01-01T00:01']" id="dtlv" type="date" value="2025-01-01T00:01"/><br/>
+<label for="em">email label</label><input class="ex" data-expectedlabel="email label" data-testname="html: label[for] input[type=email]" id="em" type="email"/><br/>
+<label for="emv">email label with non-empty value</label><input class="ex" data-expectedlabel="email label with non-empty value" data-testname="html: label[for] input[type=email][value='test@test.com']" id="emv" type="email" value="test@test.com"/><br/>
+<!-- todo: results for input[type=file] currently differ in all engines -->
+<!--
+<label for="fi">file label</label><input id="fi" type="file" data-expectedlabel="file label" data-testname="html: label[for] input[type=file]" class="ex"><br>
+-->
+<!-- skipped: input[type=hidden] for/id n/a -->
+<!-- above: input[type=image] -->
+<label for="mo">month label</label><input class="ex" data-expectedlabel="month label" data-testname="html: label[for] input[type=month]" id="mo" type="month"/><br/>
+<label for="mov">month label with non-empty value</label><input class="ex" data-expectedlabel="month label with non-empty value" data-testname="html: label[for] input[type=month][value='2025-01']" id="mov" type="month" value="2025-01"/><br/>
+<label for="n">number label</label><input class="ex" data-expectedlabel="number label" data-testname="html: label[for] input[type=number]" id="n" type="number"/><br/>
+<label for="nv">number label with non-empty value</label><input class="ex" data-expectedlabel="number label with non-empty value" data-testname="html: label[for] input[type=number][value=2025]" id="nv" type="number" value="2025"/><br/>
+<label for="pw">password label</label><input class="ex" data-expectedlabel="password label" data-testname="html: label[for] input[type=password]" id="pw" type="password"/><br/>
+<label for="pwv">password label with non-empty value</label><input class="ex" data-expectedlabel="password label with non-empty value" data-testname="html: label[for] input[type=password][value='test']" id="pwv" type="password" value="test"/><br/>
+<label for="ra">radio label</label><input class="ex" data-expectedlabel="radio label" data-testname="html: label[for] input[type=radio]" id="ra" type="radio"/><br/>
+<label for="rav">radio label with non-empty value</label><input class="ex" data-expectedlabel="radio label with non-empty value" data-testname="html: label[for] input[type=radio][value='test']" id="rav" type="radio" value="test"/><br/>
+<label for="rng">range label</label><input class="ex" data-expectedlabel="range label" data-testname="html: label[for] input[type=range]" id="rng" type="range"/><br/>
+<label for="rngv">range label with non-empty value</label><input class="ex" data-expectedlabel="range label with non-empty value" data-testname="html: label[for] input[type=range][min=0][max=10][value=5]" id="rngv" max="10" min="0" type="range" value="5"/><br/>
+<!-- input[type=reset] above -->
+<label for="search">search label</label><input class="ex" data-expectedlabel="search label" data-testname="html: label[for] input[type=search]" id="search" type="search"/><br/>
+<label for="searchv">search label with non-empty value</label><input class="ex" data-expectedlabel="search label with non-empty value" data-testname="html: label[for] input[type=search][value='test']" id="searchv" type="search" value="test"/><br/>
+<!-- input[type=submit] above -->
+<label for="tel">tel label</label><input class="ex" data-expectedlabel="tel label" data-testname="html: label[for] input[type=tel]" id="tel" type="tel"/><br/>
+<label for="telv">tel label with non-empty value</label><input class="ex" data-expectedlabel="tel label with non-empty value" data-testname="html: label[for] input[type=tel][value='123-45-678']" id="telv" type="tel" value="123-45-678"/><br/>
+<label for="t">textfield label</label><input class="ex" data-expectedlabel="textfield label" data-testname="html: label[for] input[type=text]" id="t" type="text"/><br/>
+<label for="tv">textfield label with non-empty value</label><input class="ex" data-expectedlabel="textfield label with non-empty value" data-testname="html: label[for] input[type=text][value='test']" id="tv" type="text" value="test"/><br/>
+<label for="time">time label</label><input class="ex" data-expectedlabel="time label" data-testname="html: label[for] input[type=time]" id="time" type="time"/><br/>
+<label for="timev">time label with non-empty value</label><input class="ex" data-expectedlabel="time label with non-empty value" data-testname="html: label[for] input[type=time][value='00:01']" id="timev" type="time" value="00:01"/><br/>
+<label for="url">url label</label><input class="ex" data-expectedlabel="url label" data-testname="html: label[for] input[type=url]" id="url" type="url"/><br/>
+<label for="urlv">url label with non-empty value</label><input class="ex" data-expectedlabel="url label with non-empty value" data-testname="html: label[for] input[type=url][value='https://www.w3.org']" id="urlv" type="url" value="https://www.w3.org"/><br/>
+<label for="week">week label</label><input class="ex" data-expectedlabel="week label" data-testname="html: label[for] input[type=week]" id="week" type="week"/><br/>
+<label for="weekv">week label with non-empty value</label><input class="ex" data-expectedlabel="week label with non-empty value" data-testname="html: label[for] input[type=week][value='2025-W01']" id="weekv" type="week" value="2025-W01"/><br/>
+<h2>HTML input label encapsulation</h2>
+<!-- above: input[type=button] -->
+<label><input class="ex" data-expectedlabel="checkbox label" data-testname="html: label input[type=checkbox] encapsulation" type="checkbox"/>checkbox label</label><br/>
+<label><input class="ex" data-expectedlabel="checkbox label with non-empty value" data-testname="html: label input[type=checkbox][value='test'] encapsulation" type="checkbox" value="test"/>checkbox label with non-empty value</label><br/>
+<label><input checked="" class="ex" data-expectedlabel="checkbox label checked" data-testname="html: label input[type=checkbox][checked] encapsulation" type="checkbox"/>checkbox label checked</label><br/>
+<label><input checked="" class="ex" data-expectedlabel="checkbox label checked with non-empty value" data-testname="html: label input[type=checkbox][value='test'][checked] encapsulation" type="checkbox" value="test"/>checkbox label checked with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="color label" data-testname="html: label input[type=color] encapsulation" type="color"/>color label</label><br/>
+<label><input class="ex" data-expectedlabel="color label with non-empty value" data-testname="html: label input[type=color][value='#999999'] encapsulation" type="color" value="#999999"/>color label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="date label" data-testname="html: label input[type=date] encapsulation" type="date"/>date label</label><br/>
+<label><input class="ex" data-expectedlabel="date label with non-empty value" data-testname="html: label input[type=date][value='2025-01-01'] encapsulation" type="date" value="2025-01-01"/>date label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="datetime-local label" data-testname="html: label input[type=datetime-local] encapsulation" type="datetime-local"/>datetime-local label</label><br/>
+<label><input class="ex" data-expectedlabel="datetime-local label with non-empty value" data-testname="html: label input[type=datetime-local][value='2025-01-01T00:01'] encapsulation" type="datetime-local" value="2025-01-01T00:01"/>datetime-local label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="email label" data-testname="html: label input[type=email] encapsulation" type="email"/>email label</label><br/>
+<label><input class="ex" data-expectedlabel="email label with non-empty value" data-testname="html: label input[type=email][value='test@test.com'] encapsulation" type="email" value="test@test.com"/>email label with non-empty value</label><br/>
+<!-- todo: results for input[type=file] currently differ in all engines -->
+<!--
+<label><input type="file" data-expectedlabel="file label" data-testname="html: label input[type=file] encapsulation" class="ex">file label</label><br>
+-->
+<!-- skipped: input[type=hidden] n/a -->
+<!-- above: input[type=image] -->
+<label><input class="ex" data-expectedlabel="month label" data-testname="html: label input[type=month] encapsulation" type="month"/>month label</label><br/>
+<label><input class="ex" data-expectedlabel="month label with non-empty value" data-testname="html: label input[type=month][value='2025-01'] encapsulation" type="month" value="2025-01"/>month label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="number label" data-testname="html: label input[type=number] encapsulation" type="number"/>number label</label><br/>
+<label><input class="ex" data-expectedlabel="number label with non-empty value" data-testname="html: label input[type=number][value=1] encapsulation" type="number" value="1"/>number label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="password label" data-testname="html: label input[type=password] encapsulation" type="password"/>password label</label><br/>
+<label><input class="ex" data-expectedlabel="password label with non-empty value" data-testname="html: label input[type=password][value='test'] encapsulation" type="password" value="test"/>password label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="radio label" data-testname="html: label input[type=radio] encapsulation" type="radio"/>radio label</label><br/>
+<label><input class="ex" data-expectedlabel="radio label with non-empty value" data-testname="html: label input[type=radio][value='test'] encapsulation" type="radio" value="test"/>radio label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="range label" data-testname="html: label input[type=range] encapsulation" type="range"/>range label</label><br/>
+<label><input class="ex" data-expectedlabel="range label with non-empty value" data-testname="html: label input[type=range][value='5'][min='0'][max='10'] encapsulation" max="10" min="0" type="range" value="5"/>range label with non-empty value</label><br/>
+<!-- above: input[type=reset] -->
+<label><input class="ex" data-expectedlabel="search label" data-testname="html: label input[type=search] encapsulation" type="search"/>search label</label><br/>
+<label><input class="ex" data-expectedlabel="search label with non-empty value" data-testname="html: label input[type=search][value='test'] encapsulation" type="search" value="test"/>search label with non-empty value</label><br/>
+<!-- above: input[type=submit] -->
+<label><input class="ex" data-expectedlabel="tel label" data-testname="html: label input[type=tel] encapsulation" type="tel"/>tel label</label><br/>
+<label><input class="ex" data-expectedlabel="tel label with non-empty value" data-testname="html: label input[type=tel][value='123-45-678'] encapsulation" type="tel" value="123-45-678"/>tel label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="textfield label" data-testname="html: label[for] input[type=text] encapsulation" type="text"/>textfield label</label><br/>
+<label><input class="ex" data-expectedlabel="textfield label with non-empty value" data-testname="html: label[for] input[type=text][value='test'] encapsulation" type="text" value="test"/>textfield label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="time label" data-testname="html: label input[type=time] encapsulation" type="time"/>time label</label><br/>
+<label><input class="ex" data-expectedlabel="time label with non-empty value" data-testname="html: label input[type=time][value='00:01'] encapsulation" type="time" value="00:01"/>time label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="url label" data-testname="html: label input[type=url] encapsulation" type="url"/>url label</label><br/>
+<label><input class="ex" data-expectedlabel="url label with non-empty value" data-testname="html: label input[type=url][value='https://www.w3.org'] encapsulation" type="url" value="https://www.w3.org"/>url label with non-empty value</label><br/>
+<label><input class="ex" data-expectedlabel="week label" data-testname="html: label input[type=week] encapsulation" type="week"/>week label</label><br/>
+<label><input class="ex" data-expectedlabel="week label with non-empty value" data-testname="html: label input[type=week][value='2025-W01'] encapsulation" type="week" value="2025-W01"/>week label with non-empty value</label><br/>
+<!-- skipped: skip textarea for v1 since all engines fail in different ways. need to verify label/textarea is expected. -->
+<!--
+<h2>HTML textarea</h2>
+<label for="ta">textarea label</label><textarea data-expectedlabel="textarea label" data-testname="html: label[for] textarea" class="ex"></textarea><br>
+<label for="ta">textarea label<textarea data-expectedlabel="textarea label" data-testname="html: textarea encapsulation" class="ex"></textarea></label><br>
+-->
+<h2>HTML select</h2>
+<!-- todo: select for/id -->
+<label for="select">select label</label>
+<select class="ex" data-expectedlabel="select label" data-testname="html: select for/id" id="select">
+<option>foo</option>
+</select>
+<br/>
+<!-- select encapsulation -->
+<label>
+  select label
+  <select class="ex" data-expectedlabel="select label" data-testname="html: select encapsulation">
+<option>foo</option>
+</select>
+</label><br/>
+<!-- todo: select labeled by selected option. All engines currently fail in different ways. Not sure which is correct. -->
+<!--
+<select data-expectedlabel="select label" data-testname="html: select w/selected option" class="ex">
+  <option>foo</option>
+  <option selected>select label</option>
+  <option>bar</option>
+</select>
+<br>
+-->
+<h2>HTML img/picture</h2>
+<!-- skipped: img:not([alt]) -->
+<!-- skipped: img[alt=""] -->
+<img alt="image label" class="ex" data-expectedlabel="image label" data-testname="html: img[alt] (non-empty)" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
+<picture>
+<source srcset="#"/>
+<img alt="picture label" class="ex" data-expectedlabel="picture label" data-testname="html: picture &gt; img[alt] (non-empty)" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
+</picture>
+<!-- elsewhere: image map area alt -> ./fragile/area-alt.html -->
+<h2>HTML fieldset/legend</h2>
+<fieldset class="ex" data-expectedlabel="fieldset legend label" data-testname="html: fieldset &gt; legend">
+<legend>fieldset legend label</legend>
+<input type="text"/><br/>
+</fieldset>
+<h2>HTML table/caption</h2>
+<table class="ex" data-expectedlabel="table caption label" data-testname="html: table &gt; caption">
+<caption>table caption label</caption>
+<tr><th>a</th><th>b</th><th>c</th></tr>
+<tr><th>1</th><td>2</td><td>3</td></tr>
+</table>
+<!-- SVG: -> /svg-aam/name/ -->
+<!-- todo: Ruby? -->
+<!-- todo: MathML? -->
+<!-- todo: does HTML input[placeholder="foo"] count as a host language labeling mechanism? -->
+<script>
+AriaUtils.verifyLabelsBySelector(".ex");
+</script>
+</body>
+</html>