summaryrefslogtreecommitdiffstats
path: root/accessible/tests/mochitest/test_descr.html
blob: c386ee5dc15ba865e1603158c894e4d320c6843d (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
<html>

<head>
  <title>nsIAccessible::description tests</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() {
      // Description from aria-describedby attribute
      testDescr("img1", "aria description");

      // No description from @title attribute because it is used to generate
      // name.
      testDescr("img2", "");

      // Description from @title attribute, name is generated from @alt
      // attribute.
      testDescr("img3", "description");

      // No description from aria-describedby since it is the same as the
      // @alt attribute which is used as the name
      testDescr("img4", "");

      // No description from @title attribute since it is the same as the
      // @alt attribute which is used as the name
      testDescr("img5", "");

      // Description from content of h2.
      testDescr("p", "heading");

      // Description from aria-description attribute
      testDescr("p2", "I describe");

      // Description from contents of h2 when both aria-describedby and
      // aria-description are present
      testDescr("p3", "heading");

      // From table summary (caption is used as a name)
      testDescr("table1", "summary");

      // Empty (summary is used as a name)
      testDescr("table2", "");

      // From title (summary is used as a name)
      testDescr("table3", "title");

      // No description from <desc> element since it is the same as the
      // <title> element.
      testDescr("svg", "");

      // role="alert" referenced by aria-describedby should include subtree.
      testDescr("inputDescribedByAlert", "Error");

      SimpleTest.finish();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTest);
  </script>

</head>

<body>

  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=489944"
     title="@title attribute no longer exposed on accDescription">
    Mozilla Bug 489944
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=666212"
     title="summary attribute content mapped to accessible name in MSAA">
    Mozilla Bug 666212
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi/id=1031188"
     title="Ensure that accDescription never duplicates AccessibleName">
    Mozilla Bug 1031188
  </a>

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

  <p id="description">aria description</p>
  <img id="img1" aria-describedby="description" />
  <img id="img2" title="title" />
  <img id="img3" alt="name" title="description" />
  <img id="img4" alt="aria description" aria-describedby="description">
  <img id="img5" alt="image" title="image">

  <h2 id="heading">heading</h2>
  <p id="p" aria-describedby="heading" role="button">click me</p>
  <p id="p2" aria-description="I describe" role="button">click me</p>
  <p id="p3" aria-description="I do not describe" aria-describedby="heading" role="button">click me</p>

  <table id="table1" summary="summary">
    <caption>caption</caption>
    <tr><td>cell</td></tr>
  </table>

  <table id="table2" summary="summary">
    <tr><td>cell</td></tr>
  </table>

  <table id="table3" summary="summary" title="title">
    <tr><td>cell</td></tr>
  </table>
  
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
       id="svg"
       style="width:100px; height:100px;">
    <title>SVG Image</title>
    <desc>SVG Image</desc>
    <linearGradient id="gradient">
      <stop class="begin" offset="0%"/>
      <stop class="end" offset="100%"/>
    </linearGradient>
    <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
    <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
  </svg>

  <div id="alert" role="alert">Error</div>
  <input type="text" id="inputDescribedByAlert" aria-describedby="alert">
</body>
</html>