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

<head>
  <title>Test removal of focused accessible</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="../promisified-events.js"></script>

  <script type="application/javascript">
    async function setFocus(aNodeToFocus, aExpectedFocus) {
      let expected = aExpectedFocus || aNodeToFocus;
      let focused = waitForEvent(EVENT_FOCUS, expected);
      info("Focusing " + aNodeToFocus.id);
      aNodeToFocus.focus();
      await focused;
      ok(true, expected.id + " focused after " +
        aNodeToFocus.id + ".focus()");
    }

    async function expectFocusAfterRemove(aNodeToRemove, aExpectedFocus, aDisplayNone = false) {
      let focused = waitForEvent(EVENT_FOCUS, aExpectedFocus);
      info("Removing " + aNodeToRemove.id);
      if (aDisplayNone) {
        aNodeToRemove.style.display = "none";
      } else {
        aNodeToRemove.remove();
      }
      await focused;
      let friendlyExpected = aExpectedFocus == document ?
        "document" : aExpectedFocus.id;
      ok(true, friendlyExpected + " focused after " +
        aNodeToRemove.id + " removed");
    }

    async function doTests() {
      info("Testing removal of focused node itself");
      let button = getNode("button");
      await setFocus(button);
      await expectFocusAfterRemove(button, document);

      info("Testing removal of focused node's parent");
      let dialog = getNode("dialog");
      let dialogButton = getNode("dialogButton");
      await setFocus(dialogButton);
      await expectFocusAfterRemove(dialog, document);

      info("Testing removal of aria-activedescendant target");
      let listbox = getNode("listbox");
      let option = getNode("option");
      await setFocus(listbox, option);
      await expectFocusAfterRemove(option, listbox);

      info("Test hiding focused element with display: none");
      let groupingButton = getNode("groupingButton");
      await setFocus(groupingButton);
      await expectFocusAfterRemove(groupingButton, document, true);

      SimpleTest.finish();
    }

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

<body>

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

  <button id="button"></button>

  <div role="dialog" id="dialog">
    <button id="dialogButton"></button>
  </div>

  <div role="listbox" id="listbox" tabindex="0" aria-activedescendant="option">
    <div role="option" id="option"></div>
  </div>

  <div role="grouping" id="grouping">
    <button id="groupingButton">
  </div>

</body>
</html>