html/interaction/focus/tab-table-caption.html

<!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>