<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 is calculated from // this button. // Note: the name contains the content of the button. testName("btn_label_inside", "text10text"); // 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", "label1label2"); // 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 have the value, which initially is specified by // a text child. testName("textareawithchild", "Story Foo is ended."); // new textarea name should reflect the value change. var elem = document.getElementById("textareawithchild"); elem.value = "Bar"; testName("textareawithchild", "Story Bar 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 ATOM 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 Haliluya 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"); 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 id="listitem_containing_block_tbody" role="listitem"> <table> <tbody style="display: block;"> <tr><td>label</td></tr> </tbody> </table> </div> <!-- Name from subtree of treeitem containing grouping --> <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> <!-- 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 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> </body> </html>