fix(keyboard): walk through radio group per arrow keys (#1049)

Co-authored-by: Violet Peña <[email protected]>
Co-authored-by: Philipp Fritsche <[email protected]>
Co-authored-by: Joshua Ferrell <[email protected]>

Author: 4 people

src/event/behavior/keydown.ts

@@ -28,7 +28,7 @@ const keydownBehavior: {
   ArrowDown: (event, target, instance) => {
     /* istanbul ignore else */
     if (isElementType(target, 'input', {type: 'radio'} as const)) {
-      return () => walkRadio(instance, target, -1)
+      return () => walkRadio(instance, target, 1)
     }
   },
   ArrowLeft: (event, target, instance) => {
@@ -46,7 +46,7 @@ const keydownBehavior: {
   ArrowUp: (event, target, instance) => {
     /* istanbul ignore else */
     if (isElementType(target, 'input', {type: 'radio'} as const)) {
-      return () => walkRadio(instance, target, 1)
+      return () => walkRadio(instance, target, -1)
     }
   },
   Backspace: (event, target, instance) => {

src/event/radio.ts

@@ -28,5 +28,6 @@ export function walkRadio(
 
     focusElement(group[i])
     instance.dispatchUIEvent(group[i], 'click')
+    return
   }
 }

tests/event/behavior/keydown.ts

@@ -317,6 +317,8 @@ cases(
       <input type="radio" name="" value="nameless2"/>
       <input type="radio" name="group" value="c" disabled/>
       <input type="radio" name="group" value="d"/>
+      <input type="radio" name="group" value="f" aria-disabled />
+      <input type="radio" name="group" value="e" />
       <input type="radio" name="foo"/>
       <input type="text" name="group"/>
     `,
@@ -360,14 +362,14 @@ cases(
       expectedTarget: '//input[@value="a"]',
     },
     'forward around the corner': {
-      focus: '//input[@value="d"]',
+      focus: '//input[@value="e"]',
       key: 'ArrowRight',
       expectedTarget: '//input[@value="a"]',
     },
     'backward around the corner': {
       focus: '//input[@value="a"]',
       key: 'ArrowUp',
-      expectedTarget: '//input[@value="d"]',
+      expectedTarget: '//input[@value="e"]',
     },
     'do nothing on single radio': {
       focus: '//input[@name="solo"]',
@@ -378,5 +380,10 @@ cases(
       key: 'ArrowRight',
       expectedTarget: '//input[@value="nameless2"]',
     },
+    'on radios with aria-disabled': {
+      focus: '//input[@value="d"]',
+      key: 'ArrowDown',
+      expectedTarget: '//input[@value="f"]',
+    },
   },
 )