input-radio-key-navigation.html (2085B)
1 <!doctype html> 2 <title>Keyboard navigation on input type=radio</title> 3 <meta charset=utf-8> 4 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 5 <link rel="author" href="https://mozilla.org" title="Mozilla"> 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 12 <form dir="ltr"> 13 <input type=radio name=whatever value=1> 14 <input type=radio name=whatever value=2> 15 <input type=radio name=whatever value=3> 16 </form> 17 <form dir="rtl"> 18 <input type=radio name=whatever value=1> 19 <input type=radio name=whatever value=2> 20 <input type=radio name=whatever value=3> 21 </form> 22 <script> 23 const KEYS = { 24 ArrowLeft: '\uE012', 25 ArrowUp: '\uE013', 26 ArrowRight: '\uE014', 27 ArrowDown: '\uE015', 28 }; 29 30 function nextFocusIndex(currentIndex, length, forward) { 31 if (forward) { 32 return (currentIndex + 1) % length; 33 } 34 return (currentIndex == 0 ? length : currentIndex) - 1; 35 } 36 37 async function testMove(form, keyName, forward) { 38 let radios = form.querySelectorAll("input[type=radio]"); 39 assert_equals(radios.length, 3, "Sanity check"); 40 41 let focusIndex = 1; 42 radios[focusIndex].focus(); 43 44 // Enough to wrap around, and one more to test the last active element too. 45 for (let i = 0; i <= radios.length; ++i) { 46 assert_equals(document.activeElement, radios[focusIndex], `Focused expected radio input (${focusIndex})`); 47 await test_driver.send_keys(document.activeElement, KEYS[keyName]); 48 focusIndex = nextFocusIndex(focusIndex, radios.length, forward); 49 } 50 } 51 52 promise_test(async t => { 53 for (let form of document.querySelectorAll("form")) { 54 const rtl = form.dir == "rtl"; 55 await testMove(form, "ArrowDown", /* forward = */ true); 56 await testMove(form, "ArrowUp", /* forward = */ false); 57 await testMove(form, "ArrowLeft", /* forward = */ rtl); 58 await testMove(form, "ArrowRight", /* forward = */ !rtl); 59 } 60 }); 61 </script>