test_namechange.html

Enable keyboard shortcuts

<html>

<head>

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

  <script type="application/javascript"

          src="../common.js"></script>

  <script type="application/javascript"

          src="../promisified-events.js"></script>

  <script type="application/javascript"

          src="../role.js"></script>

  <script type="application/javascript"

          src="../states.js"></script>

  <script type="application/javascript">

    // //////////////////////////////////////////////////////////////////////////

    // Do tests

    // gA11yEventDumpToConsole = true; // debuggin

    async function doTests() {

      let nameChanged = waitForEvent(EVENT_NAME_CHANGE, "tst1");

      getNode("tst1").setAttribute("aria-label", "hi");

      await nameChanged;

      let unexpected = new UnexpectedEvents([[EVENT_NAME_CHANGE, "tst1"]]);

      getNode("tst1").setAttribute("alt", "alt");

      await unexpected.flush();

      unexpected.stop();

      unexpected = new UnexpectedEvents([[EVENT_NAME_CHANGE, "tst1"]]);

      getNode("tst1").setAttribute("title", "title");

      await unexpected.flush();

      unexpected.stop();

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, "tst1");

      getNode("tst1").setAttribute("aria-labelledby", "display");

      await nameChanged;

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, "tst2");

      getNode("tst2").setAttribute("aria-labelledby", "display");

      await nameChanged;

      unexpected = new UnexpectedEvents([

        [EVENT_NAME_CHANGE, "tst2"],

]);

      getNode("tst2").setAttribute("alt", "alt");

      getNode("tst2").setAttribute("title", "title");

      getNode("tst2").setAttribute("aria-label", "hi");

      await unexpected.flush();

      unexpected.stop();

      // When `alt` attribute is added or removed from a broken img,

      // the accessible is recreated.

      let hidden = waitForEvent(EVENT_HIDE, getAccessible("tst3"));

      let shown = waitForEvent(EVENT_SHOW, "tst3");

      todo(false, "No accessible recreation should happen, just name change event");

      getNode("tst3").setAttribute("alt", "one");

      await Promise.all([hidden, shown]);

      // When an `alt` attribute is changed, there is a name change event.

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, "tst3");

      getNode("tst3").setAttribute("alt", "two");

      await nameChanged;

      unexpected = new UnexpectedEvents([[EVENT_NAME_CHANGE, "tst3"]]);

      getNode("tst3").setAttribute("title", "title");

      await unexpected.flush();

      unexpected.stop();

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, "tst4");

      getNode("tst4").setAttribute("title", "title");

      await nameChanged;

      const labelledBy = getNode("labelledBy");

      const label = getNode("label");

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, labelledBy);

      info("Changing text of aria-labelledby target");

      label.textContent = "l2";

      await nameChanged;

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, labelledBy);

      info("Adding node to aria-labelledby target");

      label.innerHTML = '<p id="labelChild">l3</p>';

      await nameChanged;

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, labelledBy);

      info("Changing text of aria-labelledby target's child");

      getNode("labelChild").textContent = "l4";

      await nameChanged;

      const lateLabelledBy = getNode("lateLabelledBy");

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, lateLabelledBy);

      info("Setting aria-labelledby");

      lateLabelledBy.setAttribute("aria-labelledby", "lateLabel");

      await nameChanged;

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, lateLabelledBy);

      info("Changing text of late aria-labelledby target's child");

      getNode("lateLabelChild").textContent = "l2";

      await nameChanged;

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, "listitem");

      info("Changing textContent of listitem child");

      // Changing textContent replaces the text leaf with a new one.

      getNode("listitem").textContent = "world";

      await nameChanged;

      nameChanged = waitForEvent(EVENT_NAME_CHANGE, "button");

      info("Changing text of button's text leaf");

      // Changing the text node's data changes the text without replacing the

      // leaf.

      getNode("button").firstChild.data = "after";

      await nameChanged;

      SimpleTest.finish();

    SimpleTest.waitForExplicitFinish();

    addA11yLoadEvent(doTests);

  </script>

</head>

<body>

  <a target="_blank"

     href="https://bugzilla.mozilla.org/show_bug.cgi?id=991969"

     title="Event not fired when description changes">

    Bug 991969

  </a>

  <p id="display"></p>

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

  <pre id="test">

  </pre>

  <img id="tst1" alt="initial" src="../moz.png">

  <img id="tst2" src="../moz.png">

  <img id="tst3">

  <img id="tst4" src="../moz.png">

  <div id="labelledBy" aria-labelledby="label"></div>

  <div id="label">l1</div>

  <div id="lateLabelledBy"></div>

  <div id="lateLabel"><p id="lateLabelChild">l1</p></div>

  <ul><li id="listitem">hello</li></ul>

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

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

</body>

</html>