From 87252e1c337f73fd4b154a6bacfe2c7bdcb2d766 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 13 Feb 2025 15:50:42 +0100 Subject: [PATCH] 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 | 1 + 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 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 881f29f..1c66101 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 diff --git a/packages/@headlessui-react/src/components/input/input.tsx b/packages/@headlessui-react/src/components/input/input.tsx index e4665dc..b582d00 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 82d0653..3327b31 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 77dd671..da3acb2 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, },