vee1e/workorder-desk
1
0
Fork 0
mirror of https://github.com/vee1e/workorder-desk.git synced 2026-09-01 09:50:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(a11y): announce form errors and wire aria attributes

Browse source
This commit is contained in:
lakshit verma 2026-08-17 02:06:48 +05:30
parent 5bada2ee6f
commit bf76061847
No known key found for this signature in database
1 changed files with 16 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/components/primitives/Input.tsx
View file

@ -1,4 +1,5 @@
import type { InputHTMLAttributes, SelectHTMLAttributes } from 'react'; import type { InputHTMLAttributes, ReactElement, SelectHTMLAttributes } from 'react';
import { cloneElement, isValidElement } from 'react';
import { cn } from '../../lib/utils'; import { cn } from '../../lib/utils';
export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) { export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
@ -38,13 +39,25 @@ export function Field({
error?: string; error?: string;
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const errorId = htmlFor ? `${htmlFor}-error` : undefined;
let control = children;
if (isValidElement(children)) {
control = cloneElement(children as ReactElement<{ 'aria-invalid'?: boolean; 'aria-describedby'?: string }>, {
'aria-invalid': error ? true : undefined,
'aria-describedby': error ? errorId : undefined,
});
}
return ( return (
<div className="space-y-1"> <div className="space-y-1">
<label htmlFor={htmlFor} className="block text-xs font-semibold uppercase tracking-wide text-steel-300"> <label htmlFor={htmlFor} className="block text-xs font-semibold uppercase tracking-wide text-steel-300">
{label} {label}
</label> </label>
{children} {control}
{error && <p className="text-sm text-signal-400">{error}</p>} {error && (
<p id={errorId} role="alert" className="text-sm text-signal-400">
{error}
</p>
)}
</div> </div>
); );
} }