From bf7606184773aafc2da353cf17d73cf209ec52f4 Mon Sep 17 00:00:00 2001
From: lakshit verma <vermalucky2004@gmail.com>
Date: Mon, 17 Aug 2026 02:06:48 +0530
Subject: [PATCH] fix(a11y): announce form errors and wire aria attributes

---
 frontend/src/components/primitives/Input.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/primitives/Input.tsx b/frontend/src/components/primitives/Input.tsx
index e0cd198..363adc4 100644
--- a/frontend/src/components/primitives/Input.tsx
+++ b/frontend/src/components/primitives/Input.tsx
@@ -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';
 
 export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
@@ -38,13 +39,25 @@ export function Field({
   error?: string;
   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 (
     <div className="space-y-1">
       <label htmlFor={htmlFor} className="block text-xs font-semibold uppercase tracking-wide text-steel-300">
         {label}
       </label>
-      {children}
-      {error && <p className="text-sm text-signal-400">{error}</p>}
+      {control}
+      {error && (
+        <p id={errorId} role="alert" className="text-sm text-signal-400">
+          {error}
+        </p>
+      )}
     </div>
   );
 }
\ No newline at end of file