test_accesskey_visibility_content.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <title>Test for Bug 1945032 - HTML accesskeys in content</title>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <script src="/tests/SimpleTest/EventUtils.js"></script>

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

</head>

<body>

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

  <div id="content">

    <button id="visible-button" accesskey="v">Visible</button>

    <button id="hidden-display" accesskey="d" style="display: none">

      Hidden (display)

    </button>

    <button id="hidden-visibility" accesskey="i" style="visibility: hidden">

      Hidden (visibility)

    </button>

    <button id="hidden-attr" accesskey="h" hidden="">Hidden (attribute)</button>

  </div>

  <pre id="test">

<script type="application/javascript">

function performAccessKey(aKey) {

  synthesizeKey(

    aKey,

    navigator.platform.includes("Mac")

      ? { altKey: true, ctrlKey: true }

      : { altKey: true, shiftKey: true }

);

add_task(async function hiddenButtonsInContent() {

  let visibleButton = document.getElementById("visible-button");

  let hiddenDisplay = document.getElementById("hidden-display");

  let hiddenVisibility = document.getElementById("hidden-visibility");

  let hiddenAttr = document.getElementById("hidden-attr");

  let seenEvents = [];

  function trackEvent(event) {

    seenEvents.push({ target: event.target.id, type: event.type });

  [visibleButton, hiddenDisplay, hiddenVisibility, hiddenAttr].forEach(

    function (element) {

      element.addEventListener("click", trackEvent);

);

  isnot(

    document.activeElement,

    visibleButton,

    "Visible button should not have focus initially."

);

  performAccessKey("v");

  is(seenEvents.length, 1, "One click event fired.");

  is(seenEvents[0].target, "visible-button", "Visible button was clicked.");

is(

    document.activeElement,

    visibleButton,

    "Focus should move to visible button."

);

  performAccessKey("d");

  is(seenEvents.length, 2, "Click event fired for display:none button in content.");

  is(seenEvents[1].target, "hidden-display", "display:none button was clicked.");

is(

    document.activeElement,

    visibleButton,

    "Focus should stay on visible button, even though display:none button was activated."

);

  performAccessKey("i");

is(

    seenEvents.length,

3,

    "Click event fired for visibility:hidden button in content."

);

  is(seenEvents[2].target, "hidden-visibility", "visibility:hidden button was clicked.");

is(

    document.activeElement,

    visibleButton,

    "Focus should stay on visible button, even though visibility:hidden button was activated."

);

  performAccessKey("h");

  is(seenEvents.length, 4, "Click event fired for hidden attribute button in content.");

  is(seenEvents[3].target, "hidden-attr", "hidden attribute button was clicked.");

is(

    document.activeElement,

    visibleButton,

    "Focus should stay on visible button, even though hidden attribute button was activated."

);

});

</script>

</pre>

</body>

</html>