From ac5794649bbc6265f75d9b374b06e0a859f28b96 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 13 Feb 2025 15:43:27 +0100 Subject: [PATCH 1/2] use `'true'` as the value for `aria-invalid` 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. Let's set it to `true` instead, which should still work. 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; } } ``` --- packages/@headlessui-react/src/components/input/input.tsx | 2 +- packages/@headlessui-react/src/components/select/select.tsx | 2 +- packages/@headlessui-react/src/components/textarea/textarea.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@headlessui-react/src/components/input/input.tsx b/packages/@headlessui-react/src/components/input/input.tsx index e4665dc22..b582d0080 100644 --- a/packages/@headlessui-react/src/components/input/input.tsx +++ b/packages/@headlessui-react/src/components/input/input.tsx @@ -66,7 +66,7 @@ function InputFn( id, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, - 'aria-invalid': invalid ? '' : undefined, + 'aria-invalid': invalid ? 'true' : undefined, disabled: disabled || undefined, autoFocus, }, diff --git a/packages/@headlessui-react/src/components/select/select.tsx b/packages/@headlessui-react/src/components/select/select.tsx index 82d0653a3..3327b3163 100644 --- a/packages/@headlessui-react/src/components/select/select.tsx +++ b/packages/@headlessui-react/src/components/select/select.tsx @@ -69,7 +69,7 @@ function SelectFn( id, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, - 'aria-invalid': invalid ? '' : undefined, + 'aria-invalid': invalid ? 'true' : undefined, disabled: disabled || undefined, autoFocus, }, diff --git a/packages/@headlessui-react/src/components/textarea/textarea.tsx b/packages/@headlessui-react/src/components/textarea/textarea.tsx index 77dd67194..da3acb205 100644 --- a/packages/@headlessui-react/src/components/textarea/textarea.tsx +++ b/packages/@headlessui-react/src/components/textarea/textarea.tsx @@ -66,7 +66,7 @@ function TextareaFn( id, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, - 'aria-invalid': invalid ? '' : undefined, + 'aria-invalid': invalid ? 'true' : undefined, disabled: disabled || undefined, autoFocus, }, From c8070b7a1d3d363c69f1b4a01dca51f163ac9bdb Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 13 Feb 2025 15:48:48 +0100 Subject: [PATCH 2/2] update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 881f29fd4..1c661014c 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/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 `` 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