1 files changed, 105 insertions, 0 deletions
diff --git a/toolkit/content/tests/widgets/test_panel_item_accesskey.html b/toolkit/content/tests/widgets/test_panel_item_accesskey.html
new file mode 100644
index 0000000000..a35e94d456
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_panel_item_accesskey.html
@@ -0,0 +1,105 @@
+<!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>