summaryrefslogtreecommitdiffstats
path: root/accessible/tests/mochitest/events/test_focus_aria_activedescendant.html
blob: 4cd57fe3b386299fa6b92806eb35245bbc66306c (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
<!DOCTYPE html>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=429547
-->
<head>
  <title>aria-activedescendant focus tests</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="../role.js"></script>
  <script type="application/javascript"
          src="../states.js"></script>
  <script type="application/javascript"
          src="../events.js"></script>

  <script type="application/javascript">
    //gA11yEventDumpToConsole = true; // debugging

    function changeARIAActiveDescendant(aID, aItemID)
    {
      this.eventSeq = [
        new focusChecker(aItemID)
      ];

      this.invoke = function changeARIAActiveDescendant_invoke()
      {
        getNode(aID).setAttribute("aria-activedescendant", aItemID);
      }

      this.getID = function changeARIAActiveDescendant_getID()
      {
        return "change aria-activedescendant on " + aItemID;
      }
    }

    function insertItemNFocus(aID, aNewItemID)
    {
      this.eventSeq = [
        new invokerChecker(EVENT_SHOW, aNewItemID),
        new focusChecker(aNewItemID)
      ];

      this.invoke = function insertItemNFocus_invoke()
      {
        var container  = getNode(aID);
        var itemNode = document.createElement("div");
        itemNode.setAttribute("id", aNewItemID);
        itemNode.textContent = aNewItemID;
        container.appendChild(itemNode);

        container.setAttribute("aria-activedescendant", aNewItemID);
      }

      this.getID = function insertItemNFocus_getID()
      {
        return "insert new node and focus it with ID: " + aNewItemID;
      }
    }

    var gQueue = null;
    function doTest()
    {
      gQueue = new eventQueue();

      gQueue.push(new synthFocus("listbox", new focusChecker("item1")));
      gQueue.push(new changeARIAActiveDescendant("listbox", "item2"));
      gQueue.push(new changeARIAActiveDescendant("listbox", "item3"));

      gQueue.push(new synthFocus("combobox_entry", new focusChecker("combobox_entry")));
      gQueue.push(new changeARIAActiveDescendant("combobox", "combobox_option2"));

      todo(false, "No focus for inserted element, bug 687011");
      //gQueue.push(new insertItemNFocus("listbox", "item4"));

      gQueue.invoke(); // Will call SimpleTest.finish();
    }

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

  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=429547"
     title="Support aria-activedescendant usage in nsIAccesible::TakeFocus()">
    Mozilla Bug 429547
  </a>
  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=761102"
     title="Focus may be missed when ARIA active-descendant is changed on active composite widget">
    Mozilla Bug 761102
  </a>
  <p id="display"></p>
  <div id="content" style="display: none"></div>
  <pre id="test">
  </pre>

  <div role="listbox" aria-activedescendant="item1" id="listbox" tabindex="1"
       aria-owns="item3">
    <div role="listitem" id="item1">item1</div>
    <div role="listitem" id="item2">item2</div>
  </div>
  <div role="listitem" id="item3">item3</div>

  <div role="combobox" id="combobox">
    <input id="combobox_entry">
    <ul>
      <li role="option" id="combobox_option1">option1</li>
      <li role="option" id="combobox_option2">option2</li>
    </ul>
  </div>
</body>
</html>