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>

      <panel-list id="shared">

        <panel-item accesskey="b" intended-duplicate-accesskey="" hidden

          >Hidden</panel-item

        <panel-item accesskey="b" intended-duplicate-accesskey="" disabled

          >Disabled</panel-item

        <panel-item accesskey="b" intended-duplicate-accesskey=""

          >Bing</panel-item

        <panel-item accesskey="o">Other</panel-item>

        <panel-item accesskey="B" intended-duplicate-accesskey=""

          >Bookmarks</panel-item

        <panel-item accesskey="h">History</panel-item>

        <panel-item accesskey='"'>Quote</panel-item>

      </panel-list>

    </div>

    <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");

});

      add_task(async function testSharedAccessKey() {

        let panelList = document.getElementById("shared");

        let [hiddenItem, disabledItem, bing, other, bookmarks, history, quote] =

          panelList.children;

        let clicks = [];

        for (let item of panelList.children) {

          item.addEventListener("click", () => clicks.push(item));

        let activeItem = () => document.activeElement;

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

        panelList.show();

        await panelShown;

        history.focus();

        synthesizeKey("b", {});

        is(activeItem(), bing, "The key wraps around to the first match");

        synthesizeKey("b", {});

        is(activeItem(), bookmarks, "The key moves to the next match");

        synthesizeKey("b", {});

        is(activeItem(), bing, "The key wraps around again");

        ok(panelList.open, "The panel stays open");

        isDeeply(clicks, [], "No item was activated");

ok(

          !hiddenItem.matches(":focus") && !disabledItem.matches(":focus"),

          "Hidden and disabled items are skipped"

);

        synthesizeKey("KEY_ArrowDown", {});

        is(activeItem(), other, "Arrow keys resume from the selected match");

        synthesizeKey("b", {});

        is(activeItem(), bookmarks, "The key moves to the match after focus");

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

        synthesizeKey("KEY_Enter", {});

        await panelHidden;

        isDeeply(clicks, [bookmarks], "Enter activated the match");

        info("A key that one visible item has activates it right away");

        clicks = [];

        bookmarks.hidden = true;

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

        panelList.show();

        await panelShown;

        history.focus();

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

        synthesizeKey("b", {});

        await panelHidden;

        isDeeply(clicks, [bing], "The visible item was activated");

        bookmarks.hidden = false;

        info("A punctuation accesskey activates its item");

        clicks = [];

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

        panelList.show();

        await panelShown;

        history.focus();

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

        synthesizeKey('"', {});

        await panelHidden;

        isDeeply(clicks, [quote], "The item with the quote key was activated");

});

    </script>

  </body>

</html>