beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-24 00:20:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Fix accessible-name computation for “encapsulation” cases

Browse source 
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.
This commit is contained in:
sideshowbarker 2024-11-19 21:14:36 +09:00
parent 032396ba4d
commit 928101482b
No known key found for this signature in database
3 changed files with 263 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Libraries/LibWeb/DOM/Node.cpp
View file

@ -2283,6 +2283,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();

88
Tests/LibWeb/Text/expected/wpt-import/accname/name/comp_host_language_label.txt Normal file
View file

@ -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

166
Tests/LibWeb/Text/input/wpt-import/accname/name/comp_host_language_label.html Normal file
View file

@ -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>