Passing `{ selected: true }` to `getByRole` of a radio / checkbox throws an error

Describe the feature you’d like:

Currently trying to find checked radio / checkbox throws an error "aria-selected" is not supported on role "radio". I’d expect it to work for natively selected elements.

Suggested implementation:

Just try to find by checked first.

Describe alternatives you’ve considered:

Currently to get those, we need to filter a getAllBy* query:

const selected = getAllByLabelText('preference').filter(control => control.checked);

Teachability, Documentation, Adoption, Migration Strategy:

The WAI-ARIA spec separates aria-checked from aria-selected so maybe we can introduce this change too. Or just update the docs to link to both. Suggested tab example after implementing the change:

you can get the “Native”-tab by calling getByRole('tab', { selected: true }). To learn more about the selected state and which elements can have this state see ARIA aria-selected or ARIA aria-checked.

[eps1lon]

Why is a checked checkbox considered selected? As far as I know these are two different concepts.

[kentcdodds]

🎉 This issue has been resolved in version 7.21.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀