fix(a11y): auto-generate id/name em Input+Textarea + componente LabeledField #435
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,206 @@ | ||
| /** | ||
| * LabeledField — Compound component that correctly links <Label> to <Input> | ||
| * (or <Textarea>) via a shared `React.useId()` id. | ||
| * | ||
| * This is the canonical fix for the DevTools accessibility warning: | ||
| * "No label associated with a form field" | ||
| * | ||
| * Usage: | ||
| * // Instead of: | ||
| * <Label>Email</Label> | ||
| * <Input type="email" /> | ||
| * | ||
| * // Use: | ||
| * <LabeledField label="Email" name="email" type="email" /> | ||
| * | ||
| * // With error: | ||
| * <LabeledField | ||
| * label="Email" | ||
| * name="email" | ||
| * type="email" | ||
| * required | ||
| * description="Usado para login" | ||
| * error={errors.email?.message} | ||
| * /> | ||
| * | ||
| * // Textarea variant: | ||
| * <LabeledTextarea label="Observações" name="obs" rows={4} /> | ||
| */ | ||
| import * as React from 'react'; | ||
| import { Label } from '@/components/ui/label'; | ||
| import { Input } from '@/components/ui/input'; | ||
| import { Textarea } from '@/components/ui/textarea'; | ||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| // ───────────────────────────────────────────── | ||
| // Shared types | ||
| // ───────────────────────────────────────────── | ||
|
|
||
| interface LabeledFieldBaseProps { | ||
| /** Text shown in the <label>. Required for accessibility. */ | ||
| label: string; | ||
| /** Marks field as required — appends a red asterisk to the label. */ | ||
| required?: boolean; | ||
| /** Optional helper text shown below the field. */ | ||
| description?: string; | ||
| /** Error message shown below the field in destructive colour. */ | ||
| error?: string; | ||
| /** Additional class names for the outer wrapper div. */ | ||
| wrapperClassName?: string; | ||
| /** Additional class names for the label. */ | ||
| labelClassName?: string; | ||
| } | ||
|
|
||
| // ───────────────────────────────────────────── | ||
| // LabeledField (wraps <Input>) | ||
| // ───────────────────────────────────────────── | ||
|
|
||
| export type LabeledFieldProps = LabeledFieldBaseProps & | ||
| Omit<React.ComponentProps<'input'>, 'id'>; | ||
|
|
||
| /** | ||
| * Renders a <Label> + <Input> pair with a shared `id` so the browser | ||
| * correctly associates them. The id is auto-generated when not supplied. | ||
| */ | ||
| export const LabeledField = React.forwardRef<HTMLInputElement, LabeledFieldProps>( | ||
|
|
||
| ( | ||
| { | ||
| label, | ||
| required, | ||
| description, | ||
| error, | ||
| wrapperClassName, | ||
| labelClassName, | ||
| name, | ||
| className, | ||
| ...inputProps | ||
| }, | ||
| ref, | ||
| ) => { | ||
| const autoId = React.useId(); | ||
| // Prefer name-based id for readability in DevTools; fall back to autoId. | ||
| const fieldId = name ? `field-${name}` : autoId; | ||
|
There was a problem hiding this comment.
Deriving Useful? React with 👍 / 👎. |
||
| const descriptionId = description ? `${fieldId}-description` : undefined; | ||
| const errorId = error ? `${fieldId}-error` : undefined; | ||
|
|
||
| const ariaDescribedBy = | ||
| [descriptionId, errorId].filter(Boolean).join(' ') || undefined; | ||
|
Comment on lines
+86
to
+87
There was a problem hiding this comment.
When both Useful? React with 👍 / 👎.
Comment on lines
+83
to
+87
|
||
|
|
||
| return ( | ||
| <div className={cn('space-y-2', wrapperClassName)}> | ||
| <Label | ||
| htmlFor={fieldId} | ||
| className={cn(error && 'text-destructive', labelClassName)} | ||
| > | ||
| {label} | ||
| {required && ( | ||
| <span className="text-destructive ml-1" aria-hidden="true"> | ||
| * | ||
| </span> | ||
| )} | ||
| </Label> | ||
|
|
||
| <Input | ||
| ref={ref} | ||
| id={fieldId} | ||
| name={name} | ||
| aria-describedby={ariaDescribedBy} | ||
| aria-invalid={!!error} | ||
| aria-required={required} | ||
|
There was a problem hiding this comment.
The component consumes Useful? React with 👍 / 👎. |
||
| className={className} | ||
| {...inputProps} | ||
| /> | ||
|
Comment on lines
+103
to
+112
Comment on lines
+103
to
+112
|
||
|
|
||
| {description && !error && ( | ||
| <p id={descriptionId} className="text-xs text-muted-foreground"> | ||
| {description} | ||
| </p> | ||
| )} | ||
|
|
||
| {error && ( | ||
| <p id={errorId} className="text-xs font-medium text-destructive" role="alert"> | ||
| {error} | ||
| </p> | ||
| )} | ||
|
Comment on lines
+114
to
+124
|
||
| </div> | ||
| ); | ||
| }, | ||
| ); | ||
| LabeledField.displayName = 'LabeledField'; | ||
|
|
||
| // ───────────────────────────────────────────── | ||
| // LabeledTextarea (wraps <Textarea>) | ||
| // ───────────────────────────────────────────── | ||
|
|
||
| export type LabeledTextareaProps = LabeledFieldBaseProps & | ||
| Omit<React.ComponentProps<'textarea'>, 'id'>; | ||
|
|
||
| /** | ||
| * Renders a <Label> + <Textarea> pair with a shared `id`. | ||
| */ | ||
| export const LabeledTextarea = React.forwardRef< | ||
|
|
||
| HTMLTextAreaElement, | ||
| LabeledTextareaProps | ||
| >( | ||
| ( | ||
| { | ||
| label, | ||
| required, | ||
| description, | ||
| error, | ||
| wrapperClassName, | ||
| labelClassName, | ||
| name, | ||
| className, | ||
| ...textareaProps | ||
| }, | ||
| ref, | ||
| ) => { | ||
| const autoId = React.useId(); | ||
| const fieldId = name ? `field-${name}` : autoId; | ||
| const descriptionId = description ? `${fieldId}-description` : undefined; | ||
| const errorId = error ? `${fieldId}-error` : undefined; | ||
| const ariaDescribedBy = | ||
| [descriptionId, errorId].filter(Boolean).join(' ') || undefined; | ||
|
|
||
| return ( | ||
| <div className={cn('space-y-2', wrapperClassName)}> | ||
| <Label | ||
| htmlFor={fieldId} | ||
| className={cn(error && 'text-destructive', labelClassName)} | ||
| > | ||
| {label} | ||
| {required && ( | ||
| <span className="text-destructive ml-1" aria-hidden="true"> | ||
| * | ||
| </span> | ||
| )} | ||
| </Label> | ||
|
|
||
| <Textarea | ||
| ref={ref} | ||
| id={fieldId} | ||
| name={name} | ||
| aria-describedby={ariaDescribedBy} | ||
| aria-invalid={!!error} | ||
| aria-required={required} | ||
| className={className} | ||
| {...textareaProps} | ||
| /> | ||
|
Comment on lines
+180
to
+189
Comment on lines
+180
to
+189
|
||
|
|
||
| {description && !error && ( | ||
| <p id={descriptionId} className="text-xs text-muted-foreground"> | ||
| {description} | ||
| </p> | ||
| )} | ||
|
|
||
| {error && ( | ||
| <p id={errorId} className="text-xs font-medium text-destructive" role="alert"> | ||
| {error} | ||
| </p> | ||
| )} | ||
| </div> | ||
| ); | ||
| }, | ||
| ); | ||
| LabeledTextarea.displayName = 'LabeledTextarea'; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
idin LabeledField prop typesThe prop types explicitly remove
id(Omit<..., 'id'>), so callers cannot provide a deterministic unique id through normal typing even when they need to prevent collisions (for example repeated fields with the samename). This blocks a practical escape hatch and contradicts the component comment that the id is auto-generated only when not supplied.Useful? React with 👍 / 👎.