summaryrefslogtreecommitdiff
path: root/accessible/tests/mochitest/events/test_focus_name.html
blob: f0db264277b92d65482ebb608cb0bcc292bf2121 (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
<html>

<head>
  <title>Accessible name testing on focus</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="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

  <script type="application/javascript"
          src="../common.js"></script>
  <script type="application/javascript"
          src="../events.js"></script>

  <script type="application/javascript">
    /**
     * Checker for invokers.
     */
    function actionChecker(aID, aDescription)
    {
      this.__proto__ = new invokerChecker(EVENT_FOCUS, aID);

      this.check = function actionChecker_check(aEvent)
      {
        var target = aEvent.accessible;
        is(target.description, aDescription,
           "Wrong description for " + prettyName(target));
      }
    }

    var gFocusHandler = {
      handleEvent: function gFocusHandler_handleEvent(aEvent) {
        var elm = aEvent.target;
        if (elm.nodeType != nsIDOMNode.ELEMENT_NODE)
          return;

        gTooltipElm.style.display = "block";

        elm.setAttribute("aria-describedby", "tooltip");
      }
    };

    var gBlurHandler = {
      handleEvent: function gBlurHandler_handleEvent(aEvent) {
        gTooltipElm.style.display = "none";

        var elm = aEvent.target;
        if (elm.nodeType == nsIDOMNode.ELEMENT_NODE)
          elm.removeAttribute("aria-describedby");
      }
    };

    /**
     * Do tests.
     */

    // gA11yEventDumpID = "eventdump"; // debug stuff
    //gA11yEventDumpToConsole = true;

    var gQueue = null;

    var gButtonElm = null;
    var gTextboxElm = null;
    var gTooltipElm = null;

    function doTests()
    {
      gButtonElm = getNode("button");
      gTextboxElm = getNode("textbox");
      gTooltipElm = getNode("tooltip");

      gButtonElm.addEventListener("focus", gFocusHandler, false);
      gButtonElm.addEventListener("blur", gBlurHandler, false);
      gTextboxElm.addEventListener("focus", gFocusHandler, false);
      gTextboxElm.addEventListener("blur", gBlurHandler, false);

      // The aria-describedby is changed on DOM focus. Accessible description
      // should be updated when a11y focus is fired.
      gQueue = new eventQueue(nsIAccessibleEvent.EVENT_FOCUS);
      gQueue.onFinish = function()
      {
        gButtonElm.removeEventListener("focus", gFocusHandler, false);
        gButtonElm.removeEventListener("blur", gBlurHandler, false);
        gTextboxElm.removeEventListener("focus", gFocusHandler, false);
        gTextboxElm.removeEventListener("blur", gBlurHandler, false);
      }

      var descr = "It's a tooltip";
      gQueue.push(new synthFocus("button", new actionChecker("button", descr)));
      gQueue.push(new synthTab("textbox", new actionChecker("textbox", descr)));

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

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

<body>

  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=520709"
     title="mochitest to ensure name/description are updated on a11y focus if they were changed on DOM focus">
    Mozilla Bug 520709
  </a>
  <p id="display"></p>
  <div id="content" style="display: none"></div>
  <pre id="test">
  </pre>

  <div id="tooltip" style="display: none" aria-hidden="true">It's a tooltip</div>
  <button id="button">button</button>
  <input id="textbox">

  <div id="eventdump"></div>
</body>
</html>