mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-21 15:10:19 +00:00
Merge 928101482b into d6bcd3fb0b
This commit is contained in:
sideshowbarker
GitHub
commit
d9d09f769b
3 changed files with 298 additions and 0 deletions
|
|
@ -36,11 +36,14 @@
|
|||
#include <LibWeb/HTML/CustomElements/CustomElementReactionNames.h>
|
||||
#include <LibWeb/HTML/HTMLAnchorElement.h>
|
||||
#include <LibWeb/HTML/HTMLDocument.h>
|
||||
#include <LibWeb/HTML/HTMLFieldSetElement.h>
|
||||
#include <LibWeb/HTML/HTMLImageElement.h>
|
||||
#include <LibWeb/HTML/HTMLInputElement.h>
|
||||
#include <LibWeb/HTML/HTMLLegendElement.h>
|
||||
#include <LibWeb/HTML/HTMLSelectElement.h>
|
||||
#include <LibWeb/HTML/HTMLSlotElement.h>
|
||||
#include <LibWeb/HTML/HTMLStyleElement.h>
|
||||
#include <LibWeb/HTML/HTMLTableElement.h>
|
||||
#include <LibWeb/HTML/Navigable.h>
|
||||
#include <LibWeb/HTML/NavigableContainer.h>
|
||||
#include <LibWeb/HTML/Parser/HTMLParser.h>
|
||||
|
|
@ -2280,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();
|
||||
|
|
@ -2360,6 +2372,38 @@ ErrorOr<String> Node::name_or_description(NameOrDescription target, Document con
|
|||
// HTMLLabelElement is already handled (by the code for step C. “Embedded Control” above) in conformance
|
||||
// with the spec requirements — and if not, then add handling for it here.
|
||||
}
|
||||
// https://w3c.github.io/html-aam/#table-element-accessible-name-computation
|
||||
// if the table element has a child that is a caption element, then use the subtree of the first such element
|
||||
if (is<HTML::HTMLTableElement>(*element))
|
||||
if (auto& table = (const_cast<HTML::HTMLTableElement&>(static_cast<HTML::HTMLTableElement const&>(*element))); table.caption())
|
||||
return table.caption()->text_content().value();
|
||||
// https://w3c.github.io/html-aam/#table-element-accessible-name-computation
|
||||
// if the fieldset element has a child that is a legend element, then use the subtree of the first such element
|
||||
if (is<HTML::HTMLFieldSetElement>(*element)) {
|
||||
Optional<String> legend;
|
||||
auto& fieldset = (const_cast<HTML::HTMLFieldSetElement&>(static_cast<HTML::HTMLFieldSetElement const&>(*element)));
|
||||
fieldset.for_each_child_of_type<HTML::HTMLLegendElement>([&](HTML::HTMLLegendElement const& element) mutable {
|
||||
legend = element.text_content().value();
|
||||
return IterationDecision::Break;
|
||||
});
|
||||
if (legend.has_value())
|
||||
return legend.value();
|
||||
}
|
||||
if (is<HTML::HTMLInputElement>(*element)) {
|
||||
auto& input = (const_cast<HTML::HTMLInputElement&>(static_cast<HTML::HTMLInputElement const&>(*element)));
|
||||
// https://w3c.github.io/html-aam/#input-type-image-accessible-name-computation
|
||||
// Otherwise use the value attribute.
|
||||
if (input.type_state() == HTML::HTMLInputElement::TypeAttributeState::Button
|
||||
|| input.type_state() == HTML::HTMLInputElement::TypeAttributeState::SubmitButton
|
||||
|| input.type_state() == HTML::HTMLInputElement::TypeAttributeState::ResetButton)
|
||||
if (auto value = input.get_attribute(HTML::AttributeNames::value); value.has_value())
|
||||
return value.value();
|
||||
// https://w3c.github.io/html-aam/#input-type-image-accessible-name-computation
|
||||
// Otherwise use alt attribute if present and its value is not the empty string.
|
||||
if (input.type_state() == HTML::HTMLInputElement::TypeAttributeState::ImageButton)
|
||||
if (auto alt = element->get_attribute(HTML::AttributeNames::alt); alt.has_value())
|
||||
return alt.release_value();
|
||||
}
|
||||
|
||||
// F. Otherwise, if the current node's role allows name from content, or if the current node is referenced by aria-labelledby, aria-describedby, or is a native host language text alternative element (e.g. label in HTML), or is a descendant of a native host language text alternative element:
|
||||
if ((role.has_value() && ARIA::allows_name_from_content(role.value())) || is_referenced || is_descendant == IsDescendant::Yes) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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 > 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 > 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 > 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>
|
||||
Loading…
Reference in a new issue