tab-table-caption.html (2359B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <meta name="variant" content="?caption-side=top"> 4 <meta name="variant" content="?caption-side=bottom"> 5 <title>Tab navigation around table with caption</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script> 12 "use strict"; 13 14 const searchParams = new URLSearchParams(document.location.search); 15 const captionSide = searchParams.get("caption-side"); 16 17 addEventListener("DOMContentLoaded", () => { 18 document.querySelector("table").style.captionSide = captionSide; 19 const tabKey = "\uE004"; 20 const shiftKey = "\uE008"; 21 const firstTabbable = document.querySelector("body > span"); 22 const lastTabbable = document.querySelector("table ~ span"); 23 const tabbableInCaption = document.querySelector("caption > span"); 24 const tabbableInCell = document.querySelector("td > span"); 25 for (const data of [ 26 {init: firstTabbable, prev: null, next: tabbableInCell }, 27 {init: tabbableInCaption, prev: tabbableInCell, next: lastTabbable }, 28 {init: tabbableInCell, prev: firstTabbable, next: tabbableInCaption }, 29 {init: lastTabbable, prev: tabbableInCaption, next: null}, 30 ]) { 31 if (data.prev) { 32 promise_test(async () => { 33 data.init.focus(); 34 await new test_driver.Actions().keyDown(shiftKey).keyDown(tabKey).keyUp(tabKey).keyUp(shiftKey).send(); 35 assert_equals(document.activeElement, data.prev); 36 }, `Shift+Tab on ${data.init.outerHTML} should move focus to ${data.prev.outerHTML}`); 37 } 38 if (data.next) { 39 promise_test(async () => { 40 data.init.focus(); 41 await new test_driver.Actions().keyDown(tabKey).keyUp(tabKey).send(); 42 assert_equals(document.activeElement, data.next); 43 }, `Tab on ${data.init.outerHTML} should move focus to ${data.next.outerHTML}`); 44 } 45 } 46 }); 47 </script> 48 <span tabindex="0">First tabbable span</span> 49 <table> 50 <tbody> 51 <tr> 52 <td><span tabindex="0">Tabbable in cell<span></td> 53 </tr> 54 </tbody> 55 <caption><span tabindex="0">Tabbable in caption</span></caption> 56 </table> 57 <span tabindex="0">Last tabbable span</span>