Screen Reader Navigation

// Screen Reader-compliant Form Field in React
import React, { useId } from "react";

export function AccessibleInputField({ label, labelTa, error, helperText, ...props }) {
  const id = useId();
  const helperId = `${id}-helper`;
  const errorId = `${id}-error`;

  return (
    <div className="flex flex-col gap-1.5 w-full">
      {/* Label linked via htmlFor */}
      <label htmlFor={id} className="text-sm font-semibold text-foreground">
        {label} 
        {labelTa && <span className="block mt-0.5 text-xs text-muted-foreground font-tamil" lang="ta">{labelTa}</span>}
      </label>

      {/* Input wired with helper text and error state */}
      <input
        id={id}
        aria-describedby={`${helperText ? helperId : ""} ${error ? errorId : ""}`.trim() || undefined}
        aria-invalid={!!error}
        className="rounded-md border border-border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
        {...props}
      />

      {/* Helper text */}
      {helperText && (
        <p id={helperId} className="text-xs text-muted-foreground leading-relaxed">
          {helperText}
        </p>
      )}

      {/* Error message with live announcement */}
      {error && (
        <p id={errorId} className="text-xs text-destructive font-semibold" aria-live="assertive">
          {error}
        </p>
      )}
    </div>
  );
}