tab-table-caption.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/interaction/focus/tab-table-caption.html?caption-side=bottom - WPT Dashboard Interop Dashboard
- /html/interaction/focus/tab-table-caption.html?caption-side=top - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset="utf-8">

<meta name="variant" content="?caption-side=top">

<meta name="variant" content="?caption-side=bottom">

<title>Tab navigation around table with caption</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<script src="/resources/testdriver-actions.js"></script>

<script>

  "use strict";

  const searchParams = new URLSearchParams(document.location.search);

  const captionSide = searchParams.get("caption-side");

  addEventListener("DOMContentLoaded", () => {

    document.querySelector("table").style.captionSide = captionSide;

    const tabKey = "\uE004";

    const shiftKey = "\uE008";

    const firstTabbable = document.querySelector("body > span");

    const lastTabbable = document.querySelector("table ~ span");

    const tabbableInCaption = document.querySelector("caption > span");

    const tabbableInCell = document.querySelector("td > span");

    for (const data of [

      {init: firstTabbable, prev: null, next: tabbableInCell },

      {init: tabbableInCaption, prev: tabbableInCell, next: lastTabbable },

      {init: tabbableInCell, prev: firstTabbable, next: tabbableInCaption },

      {init: lastTabbable, prev: tabbableInCaption, next: null},

    ]) {

      if (data.prev) {

        promise_test(async () => {

          data.init.focus();

          await new test_driver.Actions().keyDown(shiftKey).keyDown(tabKey).keyUp(tabKey).keyUp(shiftKey).send();

          assert_equals(document.activeElement, data.prev);

        }, `Shift+Tab on ${data.init.outerHTML} should move focus to ${data.prev.outerHTML}`);

      if (data.next) {

        promise_test(async () => {

          data.init.focus();

          await new test_driver.Actions().keyDown(tabKey).keyUp(tabKey).send();

          assert_equals(document.activeElement, data.next);

        }, `Tab on ${data.init.outerHTML} should move focus to ${data.next.outerHTML}`);

});

</script>

<span tabindex="0">First tabbable span</span>

<table>

  <tbody>

    <tr>

      <td><span tabindex="0">Tabbable in cell<span></td>

    </tr>

  </tbody>

  <caption><span tabindex="0">Tabbable in caption</span></caption>

</table>

<span tabindex="0">Last tabbable span</span>