Radio inputs - using Arrow keys to navigate focuses incorrect inputs

[vgpena]

Reproduction example

https://codesandbox.io/s/ancient-forest-44xrzm?file=/src/App.js

Prerequisites

Render a group of at least 3 radio inputs that:

• share the same name attribute
• can be navigated to using the keyboard (i.e., are not disabled)

Expected behavior

Codesandbox test: https://codesandbox.io/s/ancient-forest-44xrzm?file=/src/App.test.js

Keyboard user events should follow the patterns outlined here.

Specifically, ArrowRight and ArrowDown should advance the focus within the radio group, wrapping back to the beginning if needed. ArrowLeft and ArrowUp should reverse the focus within the group, wrapping back to the end if needed.

Actual behavior

Arrow keys send focus to the wrong input in the Radio Group. E.g.,ArrowRight send focus through all the inputs to the last input in the group.

User-event version

14.4.3

Environment

Bug is reproducible in CodeSandbox, so skipping this section.

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

Radio group arrow functionality was added here - https://github.com/testing-library/user-event/pull/995

[ph-fritsche]

Thanks for the report :heart: