Radio button with aria-invalid breaks functionality

[pschaub]

When using the aria-invalid attribute on a radio button, the radio button becomes non-functional and cannot be clicked, but it is still shown in red as if it were in an invalid state. This behavior is unexpected and confusing for users.

According to the W3C specification for HTML5 forms, the aria-invalid attribute should not be used on radio buttons.

To reproduce the issue, please see the provided CodeSandbox link:
https://codesandbox.io/s/db-ui-core-radio-aria-invalid-55fh6z?file=/src/App.tsx
There you see that you are not able to click on the radio buttons to change the state.

Expected behavior: The radio button should function as expected, regardless of whether the aria-invalid attribute is present or not.

See also documentation: https://db-ui.github.io/core/?p=viewall-elements-radio

[mfranzke]

@pschaub great catch, thanks a lot !

According to the W3C specification for HTML5 forms, the aria-invalid attribute should not be used on radio buttons.

Could you please provide a link to the W3C in which you've found this aspect so that we could reference it within the docs?

[pschaub]

@mfranzke This was my mistake. I thought it is part of the specification but after checking it again aria-invalid seems to be allowed in the specification Accessible Rich Internet Applications (WAI-ARIA) 1.1. See https://www.w3.org/TR/wai-aria-1.1/#aria-invalid and https://www.w3.org/TR/wai-aria-1.1/#radio

But it is still confusing that the eslint rule jsx-a11y/role-supports-aria-props shows a warning:

The attribute aria-invalid is not supported by the role radio. This role is implicit on the element input. (jsx-a11y/role-supports-aria-props)

I updated this issue to focus on the functionality: the radio input is not clickable once DB UI is used, see above CodeSandbox example.