summaryrefslogtreecommitdiffstats
path: root/accessible/tests/mochitest/role/test_general.html
blob: 282690cf987f9ad9ac2b151c59ca3468c30d9eed (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html>
<head>
  <title>test nsHyperTextAccessible accesible objects creation and their roles</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="../role.js"></script>
  <script type="application/javascript"
          src="../attributes.js"></script>

  <script type="application/javascript">
    function doTests() {
      // landmark tests section
      testRole("frm", ROLE_FORM);

      // nsHyperTextAcc tests section
      // Test html:form.
      testRole("nav", ROLE_LANDMARK);
      testRole("header", ROLE_LANDMARK);
      testRole("footer", ROLE_LANDMARK);
      testRole("article", ROLE_ARTICLE);
      testRole("aside", ROLE_LANDMARK);
      testRole("section", ROLE_SECTION);

      // Bug 996821
      // Check that landmark elements get accessibles with styled overflow.
      testRole("section_overflow", ROLE_SECTION);
      testRole("nav_overflow", ROLE_LANDMARK);
      testRole("header_overflow", ROLE_SECTION);
      testRole("aside_overflow", ROLE_LANDMARK);
      testRole("footer_overflow", ROLE_SECTION);
      testRole("article_overflow", ROLE_ARTICLE);

      // test html:div
      testRole("sec", ROLE_SECTION);

      // Test html:blockquote
      testRole("quote", ROLE_BLOCKQUOTE);

      // Test html:h, all levels
      testRole("head1", ROLE_HEADING);
      testRole("head2", ROLE_HEADING);
      testRole("head3", ROLE_HEADING);
      testRole("head4", ROLE_HEADING);
      testRole("head5", ROLE_HEADING);
      testRole("head6", ROLE_HEADING);

      // Test that an html:input @type="file" is exposed as ROLE_GROUPING.
      testRole("data", ROLE_GROUPING);

      // Test that input type="checkbox" and type="radio" are
      // exposed as such regardless of appearance style.
      testRole("checkbox_regular", ROLE_CHECKBUTTON);
      testRole("checkbox_appearance_none", ROLE_CHECKBUTTON);
      testRole("radio_regular", ROLE_RADIOBUTTON);
      testRole("radio_appearance_none", ROLE_RADIOBUTTON);

      // Test regular paragraph by comparison to make sure exposure does not
      // get broken.
      testRole("p", ROLE_PARAGRAPH);

      // Test dl, dt, dd
      testRole("definitionlist", ROLE_DEFINITION_LIST);
      testRole("definitionterm", ROLE_TERM);
      testRole("definitiondescription", ROLE_DEFINITION);

      // Has click, mousedown or mouseup listeners.
      testRole("span1", ROLE_TEXT);
      testRole("span2", ROLE_TEXT);
      testRole("span3", ROLE_TEXT);

      // Test role of listbox inside combobox
      testRole("listbox1", ROLE_COMBOBOX_LIST);
      testRole("listbox2", ROLE_COMBOBOX_LIST);

      // Test role of menu and li items in menu
      testRole("menu", ROLE_LIST);
      testRole("menuItem", ROLE_LISTITEM);

      SimpleTest.finish();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTests);
  </script>
</head>
<body>

  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=472326"
     title="html:input of type "file" no longer rendered to screen readers">
    Mozilla Bug 472326
  </a><br>
  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=474261"
      title="Test remaining implementations in nsHyperTextAccessible::GetRole">
    bug 474261
  </a><br>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=423409"
     title="Expose click action if mouseup and mousedown are registered">
    Mozilla Bug 423409
  </a>
  <a target="_blank"
     title="Provide mappings for html5 <nav> <header> <footer> <article>"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=593368">
    Bug 593368
  </a><br/>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=613502"
     title="Map <article> like we do aria role article">
    Bug 613502
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=610650"
     title="Change implementation of HTML5 landmark elements to conform">
    Bug 610650
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=614310"
     title="Map section to pane (like role=region)">
    Mozilla Bug 614310
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=734982"
     title="Map ARIA role FORM">
    Bug 734982
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=1044431"
     title="Listbox owned by combobox has the wrong role">
    Mozilla Bug 1044431
  </a>

  <p id="display"></p>
  <div id="content" style="display: none"></div>
  <pre id="test">
  </pre>

  <form id="frm" action="submit.php" method="post">
    <label for="data">File</label>:
    <input type="file" id="data" name="data" size="50"/>
    <input type="checkbox" id="checkbox_regular" value="Check me"/>
    <input type="checkbox" style="-moz-appearance: none;" id="checkbox_appearance_none" value="Check me"/>
    <input type="radio" id="radio_regular" value="Check me"/>
    <input type="radio" style="-moz-appearance: none;" id="radio_appearance_none" value="Check me"/>
  </form>

  <nav id="nav">a nav</nav>
  <header id="header">a header</header>
  <footer id="footer">a footer</footer>
  <article id="article">an article</article>
  <aside id="aside">by the way I am an aside</aside>
  <section id="section">a section</section>

  <section style="overflow: hidden;" id="section_overflow">
    <nav style="overflow: hidden;"
         id="nav_overflow">overflow nav</nav>
    <header style="overflow: hidden;"
            id="header_overflow">overflow header</header>
    <aside style="overflow: hidden;"
           id="aside_overflow">overflow aside</aside>
    <footer style="overflow: hidden;"
            id="footer_overflow">overflow footer</footer>
  </section>
  <article style="overflow: hidden;"
           id="article_overflow">overflow article</article>

  <p id="p">A paragraph for comparison.</p>
  <div id="sec">A normal div</div>
  <blockquote id="quote">A citation</blockquote>
  <h1 id="head1">A heading level 1</h1>
  <h2 id="head2">A heading level 2</h2>
  <h3 id="head3">A heading level 3</h3>
  <h4 id="head4">A heading level 4</h4>
  <h5 id="head5">A heading level 5</h5>
  <h6 id="head6">A heading level 6</h6>

  <dl id="definitionlist">
  <dt id="definitionterm">gecko</dt>
  <dd id="definitiondescription">geckos have sticky toes</dd>
  </dl>

  <span id="span1" onclick="">clickable span</span>
  <span id="span2" onmousedown="">clickable span</span>
  <span id="span3" onmouseup="">clickable span</span>

  <div id="combobox1" role="combobox">
    <div id="listbox1" role="listbox"></div>
  </div>
  <div id="combobox2" role="combobox" aria-owns="listbox2"></div>
  <div id="listbox2" role="listbox"></div>

  <menu id="menu">
    <li id="menuItem">menu item!</li>
  </menu>
</body>
</html>