Fix aria-invalid attributes to have a valid 'true' value (#3639)

This PR fixes an issue with the `aria-invalid` attributes on some form
elements.

In theory this shouldn't matter and behaves the same as other
attributes. MDN also mentions that any other value than the known set of
values will be treated as `true`.

However, some tools, including the Accessibility tab in Google Chrome
will complain because we set it to `aria-invalid=""`.

We already used `'true'` for `aria-checked` as well, so this change
makes it more consistent.

It will also make sure that `aria-invalid:flex` in Tailwind CSS works as
expected because this compiles to:

```css
.aria-invalid\:flex {
  &[aria-invalid="true"] {
    display: flex;
  }
}
```

Which means that the current implementation didn't work in this case
either.

Fixes: #3623

packages/@headlessui-react/CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Use correct `ownerDocument` when using internal `<Portal/>` element ([#3594](https://github.com/tailwindlabs/headlessui/pull/3594))
 - Bump `@tanstack/react-virtual` to be fix warnings in React 19 projects ([#3588](https://github.com/tailwindlabs/headlessui/pull/3588))
+- Fix `aria-invalid` attributes to have a valid `'true'` value ([#3639](https://github.com/tailwindlabs/headlessui/pull/3639))
 
 ## [2.2.0] - 2024-10-25
 

packages/@headlessui-react/src/components/input/input.tsx

@@ -66,7 +66,7 @@ function InputFn<TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(
       id,
       'aria-labelledby': labelledBy,
       'aria-describedby': describedBy,
-      'aria-invalid': invalid ? '' : undefined,
+      'aria-invalid': invalid ? 'true' : undefined,
       disabled: disabled || undefined,
       autoFocus,
     },

packages/@headlessui-react/src/components/select/select.tsx

@@ -69,7 +69,7 @@ function SelectFn<TTag extends ElementType = typeof DEFAULT_SELECT_TAG>(
       id,
       'aria-labelledby': labelledBy,
       'aria-describedby': describedBy,
-      'aria-invalid': invalid ? '' : undefined,
+      'aria-invalid': invalid ? 'true' : undefined,
       disabled: disabled || undefined,
       autoFocus,
     },

packages/@headlessui-react/src/components/textarea/textarea.tsx

@@ -66,7 +66,7 @@ function TextareaFn<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG>(
       id,
       'aria-labelledby': labelledBy,
       'aria-describedby': describedBy,
-      'aria-invalid': invalid ? '' : undefined,
+      'aria-invalid': invalid ? 'true' : undefined,
       disabled: disabled || undefined,
       autoFocus,
     },