accessible/tests/mochitest/name/test_general.html
author Alexander Surkov <surkov.alexander@gmail.com>
Mon, 20 Nov 2017 10:02:52 -0500
changeset 437203 dbff505c9c0543b570f4142ff5664cacb625d0b1
parent 436963 19229263df318cdb51b797ef02b97e0701671bb9
child 437284 081c06e175b2b4431b7af5ea594ff0373e97b70a
permissions -rw-r--r--
Bug 1418102 - role heading need to have a name computed from its subtree, r=marcoz

<html>

<head>
  <title>nsIAccessible::name calculation</title>
  <link rel="stylesheet" type="text/css"
        href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  <script type="application/javascript"
          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 (every text node
      // value in the name should be devided by spaces).
      // XXX: this case is rather a feature than strong wanted behaviour.
      testName("btn_labelledby_mixed_table", "text space text");

      // 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");

      // ////////////////////////////////////////////////////////////////////////
      // 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");


      // ///////////////////////////////////////////////////////////////////////
      // 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);

      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>space</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:" title="about">&nbsp;&nbsp;  </a>

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

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

</body>
</html>