accessible/tests/mochitest/test_nsIAccessible_name.html

   1 <html>
   2
   3 <head>
   4   <title>nsIAccessible::name calculation</title>
   5   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
   6
   7   <script type="application/javascript"
   8           src="chrome://mochikit/content/MochiKit/packed.js"></script>
   9   <script type="application/javascript"
  10           src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  11   <script type="application/javascript"
  12           src="chrome://mochikit/content/a11y/accessible/common.js"></script>
  13   <script type="application/javascript"
  14           src="chrome://mochikit/content/a11y/accessible/nsIAccessible_name.js"></script>
  15
  16   <script type="application/javascript">
  17     function doTest()
  18     {
  19       // aria-label
  20
  21       // Simple label provided via ARIA
  22       testName("btn_simple_aria_label", "I am a button");
  23
  24       // aria-label and aria-labelledby, expect aria-label
  25       testName("btn_both_aria_labels", "I am a button, two");
  26
  27       //////////////////////////////////////////////////////////////////////////
  28       // aria-labelledby
  29
  30       // Single relation. The value of 'aria-labelledby' contains the ID of
  31       // an element. Gets the name from text node of that element.
  32       testName("btn_labelledby_text", "text");
  33
  34       // Multiple relations. The value of 'aria-labelledby' contains the IDs
  35       // of elements. Gets the name from text nodes of those elements.
  36       testName("btn_labelledby_texts", "text1 text2");
  37
  38
  39       //////////////////////////////////////////////////////////////////////////
  40       // Name from subtree (single relation labelled_by).
  41
  42       // Gets the name from text nodes contained by nested elements
  43       testName("btn_labelledby_mixed", "nomore text");
  44
  45       // Gets the name from text nodes contained by nested elements, ignores
  46       // hidden elements (bug 443081).
  47       testName("btn_labelledby_mixed_hidden_child", "nomore text2");
  48
  49       // Gets the name from hidden text nodes contained by nested elements,
  50       // (label element is hidden entirely), (bug 443081).
  51       testName("btn_labelledby_mixed_hidden", "lala more hidden text");
  52
  53       // Gets the name from text nodes contained by nested elements having block
  54       // representation (every text node value in the name should be devided by
  55       // spaces)
  56       testName("btn_labelledby_mixed_block", "text more text");
  57
  58       // Gets the name from text nodes contained by html:td (every text node
  59       // value in the name should be devided by spaces).
  60       // XXX: this case is rather a feature than strong wanted behaviour.
  61       testName("btn_labelledby_mixed_table", "text space text");
  62
  63       // Gets the name from image accessible.
  64       testName("btn_labelledby_mixed_img", "text image");
  65
  66       // Gets the name from input accessibles
  67       // Note: if input have label elements then the name isn't calculated
  68       // from them.
  69       testName("btn_labelledby_mixed_input",
  70                "input button Submit Query Reset input image");
  71
  72       // Gets the name from the title of object element.
  73       testName("btn_labelledby_mixed_object", "object");
  74
  75       // Gets the name from text nodes. Element br adds space between them.
  76       testName("btn_labelledby_mixed_br", "text text");
  77
  78
  79       //////////////////////////////////////////////////////////////////////////
  80       // label element
  81
  82       // The label element contains the button. The name is calculated from
  83       // this button.
  84       // Note: the name contains the content of the button.
  85       testName("btn_label_inside", "text10text");
  86
  87       // The label element and the button are placed in the same form. Gets
  88       // the name from the label subtree.
  89       testName("btn_label_inform", "in form");
  90
  91       // The label element is placed outside of form where the button is.
  92       // Do not take into account the label.
  93       testName("btn_label_outform", "12");
  94
  95       // The label element and the button are in the same document. Gets the
  96       // name from the label subtree.
  97       testName("btn_label_indocument", "in document");
  98
  99
 100       //////////////////////////////////////////////////////////////////////////
 101       // name from children
 102
 103       // ARIA role button is presented allowing the name calculation from
 104       // children.
 105       testName("btn_children", "14");
 106
 107       // ARIA role option is presented allowing the name calculation from
 108       // visible children (bug 443081).
 109       testName("lb_opt1_children_hidden", "i am visible");
 110
 111
 112       //////////////////////////////////////////////////////////////////////////
 113       // title attribute
 114
 115       // If nothing is left. Let's try title attribute.
 116       testName("btn_title", "title");
 117
 118       //////////////////////////////////////////////////////////////////////////
 119       // textarea name
 120
 121       // textarea's name should have the value, which initially is specified by
 122       // a text child.
 123       testName("textareawithchild", "Story: Foo");
 124
 125       // new textarea name should reflect the value change.
 126       var elem = document.getElementById("textareawithchild");
 127       elem.value = "Bar";
 128
 129       testName("textareawithchild", "Story: Bar");
 130
 131       /////////////////////////////////////////////////////////////////////////
 132       // label with nested combobox
 133
 134       testName("comboinmiddle", "Subscribe to ATOM feed.");
 135
 136       SimpleTest.finish();
 137     }
 138
 139     SimpleTest.waitForExplicitFinish();
 140     addLoadEvent(doTest);
 141   </script>
 142
 143 </head>
 144
 145 <body>
 146
 147   <a target="_blank"
 148      href="https://bugzilla.mozilla.org/show_bug.cgi?id=444279"
 149      title="mochitest for accessible name calculating">
 150     Mozilla Bug 444279
 151   </a>
 152   <p id="display"></p>
 153   <div id="content" style="display: none"></div>
 154   <pre id="test">
 155   </pre>
 156
 157   <!-- aria-label, simple label -->
 158   <span id="btn_simple_aria_label" role="button" aria-label="I am a button"/>
 159   <br/>
 160   <!-- aria-label plus aria-labelledby -->
 161   <span id="btn_both_aria_labels" role="button" aria-label="I am a button, two"
 162         aria-labelledby="labelledby_text"/>
 163   <br/>
 164
 165   <!-- aria-labelledby, single relation -->
 166   <span id="labelledby_text">text</span>
 167   <button id="btn_labelledby_text"
 168           aria-labelledby="labelledby_text">1</button>
 169   <br/>
 170
 171   <!-- aria-labelledby, multiple relations -->
 172   <span id="labelledby_text1">text1</span>
 173   <span id="labelledby_text2">text2</span>
 174   <button id="btn_labelledby_texts"
 175           aria-labelledby="labelledby_text1 labelledby_text2">2</button>
 176   <br/>
 177
 178   <!-- the name from subtree, mixed content -->
 179   <span id="labelledby_mixed">no<span>more text</span></span>
 180   <button id="btn_labelledby_mixed"
 181           aria-labelledby="labelledby_mixed">3</button>
 182   <br/>
 183
 184   <!-- the name from subtree, mixed/hidden content -->
 185   <span id="labelledby_mixed_hidden_child">
 186     no<span>more
 187       <span style="display: none;">hidden</span>
 188       text2
 189       <span style="visibility: hidden">hidden2</span>
 190     </span>
 191   </span>
 192   <button id="btn_labelledby_mixed_hidden_child"
 193           aria-labelledby="labelledby_mixed_hidden_child">3.1</button>
 194   <br/>
 195
 196   <!-- the name from subtree, mixed/completely hidden content -->
 197   <span id="labelledby_mixed_hidden"
 198         style="display: none;">lala <span>more hidden </span>text</span></span>
 199   <button id="btn_labelledby_mixed_hidden"
 200           aria-labelledby="labelledby_mixed_hidden">3.2</button>
 201   <br/>
 202
 203   <!-- the name from subtree, mixed content, block structure -->
 204   <div id="labelledby_mixed_block"><div>text</div>more text</div></div>
 205   <button id="btn_labelledby_mixed_block"
 206           aria-labelledby="labelledby_mixed_block">4</button>
 207   <br/>
 208
 209   <!-- the name from subtree, mixed content, table structure -->
 210   <table><tr>
 211     <td id="labelledby_mixed_table">text<span>space</span>text</td>
 212   </tr></table>
 213   <button id="btn_labelledby_mixed_table"
 214           aria-labelledby="labelledby_mixed_table">5</button>
 215   <br/>
 216
 217   <!-- the name from subtree, child img -->
 218   <span id="labelledby_mixed_img">text<img alt="image"/></span>
 219   <button id="btn_labelledby_mixed_img"
 220           aria-labelledby="labelledby_mixed_img">6</button>
 221   <br/>
 222
 223   <!-- the name from subtree, child inputs -->
 224   <span id="labelledby_mixed_input">
 225     <input type="button" id="input_button" title="input button"/>
 226     <input type="submit" id="input_submit"/>
 227     <input type="reset" id="input_reset"/>
 228     <input type="image" id="input_image" title="input image"/>
 229   </span>
 230   <button id="btn_labelledby_mixed_input"
 231           aria-labelledby="labelledby_mixed_input">7</button>
 232   <br/>
 233
 234   <!-- the name from subtree, child object -->
 235   <span id="labelledby_mixed_object">
 236     <object data="about:blank" title="object"></object>
 237   </span>
 238   <button id="btn_labelledby_mixed_object"
 239           aria-labelledby="labelledby_mixed_object">8</button>
 240   <br/>
 241
 242   <!-- the name from subtree, child br -->
 243   <span id="labelledby_mixed_br">text<br/>text</span>
 244   <button id="btn_labelledby_mixed_br"
 245           aria-labelledby="labelledby_mixed_br">9</button>
 246   <br/>
 247
 248   <!-- label element, label contains the button -->
 249   <label>text<button id="btn_label_inside">10</button>text</label>
 250   <br/>
 251
 252   <!-- label element, label and the button are in the same form -->
 253   <form>
 254     <label for="btn_label_inform">in form</label>
 255     <button id="btn_label_inform">11</button>
 256   </form>
 257
 258   <!-- label element, label is outside of the form of the button -->
 259   <label for="btn_label_outform">out form</label>
 260   <form>
 261     <button id="btn_label_outform">12</button>
 262   </form>
 263
 264   <!-- label element, label and the button are in the same document -->
 265   <label for="btn_label_indocument">in document</label>
 266   <button id="btn_label_indocument">13</button>
 267
 268   <!-- name from children -->
 269   <span id="btn_children" role="button">14</span>
 270
 271   <!-- name from children, hidden children -->
 272   <div role="listbox" tabindex="0">
 273     <div id="lb_opt1_children_hidden" role="option" tabindex="0">
 274       <span>i am visible</span>
 275       <span style="display:none">i am hidden</span>
 276     </div>
 277   </div>
 278
 279   <!-- name from title attribute -->
 280   <span id="btn_title" role="group" title="title">15</span>
 281
 282   <!-- A textarea nested in a label with a text child (bug #453371). -->
 283   <form>
 284     <label>Story:
 285       <textarea id="textareawithchild" name="name">Foo</textarea>
 286     </label>
 287   </form>
 288
 289   <!-- A label with a nested control in the middle -->
 290   <form>
 291     <label id="comboinmiddle">
 292       Subscribe to
 293       <select id="combo3" name="occupation">
 294         <option>ATOM</option>
 295         <option>RSS</option>
 296       </select>
 297       feed.
 298     </label>
 299   </form>
 300
 301 </body>
 302 </html>