radio-focus-navigation-group-focusable-focus.html (2829B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Focus Navigation for the radio group</title> 4 <meta name="timeout" content="long"> 5 <link rel="author" href="mailto:zhoupeng.1996@bytedance.com"> 6 <link rel="help" href="https://issues.chromium.org/issues/421837104"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="resources/focus-utils.js"></script> 13 14 <input type="text" id="start"> 15 <form> 16 <label><input type="radio" name="radio" id="a">enabled 1</label> 17 <button id="btn">Button</button> 18 <label><input type="radio" name="radio" id="b">enabled 2</label> 19 <label><input type="radio" name="radio" id="c">enabled 3</label> 20 </form> 21 <input type="text" id="end"> 22 23 <script> 24 promise_test(async () => { 25 start.focus(); 26 assert_equals(document.activeElement, start); 27 await navigateFocusForward(); 28 assert_equals(document.activeElement, a); 29 await navigateFocusForward(); 30 assert_equals(document.activeElement, btn); 31 await navigateFocusForward(); 32 assert_equals(document.activeElement, end); 33 await navigateFocusBackward(); 34 assert_equals(document.activeElement, btn); 35 await navigateFocusBackward(); 36 assert_equals(document.activeElement, a); 37 await navigateFocusBackward(); 38 assert_equals(document.activeElement, start); 39 // Focus on the checked radio element. 40 b.checked = true; 41 start.focus(); 42 await navigateFocusForward(); 43 assert_equals(document.activeElement, btn); 44 await navigateFocusForward(); 45 assert_equals(document.activeElement, b); 46 await navigateFocusForward(); 47 assert_equals(document.activeElement, end); 48 await navigateFocusBackward(); 49 assert_equals(document.activeElement, b); 50 }, 'Focusable elements between radio elements in a group can be focused.'); 51 52 promise_test(async () => { 53 b.checked = false; 54 start.focus(); 55 assert_equals(document.activeElement, start); 56 await navigateFocusForward(); 57 assert_equals(document.activeElement, a); 58 // Arrow key navigation, skip btn. 59 await arrowDown(); 60 assert_equals(document.activeElement, b); 61 assert_true(b.checked); 62 await arrowUp(); 63 assert_equals(document.activeElement, a); 64 assert_true(a.checked); 65 await arrowDown(); 66 assert_equals(document.activeElement, b); 67 assert_true(b.checked); 68 await navigateFocusForward(); 69 assert_equals(document.activeElement, end); 70 await navigateFocusBackward(); 71 assert_equals(document.activeElement, b); 72 await navigateFocusBackward(); 73 assert_equals(document.activeElement, btn); 74 await navigateFocusBackward(); 75 assert_equals(document.activeElement, start); 76 }, 'During arrow key navigation, focus and checked is set on the radio element.'); 77 </script>