test_panel_item_accesskey.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<!-- Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/ -->

<html>

<head>

  <title>Test Panel Item Accesskey Support</title>

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

  <script type="text/javascript" src="head.js"></script>

  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />

</head>

<body>

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

<div id="content">

  <panel-list>

    <panel-item accesskey="F">First item</panel-item>

    <panel-item accesskey="S">Second item</panel-item>

    <panel-item>Third item</panel-item>

  </panel-list>

</div>

<pre id="test">

<script class="testbody" type="application/javascript">

const {BrowserTestUtils} = ChromeUtils.importESModule("resource://testing-common/BrowserTestUtils.sys.mjs");

add_task(async function testAccessKey() {

  function assertAccessKeys(items, keys, { checkLabels = false } = {}) {

    is(items.length, keys.length, "Got the same number of items and keys");

    for (let i = 0; i < items.length; i++) {

      is(items[i].accessKey, keys[i], `Item ${i} has the right key`);

      if (checkLabels) {

        let label = items[i].shadowRoot.querySelector("label");

        is(label.accessKey, keys[i] || null, `Label ${i} has the right key`);

  let panelList = document.querySelector("panel-list");

  let panelItems = [...panelList.children];

  info("Accesskeys should be removed when closed");

  assertAccessKeys(panelItems, ["", "", ""]);

  info("Accesskeys should be set when open");

  let panelShown = BrowserTestUtils.waitForEvent(panelList, "shown");

  panelList.show();

  await panelShown;

  assertAccessKeys(panelItems, ["F", "S", ""], { checkLabels: true });

  info("Changing accesskeys should happen right away");

  panelItems[1].accessKey = "c";

  panelItems[2].accessKey = "T";

  assertAccessKeys(panelItems, ["F", "c", "T"], { checkLabels: true });

  info("Accesskeys are removed again on hide");

  let panelHidden = BrowserTestUtils.waitForEvent(panelList, "hidden");

  panelList.hide();

  await panelHidden;

  assertAccessKeys(panelItems, ["", "", ""]);

  info("Accesskeys are set again on show");

  panelItems[0].removeAttribute("accesskey");

  panelShown = BrowserTestUtils.waitForEvent(panelList, "shown");

  panelList.show();

  await panelShown;

  assertAccessKeys(panelItems, ["", "c", "T"], { checkLabels: true });

  info("Check that accesskeys can be used without the modifier when open");

  let secondClickCount = 0;

  let thirdClickCount = 0;

  panelItems[1].addEventListener("click", () => secondClickCount++);

  panelItems[2].addEventListener("click", () => thirdClickCount++);

  // Make sure the focus is in the window.

  panelItems[0].focus();

  panelHidden = BrowserTestUtils.waitForEvent(panelList, "hidden");

  synthesizeKey("c", {});

  await panelHidden;

  is(secondClickCount, 1, "The accesskey worked unmodified");

  is(thirdClickCount, 0, "The other listener wasn't fired");

  synthesizeKey("c", {});

  synthesizeKey("t", {});

  is(secondClickCount, 1, "The key doesn't trigger when closed");

  is(thirdClickCount, 0, "The key doesn't trigger when closed");

  panelShown = BrowserTestUtils.waitForEvent(panelList, "shown");

  panelList.show();

  await panelShown;

  panelHidden = BrowserTestUtils.waitForEvent(panelList, "hidden");

  synthesizeKey("t", {});

  await panelHidden;

  is(secondClickCount, 1, "The other listener wasn't fired");

  is(thirdClickCount, 1, "The accesskey worked unmodified");

});

</script>

</pre>

</body>

</html>