radio-keyboard-navigation-order.html (2772B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Radio button group keyboard navigation order</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-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 </head> 12 <body> 13 <form id="inside"> 14 <input type="radio" name="inside" id="inside1"/> 15 <input type="radio" name="inside" id="inside2"/> 16 <input type="radio" name="inside" id="inside3"/> 17 </form> 18 <form id="before"></form> 19 <input type="radio" form="before" name="before" id="before1"/> 20 <input type="radio" form="before" name="before" id="before2"/> 21 <input type="radio" form="before" name="before" id="before3"/> 22 <input type="radio" form="after" name="after" id="after1"/> 23 <input type="radio" form="after" name="after" id="after2"/> 24 <input type="radio" form="after" name="after" id="after3"/> 25 <form id="after"></form> 26 <input type="radio" name="mix-form" form="mix-form" id="mix-form1"> 27 <form id="mix-form"> 28 <input type="radio" name="mix-form" id="mix-form2"/> 29 </form> 30 <input type="radio" name="mix-form" form="mix-form" id="mix-form3"><br> 31 <input type="radio" name="mix" id="mix1"/> 32 <form id="mix"> 33 <input type="radio" name="mix" id="mix2"/> 34 </form> 35 <input type="radio" name="mix" id="mix3"/> 36 <input type="radio" name="doc" id="doc1"/> 37 <input type="radio" name="doc" id="doc2"/> 38 <input type="radio" name="doc" id="doc3"/> 39 <script> 40 async function pressRight() { 41 return new test_driver.Actions() 42 .keyDown("\uE014") 43 .keyUp("\uE014") 44 .send(); 45 } 46 47 promise_test(async () => { 48 for (const groupName of ["inside", "before", "after", "mix-form", "mix", "doc"]) { 49 const firstInGroup = document.querySelector(`input[name="${groupName}"]`); 50 const newInput = document.createElement("input"); 51 newInput.id = groupName + "New"; 52 newInput.type = "radio"; 53 if (groupName != "doc") { 54 newInput.setAttribute("form", groupName); 55 } 56 newInput.name = groupName; 57 firstInGroup.after(newInput); 58 } 59 60 for (const formId of ["inside", "before", "after", "mix-form", "mix"]) { 61 document.forms[formId].elements[0].focus(); 62 for (const radio of document.forms[formId].elements) { 63 assert_equals(radio, document.activeElement, `Navigated to next radio button in form '${formId}'`); 64 await pressRight(); 65 } 66 } 67 68 const radios = document.querySelectorAll("input[name='doc']"); 69 radios[0].focus(); 70 for (const radio of radios) { 71 assert_equals(radio, document.activeElement, `Navigated to next radio button on document`); 72 await pressRight(); 73 } 74 }, "Radio button keyboard navigation should proceed in tree-order."); 75 </script> 76 </body> 77 </html>