RadioGroup: individual radio options are not testable with Playwright

[OrRosenblatt]

Description

RadioGroup.Item renders the <input type="radio"> as visually hidden. There is no way to target a specific radio option using Playwright's standard getBy* locators:

• getByRole('radio', { name: 'Foo' }): doesn't match. The hidden input has no aria-labelledby linking it to the item text.
• getByRole('radio'): finds all radios, but no way to filter by value. All inputs share the same HTML name attribute bc of RadioGroup.Item targeting "The name of the input fields in the radio (Useful for form submission)".
• getByLabel('Foo') / getByText('Foo'): finds the <span> or <label>, not the <input> with radio role.

The only workaround is .locator('[value="foo"]'), which bypasses role-based testing entirely.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/lucid-meadow-jclf58

Steps to Reproduce

1. Navigate to link.
2. Inspect DOM: <span id="...:radio:label:foo">Foo</span> exists but the associated <input type="radio"> has no aria-labelledby pointing to it.
3. In browser console document.querySelector('input[value="foo"]') has no accessible name.

Ark UI Version

5.x.x

Framework

• React
• Solid
• Vue
• Svelte

Browser

Google Chrome

Additional Information

No response

[segunadebayo]

The issue here is that <RadioGroup.ItemHiddenInput /> is missing from your setup. This component renders the actual
<input type="radio"> element. Without it, there's no radio input in the DOM for getByRole('radio') to find.

<RadioGroup.Item value="foo"> <RadioGroup.ItemText>Foo</RadioGroup.ItemText> <RadioGroup.ItemControl /> <RadioGroup.ItemHiddenInput /> // ← add this </RadioGroup.Item>

With ItemHiddenInput included, getByRole('radio', { name: 'Foo' }) should work as expected.

[OrRosenblatt]

Hi @segunadebayo, thank you for the quick response! Adding RadioGroup.ItemHiddenInput does make getByRole('radio', { name: '...' }) find the element correctly.

However, this suggestion doesn't fully solve my issue.
Test interactions will still fail bc Playwright throws "label intercepts pointer events" when calling .click() or .check() on the located input. The visually hidden input (clip: rect(0 0 0 0)) is behind the parent <label>, which captures the pointer event.
It's a known Playwright limitation, see microsoft/playwright#35885.

My current workarounds is using { force: true } but it limits standard role-based testing flow.

Can you please consider an alternative to the clip: rect(0 0 0 0) which would keep accessibility intact for testing tools / libraries? The testing frameworks usually rely on a11y (like Playwright or Cypress).

TL;DR for anyone who's encountering this:
getByRole('radio', { name: "Foo" }).check() won't work out of the box.

[segunadebayo]

Fixed the issue here: chakra-ui/zag@7ed590b

Will be in the next version of Ark