walkRadio walks through all radio buttons

[DaPaleta]

Reproduction example

https://codesandbox.io/s/hungry-zeh-fpim30?file=/src/App.test.js

Prerequisites

1. render a native HTML radio group
2. await user.keyboard('{ArrowRight'})
3. expect the next radio button to be the active element

Expected behavior

active element should be the next radio button. MDN guide, aria guide.
In addition, the behavior direction is wrong for up/down arrow keys, as specified in the aria guide from before.

Actual behavior

I debugged the code and it seems like the for loop is called over and over as long as there are members in the radio group, which is wrong. It should only be called once.

User-event version

14.4.3

Environment

in my environment I used:

"jsdom": "^21.1.1"
"@testing-library/user-event": "^14.4.3"
"jest": "^29.5.0"
"css.escape": "^1.5.1" // polyfill for window.CSS.escape used in walkRadio

But it seems to reproduce in the sandbox for older environments as well.

Additional context

solution:

export function walkRadio(
  instance: Instance,
  el: HTMLInputElement & {type: 'radio'},
  direction: -1 | 1,
) {
  const window = getWindow(el)
  const group = Array.from(
    el.ownerDocument.querySelectorAll<HTMLInputElement & {type: 'radio'}>(
      el.name
        ? `input[type="radio"][name="${window.CSS.escape(el.name)}"]`
        : `input[type="radio"][name=""], input[type="radio"]:not([name])`,
    ),
  )
  for (let i = group.findIndex(e => e === el) + direction; ; i += direction) {
    if (!group[i]) {
      i = direction > 0 ? 0 : group.length - 1
    }
    if (group[i] === el) {
      return
    }
    if (isDisabled(group[i])) {
      continue
    }

    focusElement(group[i])
    instance.dispatchUIEvent(group[i], 'click')
    return
  }
}

[ph-fritsche]

Duplicate of #1048