radio-focus-navigation-checked.html (3130B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Focus Navigation for the radio group</title> 4 <link rel="author" href="mailto:zhoupeng.1996@bytedance.com"> 5 <link rel="help" href="https://issues.chromium.org/issues/421837104"> 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 src="resources/focus-utils.js"></script> 12 13 <input type="text" id="start"> 14 <form> 15 <input type="radio" name="radio" id="a"> 16 <input type="radio" name="radio" id="b"> 17 </form> 18 <input type="text" id="end"> 19 20 <script> 21 const c = document.createElement('input'); 22 c.type = 'radio'; 23 c.name = 'radio'; 24 c.checked = true; 25 26 promise_test(async () => { 27 start.focus(); 28 assert_equals(document.activeElement, start); 29 await navigateFocusForward(); 30 assert_equals(document.activeElement, a); 31 // Append checked radio element. 32 document.querySelector('form').appendChild(c); 33 await navigateFocusForward(); 34 assert_equals(document.activeElement, c); 35 await navigateFocusForward(); 36 assert_equals(document.activeElement, end); 37 await navigateFocusBackward(); 38 assert_equals(document.activeElement, c); 39 await navigateFocusBackward(); 40 assert_equals(document.activeElement, start); 41 }, 'Focus the new checked radio in the focused radio group.'); 42 43 promise_test(async () => { 44 assert_true(c.checked); 45 a.focus(); 46 assert_equals(document.activeElement, a); 47 }, 'Focusable radio can be focused even with a checked radio in the group.'); 48 49 promise_test(async () => { 50 start.focus(); 51 assert_equals(document.activeElement, start); 52 assert_true(c.checked); 53 await navigateFocusForward(); 54 assert_equals(document.activeElement, c); 55 await navigateFocusForward(); 56 assert_equals(document.activeElement, end); 57 await navigateFocusBackward(); 58 assert_equals(document.activeElement, c); 59 await navigateFocusBackward(); 60 assert_equals(document.activeElement, start); 61 }, 'Focus the checked radio in the group.'); 62 63 promise_test(async () => { 64 a.focus(); 65 assert_equals(document.activeElement, a); 66 // Set as the checked radio. 67 b.checked = true; 68 assert_false(c.checked); 69 await navigateFocusForward(); 70 assert_equals(document.activeElement, b); 71 await navigateFocusForward(); 72 assert_equals(document.activeElement, end); 73 await navigateFocusBackward(); 74 assert_equals(document.activeElement, b); 75 await navigateFocusBackward(); 76 assert_equals(document.activeElement, start); 77 }, 'Focus the checked radio in the focused radio group.'); 78 79 promise_test(async () => { 80 b.checked = false; 81 start.focus(); 82 await navigateFocusForward(); 83 assert_equals(document.activeElement, a); 84 await navigateFocusForward(); 85 assert_equals(document.activeElement, end); 86 await navigateFocusBackward(); 87 assert_equals(document.activeElement, a); 88 await navigateFocusBackward(); 89 assert_equals(document.activeElement, start); 90 }, 'When `checked` is false on a radio element, focus navigation target the radio group first element.'); 91 </script>