commit 5bd8277cfe35be4c2eed9bf3fc3ff6228da29062
parent 771ac28b36637a86154b826ace7b23a2469c728b
Author: Eitan Isaacson <eitan@monotonous.org>
Date: Tue, 18 Nov 2025 18:13:45 +0000
Bug 2000098 - P3: Migrate mochitest/name/test_general.html. r=morgan
Differential Revision: https://phabricator.services.mozilla.com/D272548
Diffstat:
3 files changed, 722 insertions(+), 788 deletions(-)
diff --git a/accessible/tests/browser/name_and_description/browser_name_markup.js b/accessible/tests/browser/name_and_description/browser_name_markup.js
@@ -505,3 +505,725 @@ markupTests.forEach(({ id, ruleset, markup, expected }) =>
{ iframe: true, remoteIframe: true }
)
);
+
+/**
+ * Generic test cases ported from mochitest/name/test_general.html
+ */
+addAccessibleTask(
+ `
+ <!-- aria-label, simple label -->
+ <span id="btn_simple_aria_label" role="button" aria-label="I am a button"/>
+ <br/>
+ <!-- aria-label plus aria-labelledby -->
+ <span id="btn_both_aria_labels" role="button" aria-label="I am a button, two"
+ aria-labelledby="labelledby_text btn_both_aria_labels"/>
+ <br/>
+
+ <!-- aria-labelledby, single relation -->
+ <span id="labelledby_text">text</span>
+ <button id="btn_labelledby_text"
+ aria-labelledby="labelledby_text">1</button>
+ <br/>
+
+ <!-- aria-labelledby, multiple relations -->
+ <span id="labelledby_text1">text1</span>
+ <span id="labelledby_text2">text2</span>
+ <button id="btn_labelledby_texts"
+ aria-labelledby="labelledby_text1 labelledby_text2">2</button>
+ <br/>
+
+ <!-- name from named accessible -->
+ <input id="labelledby_namedacc" type="checkbox"
+ aria-label="Data" />
+ <input id="input_labelledby_namedacc"
+ aria-labelledby="labelledby_namedacc" />
+
+ <!-- the name from subtree, mixed content -->
+ <span id="labelledby_mixed">no<span>more text</span></span>
+ <button id="btn_labelledby_mixed"
+ aria-labelledby="labelledby_mixed">3</button>
+ <br/>
+
+ <!-- the name from subtree, mixed/hidden content -->
+ <span id="labelledby_mixed_hidden_child">
+ no<span>more
+ <span style="display: none;">hidden</span>
+ text2
+ <span style="visibility: hidden">hidden2</span>
+ </span>
+ </span>
+ <button id="btn_labelledby_mixed_hidden_child"
+ aria-labelledby="labelledby_mixed_hidden_child">3.1</button>
+ <br/>
+
+ <!-- the name from subtree, mixed/completely hidden content -->
+ <span id="labelledby_mixed_hidden"
+ style="display: none;">lala <span>more hidden </span>text</span>
+ <button id="btn_labelledby_mixed_hidden"
+ aria-labelledby="labelledby_mixed_hidden">3.2</button>
+ <br/>
+
+ <!-- the name from subtree, mixed content, block structure -->
+ <div id="labelledby_mixed_block"><div>text</div>more text</div></div>
+ <button id="btn_labelledby_mixed_block"
+ aria-labelledby="labelledby_mixed_block">4</button>
+ <br/>
+
+ <!-- the name from subtree, mixed content, table structure -->
+ <table><tr>
+ <td id="labelledby_mixed_table">text<span>TEXT</span>text</td>
+ </tr></table>
+ <button id="btn_labelledby_mixed_table"
+ aria-labelledby="labelledby_mixed_table">5</button>
+ <br/>
+
+ <!-- the name from subtree, child img -->
+ <span id="labelledby_mixed_img">text<img alt="image"/></span>
+ <button id="btn_labelledby_mixed_img"
+ aria-labelledby="labelledby_mixed_img">6</button>
+ <br/>
+
+ <!-- the name from subtree, child inputs -->
+ <span id="labelledby_mixed_input">
+ <input type="button" id="input_button" title="input button"/>
+ <input type="submit" id="input_submit"/>
+ <input type="reset" id="input_reset"/>
+ <input type="image" id="input_image" title="input image"/>
+ </span>
+ <button id="btn_labelledby_mixed_input"
+ aria-labelledby="labelledby_mixed_input">7</button>
+ <br/>
+
+ <!-- the name from subtree, child object -->
+ <span id="labelledby_mixed_object">
+ <object data="about:blank" title="object"></object>
+ </span>
+ <button id="btn_labelledby_mixed_object"
+ aria-labelledby="labelledby_mixed_object">8</button>
+ <br/>
+
+ <!-- the name from subtree, child br -->
+ <span id="labelledby_mixed_br">text<br/>text</span>
+ <button id="btn_labelledby_mixed_br"
+ aria-labelledby="labelledby_mixed_br">9</button>
+ <br/>
+
+ <!-- the name from subtree, name from label content rather than from its title
+ attribute -->
+ <label for="from_label_ignoretitle"
+ title="Select your country of origin">Country:</label>
+ <select id="from_label_ignoretitle">
+ <option>Germany</option>
+ <option>Russia</option>
+ </select>
+
+ <!-- the name from subtree, name from html:p content rather than from its
+ title attribute -->
+ <p id="p_ignoretitle"
+ title="Select your country of origin">Choose country from.</p>
+ <select id="from_p_ignoretitle" aria-labelledby="p_ignoretitle">
+ <option>Germany</option>
+ <option>Russia</option>
+ </select>
+
+ <!-- the name from subtree, name from html:input value rather than from its
+ title attribute -->
+ <p id="from_input_ignoretitle" aria-labelledby="input_ignoretitle">Country</p>
+ <input id="input_ignoretitle"
+ value="Custom country"
+ title="Input your country of origin"/>
+
+ <!-- name from subtree, surround control by spaces to not jam the text -->
+ <label id="insert_spaces_around_control">
+ start<input value="value">end
+ </label>
+
+ <!-- no name from subtree because it holds whitespaces only -->
+ <a id="from_label_ignore_ws_subtree" href="about:mozilla" title="about"> </a>
+
+ <!-- Don't use subtree unless referenced by aria-labelledby. -->
+ <div id="alert" role="alert">Error</div>
+ <input type="text" id="inputLabelledByAlert" aria-labelledby="alert">
+
+ <!-- label element, label contains control -->
+ <label>text<button id="btn_label_inside">10</button>text</label>
+ <br/>
+
+ <!-- label element, label and the button are in the same form -->
+ <form>
+ <label for="btn_label_inform">in form</label>
+ <button id="btn_label_inform">11</button>
+ </form>
+
+ <!-- label element, label is outside of the form of the button -->
+ <label for="btn_label_outform">out form</label>
+ <form>
+ <button id="btn_label_outform">12</button>
+ </form>
+
+ <!-- label element, label and the button are in the same document -->
+ <label for="btn_label_indocument">in document</label>
+ <button id="btn_label_indocument">13</button>
+
+ <!-- multiple label elements for single button -->
+ <label for="btn_label_multi">label1</label>
+ <label for="btn_label_multi">label2</label>
+ <button id="btn_label_multi">button</button>
+
+ <!-- a label containing more than one controls -->
+ <label>
+ Enable <input id="ctrl_in_label_1" type="checkbox"> a
+ <input id="ctrl_in_label_2" type="button" value="button"> control
+ </label>
+
+ <!-- name from children -->
+ <span id="btn_children" role="button">14</span>
+
+ <!-- no name from content, ARIA role overrides this rule -->
+ <button id="btn_nonamefromcontent" role="img">1</button>
+
+ <!-- name from children, hidden children -->
+ <div role="listbox" tabindex="0">
+ <div id="lb_opt1_children_hidden" role="option" tabindex="0">
+ <span>i am visible</span>
+ <span style="display:none">i am hidden</span>
+ </div>
+ </div>
+
+ <table role="menu">
+ <tr role="menuitem" id="tablemenuitem">
+ <td>menuitem 1</td>
+ </tr>
+ <tr role="menuitem">
+ <td>menuitem 2</td>
+ </tr>
+ </table>
+
+ <label id="label_with_acronym">
+ <acronym title="O A T F">OATF</acronym>
+ <abbr title="World Wide Web">WWW</abbr>
+ </label>
+
+ <div id="testArticle" role="article" title="Test article">
+ <p>This is a paragraph inside the article.</p>
+ </div>
+
+ <h1 id="h1" title="oops">heading</h1>
+ <div role="heading" id="aria_heading">aria_heading</div>
+
+ <!-- name from title attribute -->
+ <span id="btn_title" role="group" title="title">15</span>
+
+ <!-- A textarea nested in a label with a text child (bug #453371). -->
+ <form>
+ <label>Story
+ <textarea id="textareawithchild" name="name">Foo</textarea>
+ is ended.
+ </label>
+ </form>
+
+ <!-- controls having a value used as part of computed name -->
+ <input type="checkbox" id="ctrlvalue_progressbar:input">
+ <label for="ctrlvalue_progressbar:input">
+ foo <span role="progressbar"
+ aria-valuenow="5" aria-valuemin="1"
+ aria-valuemax="10">5</span> baz
+ </label>
+
+ <input type="checkbox" id="ctrlvalue_scrollbar:input" />
+ <label for="ctrlvalue_scrollbar:input">
+ foo <span role="scrollbar"
+ aria-valuenow="5" aria-valuemin="1"
+ aria-valuemax="10">5</span> baz
+ </label>
+
+ <input type="checkbox" id="ctrlvalue_slider:input">
+ <label for="ctrlvalue_slider:input">
+ foo <input role="slider" type="range"
+ value="5" min="1" max="10"
+ aria-valuenow="5" aria-valuemin="1"
+ aria-valuemax="10"> baz
+ </label>
+
+ <input type="checkbox" id="ctrlvalue_spinbutton:input">
+ <label for="ctrlvalue_spinbutton:input">
+ foo <input role="spinbutton" type="number"
+ value="5" min="1" max="10"
+ aria-valuenow="5" aria-valuemin="1"
+ aria-valuemax="10">
+ baz
+ </label>
+
+ <input type="checkbox" id="ctrlvalue_combobox:input">
+ <label for="ctrlvalue_combobox:input">
+ foo
+ <div role="combobox">
+ <div role="textbox"></div>
+ <ul role="listbox" style="list-style-type: none;">
+ <li role="option">1</li>
+ <li role="option" aria-selected="true">5</li>
+ <li role="option">3</li>
+ </ul>
+ </div>
+ baz
+ </label>
+
+ <input type="checkbox" id="ctrlvalue_meter:input">
+ <label for="ctrlvalue_meter:input">
+ foo
+ <meter>5</meter>
+ baz
+ </label>
+
+ <!-- a label with a nested control in the start, middle and end -->
+ <form>
+ <!-- at the start (without and with whitespaces) -->
+ <label id="comboinstart"><select id="combo3">
+ <option>One</option>
+ <option>Two</option>
+ </select>
+ day(s).
+ </label>
+
+ <label id="textboxinstart">
+ <input id="textbox1" value="Two">
+ days.
+ </label>
+
+ <!-- in the middle -->
+ <label id="comboinmiddle">
+ Subscribe to
+ <select id="combo4" name="occupation">
+ <option>ATOM</option>
+ <option>RSS</option>
+ </select>
+ feed.
+ </label>
+
+ <label id="comboinmiddle2" for="checkbox">Play the
+ <select id="combo5">
+ <option>Haliluya</option>
+ <option>Hurra</option>
+ </select>
+ sound when new mail arrives
+ </label>
+ <input id="checkbox" type="checkbox" />
+
+ <label id="comboinmiddle3" for="combo6">Play the
+ <select id="combo6">
+ <option>Haliluya</option>
+ <option>Hurra</option>
+ </select>
+ sound when new mail arrives
+ </label>
+
+ <!-- at the end (without and with whitespaces) -->
+ <label id="comboinend">
+ This day was
+ <select id="combo7" name="occupation">
+ <option>sunny</option>
+ <option>rainy</option>
+ </select></label>
+
+ <label id="textboxinend">
+ This day was
+ <input id="textbox2" value="sunny">
+ </label>
+ </form>
+
+ <!-- placeholder -->
+ <input id="ph_password" type="password" value="" placeholder="a placeholder" />
+ <input id="ph_text" type="text" placeholder="a placeholder" />
+ <textarea id="ph_textarea" cols="5" placeholder="a placeholder"></textarea>
+
+ <!-- placeholder does not win -->
+ <input id="ph_text2" type="text" aria-label="a label" placeholder="meh" />
+ <textarea id="ph_textarea2" cols="5" aria-labelledby="ph_text2"
+ placeholder="meh"></textarea>
+
+ <label for="ph_text3">a label</label>
+ <input id="ph_text3" placeholder="meh" />
+
+ <p>Image:
+ <img id="img_eq" role="math" src="foo" alt="x^2 + y^2 + z^2">
+ <input type="image" id="input_img_eq" src="foo" alt="x^2 + y^2 + z^2">
+ </p>
+
+ <p>Text:
+ <span id="txt_eq" role="math" title="x^2 + y^2 + z^2">x<sup>2</sup> +
+ y<sup>2</sup> + z<sup>2</sup></span>
+ </p>
+
+ <!-- duplicate announcement -->
+ <div id="test_note" role="note">subtree</div>
+
+ <!-- No name for tr from its sub tree -->
+ <table><tr id="NoNameForTR"><th>a</th><td>b</td></tr></table>
+ <table style="display: block;">
+ <tr id="NoNameForNonStandardTR" style="display:block;">
+ <th>a</th><td>b</td>
+ </tr>
+ </table>
+
+ <!-- Name from sub tree of tr, because it has a strong ARIA role -->
+ <table><tr id="NameForTRBecauseStrongARIA" role="row"><th>a</th><td>b</td></tr></table>
+
+ <!-- No name for tr because of weak (landmark) role -->
+ <table><tr id="NoNameForTRBecauseWeakARIA" role="main"><th>a</th><td>b</td></tr></table>
+
+ <!-- Name from subtree of grouping if requested by other object -->
+ <div id="grouping" role="group">label</div>
+ <button id="requested_name_from_grouping" aria-labelledby="grouping"></button>
+ <!-- Name from sub tree of tbody marked as display:block;, which is also a grouping -->
+ <div role="list">
+ <div id="listitem_containing_block_tbody" role="listitem">
+ <table>
+ <tbody style="display: block;">
+ <tr><td>label</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <!-- Name from subtree of treeitem containing grouping -->
+ <div role="tree">
+ <div id="treeitem_containing_grouping" role="treeitem" aria-level="1" aria-expanded="true">root
+ <div role="group">
+ <div role="treeitem" aria-level="2">sub</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Name from subtree of grouping labelled by an ancestor. -->
+ <div id="grouping_ancestor_label">label
+ <div id="grouping_labelledby_ancestor" role="group" aria-labelledby="grouping_ancestor_label">
+ This content should not be included in the grouping's label.
+ </div>
+ </div>
+
+ <!-- Text nodes and inline elements. -->
+ <div role="listbox">
+ <div id="container_text_inline" role="option">a<strong>b</strong>c</div>
+ <!-- Text nodes and block elements. -->
+ <div id="container_text_block" role="option">a<p>b</p>c</div>
+ <!-- Text nodes and empty block elements. -->
+ <div id="container_text_emptyblock" role="option">a<p></p><p></p>b</div>
+ </div>
+
+ <!-- aria-labelledby referring to a slot -->
+ <div id="shadowHost">
+ shadowButtonVisibleText
+ <span slot="hiddenSlot">shadowButtonHiddenText</span>
+ </div>
+ <template id="shadowTemplate">
+ <input type="button" id="shadowButtonVisibleText" aria-labelledby="visibleSlot">
+ <slot id="visibleSlot"></slot>
+ <input type="button" id="shadowButtonHiddenText" aria-labelledby="hiddenSlot">
+ <slot id="hiddenSlot" name="hiddenSlot" hidden></slot>
+ </template>
+
+ <!-- aria-labelledby referring to a hidden container with script/style -->
+ <button id="buttonScriptStyle" aria-labelledby="hiddenScriptStyle"></button>
+ <div id="hiddenScriptStyle" hidden>
+ <script> 42; </script>
+ <style> .noOp {} </style>
+ <span>content</span>
+ </div>
+
+ <!-- Name from subtree on link including <code>, etc. -->
+ <a id="linkWithCodeSupSubInsDel" href="#">
+ before
+ <code>code</code>
+ <sup>sup</sup>
+ <sub>sub</sub>
+ <ins>ins</ins>
+ <del>del</del>
+ after
+ </a>
+`,
+ async function testGeneric(browser, docAcc) {
+ // aria-label
+ function testName_(id, expectedName) {
+ const acc = findAccessibleChildByID(docAcc, id);
+ testName(acc, expectedName);
+ }
+
+ // Simple label provided via ARIA
+ testName_("btn_simple_aria_label", "I am a button");
+
+ // aria-label and aria-labelledby, expect aria-labelledby
+ testName_("btn_both_aria_labels", "text I am a button, two");
+
+ // ////////////////////////////////////////////////////////////////////////
+ // aria-labelledby
+
+ // Single relation. The value of 'aria-labelledby' contains the ID of
+ // an element. Gets the name from text node of that element.
+ testName_("btn_labelledby_text", "text");
+
+ // Multiple relations. The value of 'aria-labelledby' contains the IDs
+ // of elements. Gets the name from text nodes of those elements.
+ testName_("btn_labelledby_texts", "text1 text2");
+
+ // ////////////////////////////////////////////////////////////////////////
+ // Name from named accessible
+
+ testName_("input_labelledby_namedacc", "Data");
+
+ // ////////////////////////////////////////////////////////////////////////
+ // Name from subtree (single relation labelled_by).
+
+ // Gets the name from text nodes contained by nested elements
+ testName_("btn_labelledby_mixed", "nomore text");
+
+ // Gets the name from text nodes contained by nested elements, ignores
+ // hidden elements (bug 443081).
+ testName_("btn_labelledby_mixed_hidden_child", "nomore text2");
+
+ // Gets the name from hidden text nodes contained by nested elements,
+ // (label element is hidden entirely), (bug 443081).
+ testName_("btn_labelledby_mixed_hidden", "lala more hidden text");
+
+ // Gets the name from text nodes contained by nested elements having block
+ // representation (every text node value in the name should be divided by
+ // spaces)
+ testName_("btn_labelledby_mixed_block", "text more text");
+
+ // Gets the name from text nodes contained by html:td. The text nodes
+ // should not be divided by spaces.
+ testName_("btn_labelledby_mixed_table", "textTEXTtext");
+
+ // Gets the name from image accessible.
+ testName_("btn_labelledby_mixed_img", "text image");
+
+ // Gets the name from input accessibles
+ // Note: if input have label elements then the name isn't calculated
+ // from them.
+ testName_(
+ "btn_labelledby_mixed_input",
+ "input button Submit Query Reset Submit Query"
+ );
+
+ // Gets the name from the title of object element.
+ testName_("btn_labelledby_mixed_object", "object");
+
+ // Gets the name from text nodes. Element br adds space between them.
+ testName_("btn_labelledby_mixed_br", "text text");
+
+ // Gets the name from label content which allows name from subtree,
+ // ignore @title attribute on label
+ testName_("from_label_ignoretitle", "Country:");
+
+ // Gets the name from html:p content, which doesn't allow name from
+ // subtree, ignore @title attribute on label
+ testName_("from_p_ignoretitle", "Choose country from.");
+
+ // Gets the name from html:input value, ignore @title attribute on input
+ testName_("from_input_ignoretitle", "Custom country");
+
+ // Insert spaces around the control's value to not jam sibling text nodes
+ testName_("insert_spaces_around_control", "start value end");
+
+ // Gets the name from @title, ignore whitespace content
+ testName_("from_label_ignore_ws_subtree", "about");
+
+ // role="alert" doesn't get name from subtree...
+ testName_("alert", null);
+ // but the subtree is used if referenced by aria-labelledby.
+ testName_("inputLabelledByAlert", "Error");
+
+ // ////////////////////////////////////////////////////////////////////////
+ // label element
+
+ // The label element contains the button. The name of the button is
+ // calculated from the content of the label.
+ // Note: the name does not contain the content of the button.
+ testName_("btn_label_inside", "texttext");
+
+ // The label element and the button are placed in the same form. Gets
+ // the name from the label subtree.
+ testName_("btn_label_inform", "in form");
+
+ // The label element is placed outside of form where the button is.
+ // Take into account the label.
+ testName_("btn_label_outform", "out form");
+
+ // The label element and the button are in the same document. Gets the
+ // name from the label subtree.
+ testName_("btn_label_indocument", "in document");
+
+ // Multiple label elements for single button
+ testName_("btn_label_multi", "label1 label2");
+
+ // Multiple controls inside a label element
+ testName_("ctrl_in_label_1", "Enable a button control");
+ testName_("ctrl_in_label_2", "button");
+
+ // ////////////////////////////////////////////////////////////////////////
+ // name from children
+
+ // ARIA role button is presented allowing the name calculation from
+ // children.
+ testName_("btn_children", "14");
+
+ // html:button, no name from content
+ testName_("btn_nonamefromcontent", null);
+
+ // ARIA role option is presented allowing the name calculation from
+ // visible children (bug 443081).
+ testName_("lb_opt1_children_hidden", "i am visible");
+
+ // Get the name from subtree of menuitem crossing role nothing to get
+ // the name from its children.
+ testName_("tablemenuitem", "menuitem 1");
+
+ // Get the name from child acronym title attribute rather than from
+ // acronym content.
+ testName_("label_with_acronym", "O A T F World Wide Web");
+
+ testName_("testArticle", "Test article");
+
+ testName_("h1", "heading");
+ testName_("aria_heading", "aria_heading");
+
+ // ////////////////////////////////////////////////////////////////////////
+ // title attribute
+
+ // If nothing is left. Let's try title attribute.
+ testName_("btn_title", "title");
+
+ // ////////////////////////////////////////////////////////////////////////
+ // textarea name
+
+ // textarea's name should not have the value, which initially is specified
+ // by a text child.
+ testName_("textareawithchild", "Story is ended.");
+
+ // new textarea name should not reflect the value change.
+ let valueChanged = waitForEvent(
+ EVENT_TEXT_VALUE_CHANGE,
+ "textareawithchild"
+ );
+ await invokeContentTask(browser, [], () => {
+ content.document.getElementById("textareawithchild").value = "Bar";
+ });
+ await valueChanged;
+
+ testName_("textareawithchild", "Story is ended.");
+
+ // ////////////////////////////////////////////////////////////////////////
+ // controls having a value used as a part of computed name
+
+ testName_("ctrlvalue_progressbar:input", "foo 5 baz");
+ testName_("ctrlvalue_scrollbar:input", "foo 5 baz");
+ testName_("ctrlvalue_slider:input", "foo 5 baz");
+ testName_("ctrlvalue_spinbutton:input", "foo 5 baz");
+ testName_("ctrlvalue_combobox:input", "foo 5 baz");
+ testName_("ctrlvalue_meter:input", "foo 5 baz");
+
+ // ///////////////////////////////////////////////////////////////////////
+ // label with nested combobox (test for 'f' item of name computation guide)
+
+ testName_("comboinstart", "One day(s).");
+ testName_("combo3", "day(s).");
+
+ testName_("textboxinstart", "Two days.");
+ testName_("textbox1", "days.");
+
+ testName_("comboinmiddle", "Subscribe to ATOM feed.");
+ testName_("combo4", "Subscribe to feed.");
+
+ testName_(
+ "comboinmiddle2",
+ "Play the Haliluya sound when new mail arrives"
+ );
+ testName_("combo5", null); // label isn't used as a name for control
+ testName_("checkbox", "Play the Haliluya sound when new mail arrives");
+ testName_(
+ "comboinmiddle3",
+ "Play the Haliluya sound when new mail arrives"
+ );
+ testName_("combo6", "Play the sound when new mail arrives");
+
+ testName_("comboinend", "This day was sunny");
+ testName_("combo7", "This day was");
+
+ testName_("textboxinend", "This day was sunny");
+ testName_("textbox2", "This day was");
+
+ // placeholder
+ testName_("ph_password", "a placeholder");
+ testName_("ph_text", "a placeholder");
+ testName_("ph_textarea", "a placeholder");
+ testName_("ph_text2", "a label");
+ testName_("ph_textarea2", "a label");
+ testName_("ph_text3", "a label");
+
+ // Test equation image
+ testName_("img_eq", "x^2 + y^2 + z^2");
+ testName_("input_img_eq", "x^2 + y^2 + z^2");
+ testName_("txt_eq", "x^2 + y^2 + z^2");
+
+ // //////////////////////////////////////////////////////////////////////
+ // tests for duplicate announcement of content
+
+ testName_("test_note", null);
+
+ // //////////////////////////////////////////////////////////////////////
+ // Tests for name from sub tree of tr element.
+
+ // By default, we want no name.
+ testName_("NoNameForTR", null);
+ testName_("NoNameForNonStandardTR", null);
+
+ // But we want it if the tr has an ARIA role.
+ testName_("NameForTRBecauseStrongARIA", "a b");
+
+ // But not if it is a weak (landmark) ARIA role
+ testName_("NoNameForTRBecauseWeakARIA", null);
+
+ // Name from sub tree of grouping if requested by other accessible.
+ testName_("grouping", null);
+ testName_("requested_name_from_grouping", "label");
+ testName_("listitem_containing_block_tbody", "label");
+ // Groupings shouldn't be included when calculating from the subtree of
+ // a treeitem.
+ testName_("treeitem_containing_grouping", "root");
+
+ // Name from subtree of grouping labelled by an ancestor.
+ testName_("grouping_labelledby_ancestor", "label");
+
+ // Name from subtree of a container containing text nodes and inline
+ // elements. There should be no spaces because everything is inline.
+ testName_("container_text_inline", "abc");
+ // Name from subtree of a container containing text nodes and block
+ // elements. There should be a space on both sides of the block.
+ testName_("container_text_block", "a b c");
+ // Name from subtree of a container containing text nodes and empty
+ // block elements. There should be space on either side of the blocks, but
+ // not a double space.
+ testName_("container_text_emptyblock", "a b");
+
+ let reordered = waitForEvent(EVENT_REORDER, "shadowHost");
+ await invokeContentTask(browser, [], () => {
+ const shadowHost = content.document.getElementById("shadowHost");
+ const shadowRoot = shadowHost.attachShadow({ mode: "open" });
+ shadowRoot.append(
+ content.document
+ .getElementById("shadowTemplate")
+ .content.cloneNode(true)
+ );
+ });
+ await reordered;
+
+ const shadowRoot = findAccessibleChildByID(docAcc, "shadowHost");
+ testName(shadowRoot.firstChild, "shadowButtonVisibleText");
+ testName(shadowRoot.lastChild, "shadowButtonHiddenText");
+
+ // Label from a hidden element containing script and style elements.
+ testName_("buttonScriptStyle", "content");
+
+ // Name from subtree on a link containing <code>, etc.
+ testName_("linkWithCodeSupSubInsDel", "before code sup sub ins del after");
+ },
+ { topLevel: true, chrome: true }
+);
diff --git a/accessible/tests/mochitest/name/a11y.toml b/accessible/tests/mochitest/name/a11y.toml
@@ -9,8 +9,6 @@ support-files = [
["test_counterstyle.html"]
-["test_general.html"]
-
["test_general.xhtml"]
["test_link.html"]
diff --git a/accessible/tests/mochitest/name/test_general.html b/accessible/tests/mochitest/name/test_general.html
@@ -1,786 +0,0 @@
-<html>
-
-<head>
- <title>nsIAccessible::name calculation</title>
- <link rel="stylesheet" type="text/css"
- href="chrome://mochikit/content/tests/SimpleTest/test.css" />
-
- <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-
- <script type="application/javascript"
- src="../common.js"></script>
- <script type="application/javascript"
- src="../name.js"></script>
-
- <script type="application/javascript">
-
- function doTest() {
- // aria-label
-
- // Simple label provided via ARIA
- testName("btn_simple_aria_label", "I am a button");
-
- // aria-label and aria-labelledby, expect aria-labelledby
- testName("btn_both_aria_labels", "text I am a button, two");
-
- // ////////////////////////////////////////////////////////////////////////
- // aria-labelledby
-
- // Single relation. The value of 'aria-labelledby' contains the ID of
- // an element. Gets the name from text node of that element.
- testName("btn_labelledby_text", "text");
-
- // Multiple relations. The value of 'aria-labelledby' contains the IDs
- // of elements. Gets the name from text nodes of those elements.
- testName("btn_labelledby_texts", "text1 text2");
-
- // ////////////////////////////////////////////////////////////////////////
- // Name from named accessible
-
- testName("input_labelledby_namedacc", "Data");
-
- // ////////////////////////////////////////////////////////////////////////
- // Name from subtree (single relation labelled_by).
-
- // Gets the name from text nodes contained by nested elements
- testName("btn_labelledby_mixed", "nomore text");
-
- // Gets the name from text nodes contained by nested elements, ignores
- // hidden elements (bug 443081).
- testName("btn_labelledby_mixed_hidden_child", "nomore text2");
-
- // Gets the name from hidden text nodes contained by nested elements,
- // (label element is hidden entirely), (bug 443081).
- testName("btn_labelledby_mixed_hidden", "lala more hidden text");
-
- // Gets the name from text nodes contained by nested elements having block
- // representation (every text node value in the name should be devided by
- // spaces)
- testName("btn_labelledby_mixed_block", "text more text");
-
- // Gets the name from text nodes contained by html:td. The text nodes
- // should not be divided by spaces.
- testName("btn_labelledby_mixed_table", "textTEXTtext");
-
- // Gets the name from image accessible.
- testName("btn_labelledby_mixed_img", "text image");
-
- // Gets the name from input accessibles
- // Note: if input have label elements then the name isn't calculated
- // from them.
- testName("btn_labelledby_mixed_input",
- "input button Submit Query Reset Submit Query");
-
- // Gets the name from the title of object element.
- testName("btn_labelledby_mixed_object", "object");
-
- // Gets the name from text nodes. Element br adds space between them.
- testName("btn_labelledby_mixed_br", "text text");
-
- // Gets the name from label content which allows name from subtree,
- // ignore @title attribute on label
- testName("from_label_ignoretitle", "Country:");
-
- // Gets the name from html:p content, which doesn't allow name from
- // subtree, ignore @title attribute on label
- testName("from_p_ignoretitle", "Choose country from.");
-
- // Gets the name from html:input value, ignore @title attribute on input
- testName("from_input_ignoretitle", "Custom country");
-
- // Insert spaces around the control's value to not jamm sibling text nodes
- testName("insert_spaces_around_control", "start value end");
-
- // Gets the name from @title, ignore whitespace content
- testName("from_label_ignore_ws_subtree", "about");
-
- // role="alert" doesn't get name from subtree...
- testName("alert", null);
- // but the subtree is used if referenced by aria-labelledby.
- testName("inputLabelledByAlert", "Error");
-
- // ////////////////////////////////////////////////////////////////////////
- // label element
-
- // The label element contains the button. The name of the button is
- // calculated from the content of the label.
- // Note: the name does not contain the content of the button.
- testName("btn_label_inside", "texttext");
-
- // The label element and the button are placed in the same form. Gets
- // the name from the label subtree.
- testName("btn_label_inform", "in form");
-
- // The label element is placed outside of form where the button is.
- // Take into account the label.
- testName("btn_label_outform", "out form");
-
- // The label element and the button are in the same document. Gets the
- // name from the label subtree.
- testName("btn_label_indocument", "in document");
-
- // Multiple label elements for single button
- testName("btn_label_multi", "label1 label2");
-
- // Multiple controls inside a label element
- testName("ctrl_in_label_1", "Enable a button control");
- testName("ctrl_in_label_2", "button");
-
-
- // ////////////////////////////////////////////////////////////////////////
- // name from children
-
- // ARIA role button is presented allowing the name calculation from
- // children.
- testName("btn_children", "14");
-
- // html:button, no name from content
- testName("btn_nonamefromcontent", null);
-
- // ARIA role option is presented allowing the name calculation from
- // visible children (bug 443081).
- testName("lb_opt1_children_hidden", "i am visible");
-
- // Get the name from subtree of menuitem crossing role nothing to get
- // the name from its children.
- testName("tablemenuitem", "menuitem 1");
-
- // Get the name from child acronym title attribute rather than from
- // acronym content.
- testName("label_with_acronym", "O A T F World Wide Web");
-
- testName("testArticle", "Test article");
-
- testName("h1", "heading");
- testName("aria_heading", "aria_heading");
-
- // ////////////////////////////////////////////////////////////////////////
- // title attribute
-
- // If nothing is left. Let's try title attribute.
- testName("btn_title", "title");
-
- // ////////////////////////////////////////////////////////////////////////
- // textarea name
-
- // textarea's name should not have the value, which initially is specified
- // by a text child.
- testName("textareawithchild", "Story is ended.");
-
- // new textarea name should not reflect the value change.
- var elem = document.getElementById("textareawithchild");
- elem.value = "Bar";
-
- testName("textareawithchild", "Story is ended.");
-
- // ////////////////////////////////////////////////////////////////////////
- // controls having a value used as a part of computed name
-
- testName("ctrlvalue_progressbar:input", "foo 5 baz");
- testName("ctrlvalue_scrollbar:input", "foo 5 baz");
- testName("ctrlvalue_slider:input", "foo 5 baz");
- testName("ctrlvalue_spinbutton:input", "foo 5 baz");
- testName("ctrlvalue_combobox:input", "foo 5 baz");
- testName("ctrlvalue_meter:input", "foo 5 baz");
-
-
- // ///////////////////////////////////////////////////////////////////////
- // label with nested combobox (test for 'f' item of name computation guide)
-
- testName("comboinstart", "One day(s).");
- testName("combo3", "day(s).");
-
- testName("textboxinstart", "Two days.");
- testName("textbox1", "days.");
-
- testName("comboinmiddle", "Subscribe to ATOM feed.");
- testName("combo4", "Subscribe to feed.");
-
- testName("comboinmiddle2", "Play the Haliluya sound when new mail arrives");
- testName("combo5", null); // label isn't used as a name for control
- testName("checkbox", "Play the Haliluya sound when new mail arrives");
- testName("comboinmiddle3", "Play the Haliluya sound when new mail arrives");
- testName("combo6", "Play the sound when new mail arrives");
-
- testName("comboinend", "This day was sunny");
- testName("combo7", "This day was");
-
- testName("textboxinend", "This day was sunny");
- testName("textbox2", "This day was");
-
- // placeholder
- testName("ph_password", "a placeholder");
- testName("ph_text", "a placeholder");
- testName("ph_textarea", "a placeholder");
- testName("ph_text2", "a label");
- testName("ph_textarea2", "a label");
- testName("ph_text3", "a label");
-
- // Test equation image
- testName("img_eq", "x^2 + y^2 + z^2");
- testName("input_img_eq", "x^2 + y^2 + z^2");
- testName("txt_eq", "x^2 + y^2 + z^2");
-
- // //////////////////////////////////////////////////////////////////////
- // tests for duplicate announcement of content
-
- testName("test_note", null);
-
- // //////////////////////////////////////////////////////////////////////
- // Tests for name from sub tree of tr element.
-
- // By default, we want no name.
- testName("NoNameForTR", null);
- testName("NoNameForNonStandardTR", null);
-
- // But we want it if the tr has an ARIA role.
- testName("NameForTRBecauseStrongARIA", "a b");
-
- // But not if it is a weak (landmark) ARIA role
- testName("NoNameForTRBecauseWeakARIA", null);
-
- // Name from sub tree of grouping if requested by other accessible.
- testName("grouping", null);
- testName("requested_name_from_grouping", "label");
- testName("listitem_containing_block_tbody", "label");
- // Groupings shouldn't be included when calculating from the subtree of
- // a treeitem.
- testName("treeitem_containing_grouping", "root");
-
- // Name from subtree of grouping labelled by an ancestor.
- testName("grouping_labelledby_ancestor", "label");
-
- // Name from subtree of a container containing text nodes and inline
- // elements. There should be no spaces because everyhing is inline.
- testName("container_text_inline", "abc");
- // Name from subtree of a container containing text nodes and block
- // elements. There should be a space on both sides of the block.
- testName("container_text_block", "a b c");
- // Name from subtree of a container containing text nodes and empty
- // block elements. There should be space on either side of the blocks, but
- // not a double space.
- testName("container_text_emptyblock", "a b");
-
- const shadowRoot = getNode("shadowHost").shadowRoot;
- const shadowButtonVisibleText = shadowRoot.getElementById("shadowButtonVisibleText");
- testName(shadowButtonVisibleText, "shadowButtonVisibleText");
- const shadowButtonHiddenText = shadowRoot.getElementById("shadowButtonHiddenText");
- testName(shadowButtonHiddenText, "shadowButtonHiddenText");
-
- // Label from a hidden element containing script and style elements.
- testName("buttonScriptStyle", "content");
-
- // Name from subtree on a link containing <code>, etc.
- testName("linkWithCodeSupSubInsDel", "before code sup sub ins del after");
-
- SimpleTest.finish();
- }
-
- SimpleTest.waitForExplicitFinish();
- addA11yLoadEvent(doTest);
- </script>
-
-</head>
-
-<body>
-
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=428479"
- title="Bug 428479 - Support ARIA role=math">
- Bug 428479
- </a>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=429666"
- title="Expose ROLE_DOCUMENT for ARIA landmarks that inherit from document">
- Bug 429666
- </a>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=444279"
- title="mochitest for accessible name calculating">
- Bug 444279
- </a>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=459635"
- title="nsIAccessible::name calculation for HTML buttons">
- Bug 459635
- </a>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=530081"
- title="Clean up our tree walker">
- Bug 530081
- </a><br>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=604391"
- title="Use placeholder as name if name is otherwise empty">
- Bug 604391
- </a>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=669312"
- title="Accessible name is duplicated when input has a label associated uisng for/id and is wrapped around the input">
- Bug 669312
- </a>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=704416"
- title="HTML acronym and abbr names should be provided by @title">
- Bug 704416
- </a>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=812041"
- title="ARIA slider and spinbutton don't provide a value for name computation">
- Bug 812041
- </a>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=823927"
- title="Text is jammed with control's text in name computation">
- Bug 823927
- </a>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=835666"
- title="ARIA combobox selected value is not a part of name computation">
- Bug 835666
- </a>
- <a target="_blank"
- href="https://bugzilla.mozilla.org/show_bug.cgi?id=833256"
- title="role note shouldn't pick up the name from subtree">
- Mozilla Bug 833256
- </a>
- <p id="display"></p>
- <div id="content" style="display: none"></div>
- <pre id="test">
- </pre>
-
- <!-- aria-label, simple label -->
- <span id="btn_simple_aria_label" role="button" aria-label="I am a button"/>
- <br/>
- <!-- aria-label plus aria-labelledby -->
- <span id="btn_both_aria_labels" role="button" aria-label="I am a button, two"
- aria-labelledby="labelledby_text btn_both_aria_labels"/>
- <br/>
-
- <!-- aria-labelledby, single relation -->
- <span id="labelledby_text">text</span>
- <button id="btn_labelledby_text"
- aria-labelledby="labelledby_text">1</button>
- <br/>
-
- <!-- aria-labelledby, multiple relations -->
- <span id="labelledby_text1">text1</span>
- <span id="labelledby_text2">text2</span>
- <button id="btn_labelledby_texts"
- aria-labelledby="labelledby_text1 labelledby_text2">2</button>
- <br/>
-
- <!-- name from named accessible -->
- <input id="labelledby_namedacc" type="checkbox"
- aria-label="Data" />
- <input id="input_labelledby_namedacc"
- aria-labelledby="labelledby_namedacc" />
-
- <!-- the name from subtree, mixed content -->
- <span id="labelledby_mixed">no<span>more text</span></span>
- <button id="btn_labelledby_mixed"
- aria-labelledby="labelledby_mixed">3</button>
- <br/>
-
- <!-- the name from subtree, mixed/hidden content -->
- <span id="labelledby_mixed_hidden_child">
- no<span>more
- <span style="display: none;">hidden</span>
- text2
- <span style="visibility: hidden">hidden2</span>
- </span>
- </span>
- <button id="btn_labelledby_mixed_hidden_child"
- aria-labelledby="labelledby_mixed_hidden_child">3.1</button>
- <br/>
-
- <!-- the name from subtree, mixed/completely hidden content -->
- <span id="labelledby_mixed_hidden"
- style="display: none;">lala <span>more hidden </span>text</span></span>
- <button id="btn_labelledby_mixed_hidden"
- aria-labelledby="labelledby_mixed_hidden">3.2</button>
- <br/>
-
- <!-- the name from subtree, mixed content, block structure -->
- <div id="labelledby_mixed_block"><div>text</div>more text</div></div>
- <button id="btn_labelledby_mixed_block"
- aria-labelledby="labelledby_mixed_block">4</button>
- <br/>
-
- <!-- the name from subtree, mixed content, table structure -->
- <table><tr>
- <td id="labelledby_mixed_table">text<span>TEXT</span>text</td>
- </tr></table>
- <button id="btn_labelledby_mixed_table"
- aria-labelledby="labelledby_mixed_table">5</button>
- <br/>
-
- <!-- the name from subtree, child img -->
- <span id="labelledby_mixed_img">text<img alt="image"/></span>
- <button id="btn_labelledby_mixed_img"
- aria-labelledby="labelledby_mixed_img">6</button>
- <br/>
-
- <!-- the name from subtree, child inputs -->
- <span id="labelledby_mixed_input">
- <input type="button" id="input_button" title="input button"/>
- <input type="submit" id="input_submit"/>
- <input type="reset" id="input_reset"/>
- <input type="image" id="input_image" title="input image"/>
- </span>
- <button id="btn_labelledby_mixed_input"
- aria-labelledby="labelledby_mixed_input">7</button>
- <br/>
-
- <!-- the name from subtree, child object -->
- <span id="labelledby_mixed_object">
- <object data="about:blank" title="object"></object>
- </span>
- <button id="btn_labelledby_mixed_object"
- aria-labelledby="labelledby_mixed_object">8</button>
- <br/>
-
- <!-- the name from subtree, child br -->
- <span id="labelledby_mixed_br">text<br/>text</span>
- <button id="btn_labelledby_mixed_br"
- aria-labelledby="labelledby_mixed_br">9</button>
- <br/>
-
- <!-- the name from subtree, name from label content rather than from its title
- attribute -->
- <label for="from_label_ignoretitle"
- title="Select your country of origin">Country:</label>
- <select id="from_label_ignoretitle">
- <option>Germany</option>
- <option>Russia</option>
- </select>
-
- <!-- the name from subtree, name from html:p content rather than from its
- title attribute -->
- <p id="p_ignoretitle"
- title="Select your country of origin">Choose country from.</p>
- <select id="from_p_ignoretitle" aria-labelledby="p_ignoretitle">
- <option>Germany</option>
- <option>Russia</option>
- </select>
-
- <!-- the name from subtree, name from html:input value rather than from its
- title attribute -->
- <p id="from_input_ignoretitle" aria-labelledby="input_ignoretitle">Country</p>
- <input id="input_ignoretitle"
- value="Custom country"
- title="Input your country of origin"/ >
-
- <!-- name from subtree, surround control by spaces to not jamm the text -->
- <label id="insert_spaces_around_control">
- start<input value="value">end
- </label>
-
- <!-- no name from subtree because it holds whitespaces only -->
- <a id="from_label_ignore_ws_subtree" href="about:mozilla" title="about"> </a>
-
- <!-- Don't use subtree unless referenced by aria-labelledby. -->
- <div id="alert" role="alert">Error</div>
- <input type="text" id="inputLabelledByAlert" aria-labelledby="alert">
-
- <!-- label element, label contains control -->
- <label>text<button id="btn_label_inside">10</button>text</label>
- <br/>
-
- <!-- label element, label and the button are in the same form -->
- <form>
- <label for="btn_label_inform">in form</label>
- <button id="btn_label_inform">11</button>
- </form>
-
- <!-- label element, label is outside of the form of the button -->
- <label for="btn_label_outform">out form</label>
- <form>
- <button id="btn_label_outform">12</button>
- </form>
-
- <!-- label element, label and the button are in the same document -->
- <label for="btn_label_indocument">in document</label>
- <button id="btn_label_indocument">13</button>
-
- <!-- multiple label elements for single button -->
- <label for="btn_label_multi">label1</label>
- <label for="btn_label_multi">label2</label>
- <button id="btn_label_multi">button</button>
-
- <!-- a label containing more than one controls -->
- <label>
- Enable <input id="ctrl_in_label_1" type="checkbox"> a
- <input id="ctrl_in_label_2" type="button" value="button"> control
- </label>
-
- <!-- name from children -->
- <span id="btn_children" role="button">14</span>
-
- <!-- no name from content, ARIA role overrides this rule -->
- <button id="btn_nonamefromcontent" role="img">1</button>
-
- <!-- name from children, hidden children -->
- <div role="listbox" tabindex="0">
- <div id="lb_opt1_children_hidden" role="option" tabindex="0">
- <span>i am visible</span>
- <span style="display:none">i am hidden</span>
- </div>
- </div>
-
- <table role="menu">
- <tr role="menuitem" id="tablemenuitem">
- <td>menuitem 1</td>
- </tr>
- <tr role="menuitem">
- <td>menuitem 2</td>
- </tr>
- </table>
-
- <label id="label_with_acronym">
- <acronym title="O A T F">OATF</acronym>
- <abbr title="World Wide Web">WWW</abbr>
- </label>
-
- <div id="testArticle" role="article" title="Test article">
- <p>This is a paragraph inside the article.</p>
- </div>
-
- <h1 id="h1" title="oops">heading</h1>
- <div role="heading" id="aria_heading">aria_heading</div>
-
- <!-- name from title attribute -->
- <span id="btn_title" role="group" title="title">15</span>
-
- <!-- A textarea nested in a label with a text child (bug #453371). -->
- <form>
- <label>Story
- <textarea id="textareawithchild" name="name">Foo</textarea>
- is ended.
- </label>
- </form>
-
- <!-- controls having a value used as part of computed name -->
- <input type="checkbox" id="ctrlvalue_progressbar:input">
- <label for="ctrlvalue_progressbar:input">
- foo <span role="progressbar"
- aria-valuenow="5" aria-valuemin="1"
- aria-valuemax="10">5</span> baz
- </label>
-
- <input type="checkbox" id="ctrlvalue_scrollbar:input" />
- <label for="ctrlvalue_scrollbar:input">
- foo <span role="scrollbar"
- aria-valuenow="5" aria-valuemin="1"
- aria-valuemax="10">5</span> baz
- </label>
-
- <input type="checkbox" id="ctrlvalue_slider:input">
- <label for="ctrlvalue_slider:input">
- foo <input role="slider" type="range"
- value="5" min="1" max="10"
- aria-valuenow="5" aria-valuemin="1"
- aria-valuemax="10"> baz
- </label>
-
- <input type="checkbox" id="ctrlvalue_spinbutton:input">
- <label for="ctrlvalue_spinbutton:input">
- foo <input role="spinbutton" type="number"
- value="5" min="1" max="10"
- aria-valuenow="5" aria-valuemin="1"
- aria-valuemax="10">
- baz
- </label>
-
- <input type="checkbox" id="ctrlvalue_combobox:input">
- <label for="ctrlvalue_combobox:input">
- foo
- <div role="combobox">
- <div role="textbox"></div>
- <ul role="listbox" style="list-style-type: none;">
- <li role="option">1</li>
- <li role="option" aria-selected="true">5</li>
- <li role="option">3</li>
- </ul>
- </div>
- baz
- </label>
-
- <input type="checkbox" id="ctrlvalue_meter:input">
- <label for="ctrlvalue_meter:input">
- foo
- <meter>5</meter>
- </div>
- baz
- </label>
-
- <!-- a label with a nested control in the start, middle and end -->
- <form>
- <!-- at the start (without and with whitespaces) -->
- <label id="comboinstart"><select id="combo3">
- <option>One</option>
- <option>Two</option>
- </select>
- day(s).
- </label>
-
- <label id="textboxinstart">
- <input id="textbox1" value="Two">
- days.
- </label>
-
- <!-- in the middle -->
- <label id="comboinmiddle">
- Subscribe to
- <select id="combo4" name="occupation">
- <option>ATOM</option>
- <option>RSS</option>
- </select>
- feed.
- </label>
-
- <label id="comboinmiddle2" for="checkbox">Play the
- <select id="combo5">
- <option>Haliluya</option>
- <option>Hurra</option>
- </select>
- sound when new mail arrives
- </label>
- <input id="checkbox" type="checkbox" />
-
- <label id="comboinmiddle3" for="combo6">Play the
- <select id="combo6">
- <option>Haliluya</option>
- <option>Hurra</option>
- </select>
- sound when new mail arrives
- </label>
-
- <!-- at the end (without and with whitespaces) -->
- <label id="comboinend">
- This day was
- <select id="combo7" name="occupation">
- <option>sunny</option>
- <option>rainy</option>
- </select></label>
-
- <label id="textboxinend">
- This day was
- <input id="textbox2" value="sunny">
- </label>
- </form>
-
- <!-- placeholder -->
- <input id="ph_password" type="password" value="" placeholder="a placeholder" />
- <input id="ph_text" type="text" placeholder="a placeholder" />
- <textarea id="ph_textarea" cols="5" placeholder="a placeholder"></textarea>
-
- <!-- placeholder does not win -->
- <input id="ph_text2" type="text" aria-label="a label" placeholder="meh" />
- <textarea id="ph_textarea2" cols="5" aria-labelledby="ph_text2"
- placeholder="meh"></textarea>
-
- <label for="ph_text3">a label</label>
- <input id="ph_text3" placeholder="meh" />
-
- <p>Image:
- <img id="img_eq" role="math" src="foo" alt="x^2 + y^2 + z^2">
- <input type="image" id="input_img_eq" src="foo" alt="x^2 + y^2 + z^2">
- </p>
-
- <p>Text:
- <span id="txt_eq" role="math" title="x^2 + y^2 + z^2">x<sup>2</sup> +
- y<sup>2</sup> + z<sup>2</sup></span>
-
- <!-- duplicate announcement -->
- <div id="test_note" role="note">subtree</div>
-
- <!-- No name for tr from its sub tree -->
- <table><tr id="NoNameForTR"><th>a</th><td>b</td></tr></table>
- <table style="display: block;">
- <tr id="NoNameForNonStandardTR" style="display:block;">
- <th>a</th><td>b</td>
- </tr>
- </table>
-
- <!-- Name from sub tree of tr, because it has a strong ARIA role -->
- <table><tr id="NameForTRBecauseStrongARIA" role="row"><th>a</th><td>b</td></tr></table>
-
- <!-- No name for tr because of weak (landmark) role -->
- <table><tr id="NoNameForTRBecauseWeakARIA" role="main"><th>a</th><td>b</td></tr></table>
-
- <!-- Name from subtree of grouping if requested by other object -->
- <div id="grouping" role="group">label</div>
- <button id="requested_name_from_grouping"aria-labelledby="grouping"></button>
- <!-- Name from sub tree of tbody marked as display:block;, which is also a grouping -->
- <div role="list">
- <div id="listitem_containing_block_tbody" role="listitem">
- <table>
- <tbody style="display: block;">
- <tr><td>label</td></tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- Name from subtree of treeitem containing grouping -->
- <div role="tree">
- <div id="treeitem_containing_grouping" role="treeitem" aria-level="1" aria-expanded="true">root
- <div role="group">
- <div role="treeitem" aria-level="2">sub</div>
- </div>
- </div>
- </div>
-
- <!-- Name from subtree of grouping labelled by an ancestor. -->
- <div id="grouping_ancestor_label">label
- <div id="grouping_labelledby_ancestor" role="group" aria-labelledby="grouping_ancestor_label">
- This content should not be included in the grouping's label.
- </div>
- </div>
-
- <!-- Text nodes and inline elements. -->
- <div role="listbox">
- <div id="container_text_inline" role="option">a<strong>b</strong>c</div>
- <!-- Text nodes and block elements. -->
- <div id="container_text_block" role="option">a<p>b</p>c</div>
- <!-- Text nodes and empty block elements. -->
- <div id="container_text_emptyblock" role="option">a<p></p><p></p>b</div>
- </div>
-
- <!-- aria-labelledby referring to a slot -->
- <div id="shadowHost">
- shadowButtonVisibleText
- <span slot="hiddenSlot">shadowButtonHiddenText</span>
- </div>
- <template id="shadowTemplate">
- <input type="button" id="shadowButtonVisibleText" aria-labelledby="visibleSlot">
- <slot id="visibleSlot"></slot>
- <input type="button" id="shadowButtonHiddenText" aria-labelledby="hiddenSlot">
- <slot id="hiddenSlot" name="hiddenSlot" hidden></slot>
- </template>
- <script>
- const shadowHost = document.getElementById("shadowHost");
- const shadowRoot = shadowHost.attachShadow({ mode: "open" });
- shadowRoot.append(document.getElementById("shadowTemplate").content.cloneNode(true));
- </script>
-
- <!-- aria-labelledby referring to a hidden container with script/style -->
- <button id="buttonScriptStyle" aria-labelledby="hiddenScriptStyle"></button>
- <div id="hiddenScriptStyle" hidden>
- <script> 42; </script>
- <style> .noOp {} </style>
- <span>content</span>
- </div>
-
- <!-- Name from subtree on link including <code>, etc. -->
- <a id="linkWithCodeSupSubInsDel" href="#">
- before
- <code>code</code>
- <sup>sup</sup>
- <sub>sub</sub>
- <ins>ins</ins>
- <del>del</del>
- after
- </a>
-</body>
-</html>
