Input aria-invalid attribute is being rendered without a valid ("true") value

[soujvnunes]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.2.0

What browser are you using?

Chrome Version 131.0.6778.265 (arm64)

Reproduction URL

CodeSandbox

Describe your issue

I'm currently using Storybook to document components and during the customized Headless Input component accessbility testing, a warning about the attribute aria-invalid being empty was triggered:

The empty aria-invalid can also be seen on element inspection in the reproduction URL.

It happens due to how Headless Input currently renders the aria-invalid:

Permalink

// https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/input/input.tsx#L69
'aria-invalid': invalid ? '' : undefined,

I believe that rendering this attribute with a true value ('aria-invalid': invalid ? 'true' : undefined) solves this issue, and this is probably cause by how React misshandles aria-* attributes that require a valid value (in JSX this is considered booleanish, meaning that accepts boolean, 'true' or 'false', but in HTML just ="true" or ="false" is expected)

References:

• ARIA state or property has valid value
• Required attribute requirements

Note:

Apparently, MDN says that any value different than 'true', 'false', 'spelling' or 'grammar' will be treated like 'true', but as we can read in the references, this attribute must have a valid value (any of the previous ones).

[RobinMalfait]

Hey! Thanks for the bug report.

This should be fixed by #3639, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.