Skip to content

Commit b4f3cb6

Browse files
committed
fix: Have screen reader read form input error
1 parent 6251d73 commit b4f3cb6

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,15 +89,24 @@ export function ConnectedFormGroup<T extends ConnectedField>({
8989
);
9090

9191
const textError = customError || getErrorMessage(error);
92+
const showError = !!((error || customError) && !hideLabel);
93+
const errorId = showError ? `${id || name}_error` : undefined;
9294

9395
return (
9496
<FormGroup spacing={hideLabel ? 'tight' : spacing}>
9597
{hideLabel ? <HiddenText>{renderedLabel}</HiddenText> : renderedLabel}
96-
<Component {...(rest as any)} disabled={disabled} name={name} />
98+
<Component
99+
{...(rest as any)}
100+
aria-describedby={errorId}
101+
aria-invalid={showError}
102+
disabled={disabled}
103+
name={name}
104+
/>
97105
{children}
98-
{(error || customError) && !hideLabel && (
106+
{showError && (
99107
<FormError
100108
aria-live={isFirstError ? 'assertive' : 'off'}
109+
id={errorId}
101110
role={isFirstError ? 'alert' : 'status'}
102111
variant={errorType}
103112
>

0 commit comments

Comments
 (0)