accessible/tests/mochitest/jsat/test_output.html
author Yura Zenevich <yzenevich@mozilla.com>
Wed, 06 Aug 2014 09:38:50 -0400
changeset 198190 d6059e806022b7b93748c32ba8fbb1e4911b6bfa
parent 181132 8c3758dd1ba8cabb8df03180f646187b07c60d11
child 198884 4f6c6ad0ecf25043e1b132387fa305d21cf19d9e
permissions -rw-r--r--
Bug 1030470 - (part 1) moved the non-android localization part out of AccessFu to be handled in Gaia. r=eeejay --- accessible/jsat/AccessFu.jsm | 176 ++----- accessible/jsat/OutputGenerator.jsm | 337 +++++-------- accessible/jsat/Presentation.jsm | 193 ++++---- accessible/jsat/Utils.jsm | 43 +- accessible/tests/mochitest/jsat/jsatcommon.js | 19 +- accessible/tests/mochitest/jsat/output.js | 12 +- accessible/tests/mochitest/jsat/test_alive.html | 22 +- .../mochitest/jsat/test_content_integration.html | 95 ++-- .../tests/mochitest/jsat/test_content_text.html | 8 +- .../tests/mochitest/jsat/test_explicit_names.html | 73 +-- .../tests/mochitest/jsat/test_landmarks.html | 125 +++-- .../tests/mochitest/jsat/test_live_regions.html | 144 +++--- accessible/tests/mochitest/jsat/test_output.html | 526 +++++++++++---------- accessible/tests/mochitest/jsat/test_tables.html | 492 ++++++++++++++----- .../en-US/chrome/accessibility/AccessFu.properties | 103 +++- 15 files changed, 1306 insertions(+), 1062 deletions(-)

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=753984
-->
  <head>
    <title>[AccessFu] utterance order test</title>
    <meta charset="utf-8">
    <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="./output.js"></script>
    <script type="application/javascript">

      function doTest() {
        // Test the following accOrElmOrID (with optional old accOrElmOrID).
        // Note: each accOrElmOrID entry maps to a unique object utterance
        // generator function within the UtteranceGenerator.
        var tests = [{
          accOrElmOrID: "anchor",
          expectedUtterance: [[{"string": "link"}, "title"],
            ["title", {"string": "link"}]],
          expectedBraille: [[{"string": "linkAbbr"}, "title"],
            ["title", {"string": "linkAbbr"}]]
        }, {
          accOrElmOrID: "anchor_titleandtext",
          expectedUtterance: [[{"string": "link"}, "goes to the tests -",
            "Tests"], ["Tests", "- goes to the tests", {"string": "link"}]],
          expectedBraille:   [[{"string": "linkAbbr"}, "goes to the tests -",
            "Tests"], ["Tests", "- goes to the tests", {"string": "linkAbbr"}]],
        }, {
          accOrElmOrID: "anchor_duplicatedtitleandtext",
          expectedUtterance: [[{"string": "link"}, "Tests"],
            ["Tests", {"string": "link"}]],
          expectedBraille: [[{"string": "linkAbbr"}, "Tests"],
            ["Tests", {"string": "linkAbbr"}]]
        }, {
          accOrElmOrID: "anchor_arialabelandtext",
          expectedUtterance: [[{"string": "link"}, "goes to the tests - Tests"],
            ["Tests - goes to the tests", {"string": "link"}]],
          expectedBraille: [[{"string": "linkAbbr"},
            "goes to the tests - Tests"], ["Tests - goes to the tests",
            {"string": "linkAbbr"}]],
        }, {
          accOrElmOrID: "textarea",
          expectedUtterance: [[{"string": "textarea"},
            "This is the text area text."], ["This is the text area text.",
            {"string": "textarea"}]],
          expectedBraille: [[{"string": "textareaAbbr"},
            "This is the text area text."], ["This is the text area text.",
            {"string": "textareaAbbr"}]],
        }, {
          accOrElmOrID: "heading",
          expectedUtterance: [[{"string": "headingLevel", "args": [1]},
            "Test heading"], ["Test heading",
            {"string": "headingLevel", "args": [1]}]],
          expectedBraille: [[{"string": "headingAbbr"}, "Test heading"],
                            ["Test heading", {"string": "headingAbbr"}]]
        }, {
          accOrElmOrID: "list",
          expectedUtterance: [[{"string": "list"},
            {"string": "listItemsCount", "count":1}, {"string": "listStart"},
            "1.", "list one"], ["1.", "list one", {"string": "listStart"},
            {"string": "list"}, {"string": "listItemsCount", "count":1}]
          ],
          expectedBraille: [[{"string": "listAbbr"}, "list one"],
            ["list one", {"string": "listAbbr"}]]
        }, {
          accOrElmOrID: "dlist",
          expectedUtterance: [[{"string": "definitionlist"},
            {"string": "listItemsCount", "count": 0.5}, "dd one"], ["dd one",
            {"string": "definitionlist"},
            {"string": "listItemsCount", "count": 0.5}]
          ],
          expectedBraille: [[{"string": "definitionlistAbbr"}, "dd one"],
                            ["dd one", {"string": "definitionlistAbbr"}]]
        }, {
          accOrElmOrID: "li_one",
          expectedUtterance: [[{"string": "list"},
            {"string": "listItemsCount", "count": 1}, {"string": "listStart"},
            "1.", "list one"], ["1.", "list one", {"string": "listStart"},
            {"string": "list"}, {"string": "listItemsCount", "count": 1}]
          ],
          expectedBraille: [["1.", "list one"], ["1.", "list one"]]
        },
        {
          accOrElmOrID: "li_two",
          expectedUtterance: [[{"string": "list"},
            {"string": "listItemsCount", "count": 1}, {"string": "listStart"},
            "list two"], ["list two", {"string": "listStart"},
            {"string": "list"}, {"string": "listItemsCount", "count": 1}]
          ],
          expectedBraille: [["*", "list two"], ["*", "list two"]]
        }, {
          accOrElmOrID: "cell",
          expectedUtterance: [[{"string":"table"},
            {"string": "tblColumnInfo", "count": 1},
            {"string": "tblRowInfo", "count": 1}, "Fruits and vegetables",
            {"string": "columnInfo", "args": [1]},
            {"string": "rowInfo", "args": [1]}, {"string": "list"},
            {"string": "listItemsCount", "count": 4}, {"string": "listStart"},
            {"string": "link"}, "Apples", {"string": "link"}, "Bananas",
            {"string": "link"}, "Peaches", {"string": "listEnd"},
            {"string": "link"}, "Plums"], ["Apples", {"string": "link"},
            {"string": "listStart"}, "Bananas", {"string": "link"}, "Peaches",
            {"string": "link"}, "Plums", {"string": "link"},
            {"string": "listEnd"}, {"string": "list"},
            {"string": "listItemsCount", "count": 4},
            {"string": "columnInfo", "args": [1]},
            {"string": "rowInfo", "args": [1]}, "Fruits and vegetables",
            {"string":"table"}, {"string": "tblColumnInfo", "count": 1},
            {"string": "tblRowInfo", "count": 1}]],
          expectedBraille: [[{"string": "cellInfoAbbr", "args": [ 1, 1]},
            {"string": "listAbbr"}, {"string": "linkAbbr"}, "Apples",
            {"string": "linkAbbr"}, "Bananas", {"string": "linkAbbr"},
            "Peaches", {"string": "linkAbbr"}, "Plums"], ["Apples",
            {"string": "linkAbbr"}, "Bananas", {"string": "linkAbbr"},
            "Peaches", {"string": "linkAbbr"}, "Plums", {"string": "linkAbbr"},
            {"string": "listAbbr"},
            {"string": "cellInfoAbbr", "args": [ 1, 1]}]]
        }, {
          accOrElmOrID: "date",
          expectedUtterance: [[{"string": "textInputType_date"},
            {"string": "entry"}, "2011-09-29"], ["2011-09-29",
            {"string": "textInputType_date"}, {"string": "entry"}]],
          expectedBraille: [[{"string": "textInputType_date"},
            {"string": "entryAbbr"}, "2011-09-29"], ["2011-09-29",
            {"string": "textInputType_date"}, {"string": "entryAbbr"}]]
        }, {
          accOrElmOrID: "email",
          expectedUtterance: [[{"string": "textInputType_email"},
            {"string": "entry"}, "test@example.com"], ["test@example.com",
            {"string": "textInputType_email"}, {"string": "entry"}]],
          expectedBraille: [[{"string": "textInputType_email"},
            {"string": "entryAbbr"}, "test@example.com"], ["test@example.com",
            {"string": "textInputType_email"}, {"string": "entryAbbr"}]]
        }, {
          accOrElmOrID: "search",
          expectedUtterance: [[{"string": "textInputType_search"},
            {"string": "entry"}, "This is a search"], ["This is a search",
            {"string": "textInputType_search"}, {"string": "entry"}]],
          expectedBraille: [[{"string": "textInputType_search"},
            {"string": "entryAbbr"}, "This is a search"], ["This is a search",
            {"string": "textInputType_search"}, {"string": "entryAbbr"}]]
        }, {
          accOrElmOrID: "tel",
          expectedUtterance: [[{"string": "textInputType_tel"},
            {"string": "entry"}, "555-5555"], ["555-5555",
            {"string": "textInputType_tel"}, {"string": "entry"}]],
          expectedBraille: [[{"string": "textInputType_tel"},
            {"string": "entryAbbr"}, "555-5555"], ["555-5555",
            {"string": "textInputType_tel"}, {"string": "entryAbbr"}]]
        }, {
          accOrElmOrID: "url",
          expectedUtterance: [[{"string": "textInputType_url"},
            {"string": "entry"}, "http://example.com"], ["http://example.com",
            {"string": "textInputType_url"}, {"string": "entry"}]],
          expectedBraille: [[{"string": "textInputType_url"},
            {"string": "entryAbbr"}, "http://example.com"],
            ["http://example.com", {"string": "textInputType_url"},
            {"string": "entryAbbr"}]]
        }, {
          accOrElmOrID: "textInput",
          expectedUtterance: [[{"string": "entry"}, "This is text."],
                              ["This is text.", {"string": "entry"}]],
          expectedBraille: [[{"string": "entryAbbr"}, "This is text."],
                            ["This is text.", {"string": "entryAbbr"}]]
        }, {
          // Test pivot to list from li_one.
          accOrElmOrID: "list",
          oldAccOrElmOrID: "li_one",
          expectedUtterance: [[{"string": "list"},
            {"string": "listItemsCount", "count": 1}, {"string": "listStart"},
            "1.", "list one"], ["1.", "list one", {"string": "listStart"},
            {"string": "list"}, {"string": "listItemsCount", "count": 1}]
          ],
          expectedBraille: [[{"string": "listAbbr"}, "list one"],
                            ["list one", {"string": "listAbbr"}]]
        }, {
          // Test pivot to "apples" link from the table cell.
          accOrElmOrID: "apples",
          oldAccOrElmOrID: "cell",
          expectedUtterance: [[{"string": "list"},
            {"string": "listItemsCount", "count": 4}, {"string": "listStart"},
            {"string": "link"}, "Apples"], ["Apples", {"string": "link"},
            {"string": "listStart"}, {"string": "list"},
            {"string": "listItemsCount", "count": 4}]
          ],
          expectedBraille: [["*", {"string": "linkAbbr"}, "Apples"],
                            ["*", "Apples", {"string": "linkAbbr"}]]
        }, {
          // Test pivot to "bananas" link from "apples" link.
          accOrElmOrID: "bananas",
          oldAccOrElmOrID: "apples",
          expectedUtterance: [[{"string": "link"}, "Bananas"],
                              ["Bananas", {"string": "link"}]],
          expectedBraille: [["*", {"string": "linkAbbr"}, "Bananas"],
                            ["*", "Bananas", {"string": "linkAbbr"}]]
        }, {
          // test unavailable state utterance
          accOrElmOrID: "unavailableButton",
          expectedUtterance: [[{"string": "stateUnavailable"},
            {"string": "pushbutton"}, "I am unavailable"], ["I am unavailable",
            {"string": "stateUnavailable"}, {"string": "pushbutton"}]],
          expectedBraille: [[{"string": "pushbuttonAbbr"}, "I am unavailable"],
                            ["I am unavailable", {"string": "pushbuttonAbbr"}]]
        }, {
          // test expanded state utterance
          accOrElmOrID: "expandedButton",
          expectedUtterance: [[{"string": "stateExpanded"},
            {"string": "pushbutton"}, "I am expanded"], ["I am expanded",
            {"string": "stateExpanded"}, {"string": "pushbutton"}]],
          expectedBraille: [[{"string": "pushbuttonAbbr"}, "I am expanded"],
                            ["I am expanded", {"string": "pushbuttonAbbr"}]]
        }, {
          // test collapsed state utterance
          accOrElmOrID: "collapsedButton",
          expectedUtterance: [[{"string": "stateCollapsed"},
            {"string": "pushbutton"}, "I am collapsed"], ["I am collapsed",
            {"string": "stateCollapsed"}, {"string": "pushbutton"}]],
          expectedBraille: [[{"string": "pushbuttonAbbr"}, "I am collapsed"],
                            ["I am collapsed", {"string": "pushbuttonAbbr"}]]
        }, {
          // test required state utterance
          accOrElmOrID: "requiredInput",
          expectedUtterance: [[{"string": "stateRequired"}, {"string": "entry"},
            "I am required"], ["I am required", {"string": "stateRequired"},
            {"string": "entry"}]],
          expectedBraille: [[{"string": "entryAbbr"}, "I am required"],
                            ["I am required", {"string": "entryAbbr"}]]
        }, {
          // test has popup state utterance
          accOrElmOrID: "hasPopupButton",
          expectedUtterance: [[{"string": "stateHasPopup"},
            {"string": "buttonmenu"}, "I have a popup"], ["I have a popup",
            {"string": "stateHasPopup"}, {"string": "buttonmenu"}]],
          expectedBraille: [[{"string": "buttonmenuAbbr"}, "I have a popup"],
                            ["I have a popup", {"string": "buttonmenuAbbr"}]]
        }, {
          // Test selected tab
          accOrElmOrID: "tab1",
          expectedUtterance: [[{"string": "pagetablist"},
            {"string": "stateSelected"}, {"string": "pagetab"},
            {"string": "objItemOfN", "args": [1, 2]}, "Account"], ["Account",
            {"string": "stateSelected"}, {"string": "pagetab"},
            {"string": "objItemOfN", "args": [1, 2]}, {"string": "pagetablist"}]
          ],
          expectedBraille: [[{"string": "pagetabAbbr"},
            {"string": "objItemOfN", "args": [1, 2]}, "Account"], ["Account",
            {"string": "pagetabAbbr"},
            {"string": "objItemOfN", "args": [1, 2]}]]
        }, {
          // Test unselected tab
          accOrElmOrID: "tab2",
          expectedUtterance: [[{"string": "pagetablist"}, {"string": "pagetab"},
            {"string": "objItemOfN", "args": [2, 2]}, "Advanced"], ["Advanced",
            {"string": "pagetab"}, {"string": "objItemOfN", "args": [2, 2]},
            {"string": "pagetablist"}]],
          expectedBraille: [[{"string": "pagetabAbbr"},
            {"string": "objItemOfN", "args": [2, 2]}, "Advanced"], ["Advanced",
            {"string": "pagetabAbbr"},
            {"string": "objItemOfN", "args": [2, 2]}]]
        }, {
          // Landing on this label should mimic landing on the checkbox.
          accOrElmOrID: "label1",
          expectedUtterance: [[{"string": "stateNotChecked"},
            {"string": "checkbutton"}, "Orange"], ["Orange",
            {"string": "stateNotChecked"}, {"string": "checkbutton"}]],
          expectedBraille: [[{"string": "stateUncheckedAbbr"}, "Orange"],
                            ["Orange", {"string": "stateUncheckedAbbr"}]]
        }, {
          // Here we get a top-level view of the form.
          accOrElmOrID: "form1",
          expectedUtterance: [[{"string": "label"},
            {"string": "stateNotChecked"}, {"string": "checkbutton"}, "Orange",
            "Orange", {"string": "stateNotChecked"}, {"string": "checkbutton"},
            "Blue", {"string": "label"}, "Blue"], ["Orange",
            {"string": "stateNotChecked"}, {"string": "checkbutton"}, "Orange",
            {"string": "label"}, "Blue", {"string": "stateNotChecked"},
            {"string": "checkbutton"}, "Blue", {"string": "label"}]],
          expectedBraille: [[{"string": "labelAbbr"},
            {"string": "stateUncheckedAbbr"}, "Orange", "Orange",
            {"string": "stateUncheckedAbbr"}, "Blue", {"string": "labelAbbr"},
            "Blue"], ["Orange", {"string": "stateUncheckedAbbr"}, "Orange",
            {"string": "labelAbbr"}, "Blue", {"string": "stateUncheckedAbbr"},
            "Blue", {"string": "labelAbbr"}]]
        }, {
          // This is a non-nesting label.
          accOrElmOrID: "label2",
          expectedUtterance: [[{"string": "label"}, "Blue"],
                              ["Blue", {"string": "label"}]],
          expectedBraille: [[{"string": "labelAbbr"}, "Blue"],
                            ["Blue", {"string": "labelAbbr"}]]
        }, {
          // This is a distinct control.
          accOrElmOrID: "input2",
          expectedUtterance: [[{"string": "stateNotChecked"},
            {"string": "checkbutton"}, "Blue"], ["Blue",
            {"string": "stateNotChecked"}, {"string": "checkbutton"}]],
          expectedBraille: [[{"string": "stateUncheckedAbbr"}, "Blue"], ["Blue",
            {"string": "stateUncheckedAbbr"}]]
        }, {
          // This is a nested control.
          accOrElmOrID: "input1",
          expectedUtterance: [[{"string": "stateNotChecked"},
            {"string": "checkbutton"}, "Orange"], ["Orange",
            {"string": "stateNotChecked"}, {"string": "checkbutton"}]],
          expectedBraille: [[{"string": "stateUncheckedAbbr"}, "Orange"],
            ["Orange", {"string": "stateUncheckedAbbr"}]]
        }, {
          // Landing on this label should mimic landing on the entry.
          accOrElmOrID: "label3",
          expectedUtterance: [[{"string": "entry"}, "Joe", "First name:"],
                             ["First name:", "Joe", {"string": "entry"}]],
          expectedBraille: [[{"string": "entryAbbr"}, "Joe", "First name:"],
                            ["First name:", "Joe", {"string": "entryAbbr"}]]
        }, {
          // This is a nested control with a value.
          accOrElmOrID: "input3",
          expectedUtterance: [[{"string": "entry"}, "Joe", "First name:"],
                              ["First name:", "Joe", {"string": "entry"}]],
          expectedBraille: [[{"string": "entryAbbr"}, "Joe", "First name:"],
                            ["First name:", "Joe", {"string": "entryAbbr"}]]
        }, {
          // This is a nested control with a value.
          accOrElmOrID: "input4",
          expectedUtterance: [[{"string": "slider"}, "3", "Points:"],
                              ["Points:", "3", {"string": "slider"}]],
          expectedBraille: [[{"string": "sliderAbbr"}, "3", "Points:"],
                            ["Points:", "3", {"string": "sliderAbbr"}]]
        }, {
          accOrElmOrID: "password",
          expectedUtterance: [[{"string": "passwordtext"}, "Secret Password"],
                              ["Secret Password", {"string": "passwordtext"}]],
          expectedBraille: [[{"string": "passwordtextAbbr"}, "Secret Password"],
                            ["Secret Password", {"string": "passwordtextAbbr"}]]
        }, {
          accOrElmOrID: "input5",
          expectedUtterance: [[{"string": "stateChecked"},
            {"string": "checkbutton"}, "Boring label"], ["Boring label",
            {"string": "stateChecked"}, {"string": "checkbutton"}]],
          expectedBraille: [[{"string": "stateCheckedAbbr"}, "Boring label"],
            ["Boring label", {"string": "stateCheckedAbbr"}]]
        }, {
          accOrElmOrID: "radio_unselected",
          expectedUtterance: [[{"string": "stateNotChecked"},
            {"string": "radiobutton"}, "any old radio button"],
            ["any old radio button", {"string": "stateNotChecked"},
            {"string": "radiobutton"}]
          ],
          expectedBraille: [
            [{"string": "stateUncheckedAbbr"}, "any old radio button"],
            ["any old radio button", {"string": "stateUncheckedAbbr"}]]
        }, {
          accOrElmOrID: "radio_selected",
          expectedUtterance: [[{"string": "stateChecked"},
            {"string": "radiobutton"}, "a unique radio button"],
            ["a unique radio button", {"string": "stateChecked"},
            {"string": "radiobutton"}]],
          expectedBraille: [
            [{"string": "stateCheckedAbbr"}, "a unique radio button"],
            ["a unique radio button", {"string": "stateCheckedAbbr"}]]
        }, {
          accOrElmOrID: "togglebutton_notpressed",
          expectedUtterance: [[{"string": "togglebutton"}, "I am not pressed"],
                              ["I am not pressed", {"string": "togglebutton"}]],
          expectedBraille: [
            [{"string": "stateUnpressedAbbr"}, "I am not pressed"],
            ["I am not pressed", {"string": "stateUnpressedAbbr"}]]
        }, {
          accOrElmOrID: "togglebutton_pressed",
          expectedUtterance: [[{"string": "statePressed"},
            {"string": "togglebutton"}, "I am pressed!"], ["I am pressed!",
            {"string": "statePressed"}, {"string": "togglebutton"}]],
          expectedBraille: [[{"string": "statePressedAbbr"}, "I am pressed!"],
                            ["I am pressed!", {"string": "statePressedAbbr"}]]
        }, {
          accOrElmOrID: "listbox-option",
          expectedUtterance: [[{"string": "listbox"},
            {"string": "listboxoption"}, "Search suggestion"],
            ["Search suggestion", {"string": "listboxoption"},
            {"string": "listbox"}]
          ],
          expectedBraille: [
            [{"string": "listboxoptionAbbr"}, "Search suggestion"],
            ["Search suggestion", {"string": "listboxoptionAbbr"}]]
        }];

        // Test all possible utterance order preference values.
        tests.forEach(function run(test) {
          var utteranceOrderValues = [0, 1];
          utteranceOrderValues.forEach(
            function testUtteranceOrder(utteranceOrder) {
              SpecialPowers.setIntPref(PREF_UTTERANCE_ORDER, utteranceOrder);
              testOutput(test.expectedUtterance[utteranceOrder],
                         test.accOrElmOrID, test.oldAccOrElmOrID, 1);
              testOutput(test.expectedBraille[utteranceOrder],
                         test.accOrElmOrID, test.oldAccOrElmOrID, 0);
            }
          );
        });

        // If there was an original utterance order preference, revert to it.
        SpecialPowers.clearUserPref(PREF_UTTERANCE_ORDER);
        SimpleTest.finish();
      }

      SimpleTest.waitForExplicitFinish();
      addA11yLoadEvent(doTest);

    </script>
  </head>
  <body>
    <div id="root">
      <a target="_blank"
         href="https://bugzilla.mozilla.org/show_bug.cgi?id=753984"
         title="[AccessFu] utterance order test">
         Mozilla Bug 753984</a>
      <a target="_blank"
         href="https://bugzilla.mozilla.org/show_bug.cgi?id=758675"
         title="[AccessFu] Add support for accDescription">
         Mozilla Bug 758675</a>
      <a target="_blank"
         href="https://bugzilla.mozilla.org/show_bug.cgi?id=876475"
         title="[AccessFu] Make braille output less verbose">
         Mozilla Bug 876475</a>
      <a target="_blank"
         href="https://bugzilla.mozilla.org/show_bug.cgi?id=924284"
         title="[AccessFu] Output accessible values">
         Mozilla Bug 924284</a>
      <a target="_blank"
         href="https://bugzilla.mozilla.org/show_bug.cgi?id=925845"
         title="[AccessFu] Unify output tests">
         Mozilla Bug 925845</a>
      <p id="display"></p>
      <div id="content" style="display: none"></div>
      <pre id="test"></pre>
      <a id="anchor" href="#test" title="title"></a>
      <a id="anchor_titleandtext" href="#test" title="goes to the tests">Tests</a>
      <a id="anchor_duplicatedtitleandtext" href="#test" title="Tests">Tests</a>
      <a id="anchor_arialabelandtext" href="#test" aria-label="Tests" title="goes to the tests">Tests</a>
      <textarea id="textarea" cols="80" rows="5">
        This is the text area text.
      </textarea>
      <h1 id="heading" title="Test heading"></h1>
      <ol id="list">
        <li id="li_one">list one</li>
      </ol>
      <ul id="unorderd_list">
        <li id="li_two">list two</li>
      </ul>
      <dl id="dlist">
        <dd id="dd_one">
          dd one
        </dd>
      </dl>
      <table>
        <caption>Fruits and vegetables</caption>
        <tr>
          <td id="cell">
            <ul style="list-style-type: none;">
              <li><a id="apples" href="#">Apples</a></li>
              <li><a id="bananas" href="#">Bananas</a></li>
              <li><a href="#">Peaches</a></li>
              <li>
                <a href="#">
                  Plums
                </a>
              </li>
            </ul>
          </td>
        </tr>
      </table>
      <button id="unavailableButton" disabled>I am unavailable</button>
      <button id="expandedButton" aria-expanded="true">I am expanded</button>
      <button id="collapsedButton" aria-expanded="false">I am collapsed</button>
      <input id="requiredInput" required placeholder="I am required" />
      <button id="hasPopupButton" aria-haspopup="true">I have a popup</button>
      <div role="tablist">
        <a id="tab1" href="#" role="tab" aria-selected="true">Account</a>
        <a id="tab2" href="#" role="tab" aria-selected="false">Advanced</a>
      </div>
      <form id="form1">
        <label id="label1"><input id="input1" type="checkbox">Orange</label>
        <input id="input2" type="checkbox"><label id="label2" for="input2">Blue</label>
      </form>
      <label id="label3">First name: <input id="input3" value="Joe"></label>
      <label id="label4">Points:
        <input id="input4" type="range" name="points" min="1" max="10" value="3">
      </label>
      <label for="input5">Boring label</label><input id="input5" type="checkbox" checked></input>
      <label for="password">Secret Password</label><input id="password" type="password"></input>
      <label for="radio_unselected">any old radio button</label><input id="radio_unselected" type="radio"></input>
      <label for="radio_selected">a unique radio button</label><input id="radio_selected" type="radio" checked></input>
      <input id="date" type="date" value="2011-09-29" />
      <input id="email" type="email" value="test@example.com" />
      <input id="search" type="search" value="This is a search" />
      <input id="tel" type="tel" value="555-5555" />
      <input id="url" type="url" value="http://example.com" />
      <input id="textInput" type="text" value="This is text." />
      <label>Points: <input id="range" type="range" name="points" min="1" max="10" value="3"></label>
      <div id="togglebutton_notpressed" aria-pressed="false" role="button" tabindex="-1">I am not pressed</div>
      <div id="togglebutton_pressed" aria-pressed="true" role="button" tabindex="-1">I am pressed!</div>
      <ul role="listbox" style="list-style-type: none;">
        <li role="option" id="listbox-option">Search suggestion</li>
      </ul>
    </div>
  </body>
</html>