React Accessibility Patterns

# React Accessibility Patterns for Google Antigravity

Build inclusive, accessible React components following WCAG 2.1 guidelines.

## Accessible Button

```typescript
// components/ui/Button.tsx
import { forwardRef, ButtonHTMLAttributes } from "react";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    loading?: boolean;
    loadingText?: string;
    variant?: "primary" | "secondary" | "destructive";
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    ({ loading, loadingText, children, disabled, className, ...props }, ref) => {
        return (
            <button
                ref={ref}
                className={`btn ${className || ""}`}
                disabled={disabled || loading}
                aria-disabled={disabled || loading}
                aria-busy={loading}
                {...props}
            >
                {loading ? (
                    <>
                        <span className="sr-only">{loadingText || "Loading"}</span>
                        <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
                            <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                        </svg>
                        <span aria-hidden="true">{loadingText || children}</span>
                    </>
                ) : children}
            </button>
        );
    }
);
Button.displayName = "Button";
```

## Accessible Modal

```typescript
// components/ui/Modal.tsx
"use client";

import { useEffect, useRef, useCallback, ReactNode } from "react";
import { createPortal } from "react-dom";

interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
    title: string;
    description?: string;
    children: ReactNode;
}

export function Modal({ isOpen, onClose, title, description, children }: ModalProps) {
    const modalRef = useRef<HTMLDivElement>(null);
    const previousActiveElement = useRef<HTMLElement | null>(null);

    const trapFocus = useCallback((e: KeyboardEvent) => {
        if (!modalRef.current || e.key !== "Tab") return;
        const focusable = modalRef.current.querySelectorAll<HTMLElement>("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
        const first = focusable[0];
        const last = focusable[focusable.length - 1];
        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    }, []);

    useEffect(() => {
        if (isOpen) {
            previousActiveElement.current = document.activeElement as HTMLElement;
            document.addEventListener("keydown", (e) => { if (e.key === "Escape") onClose(); trapFocus(e); });
            document.body.style.overflow = "hidden";
        }
        return () => {
            document.body.style.overflow = "";
            previousActiveElement.current?.focus();
        };
    }, [isOpen, onClose, trapFocus]);

    if (!isOpen) return null;

    return createPortal(
        <div className="modal-overlay" onClick={onClose}>
            <div ref={modalRef} role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby={description ? "modal-desc" : undefined} className="modal" onClick={(e) => e.stopPropagation()}>
                <h2 id="modal-title">{title}</h2>
                {description && <p id="modal-desc">{description}</p>}
                {children}
                <button onClick={onClose} aria-label="Close">×</button>
            </div>
        </div>,
        document.body
    );
}
```

## Form Field

```typescript
// components/ui/FormField.tsx
import { forwardRef, InputHTMLAttributes } from "react";

interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
    label: string;
    error?: string;
    hint?: string;
    required?: boolean;
}

export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
    ({ label, error, hint, required, id, ...props }, ref) => {
        const inputId = id || `field-${label.toLowerCase().replace(/\s+/g, "-")}`;
        return (
            <div className={`form-field ${error ? "has-error" : ""}`}>
                <label htmlFor={inputId}>
                    {label}{required && <span aria-hidden="true">*</span>}
                </label>
                {hint && <p id={`${inputId}-hint`}>{hint}</p>}
                <input ref={ref} id={inputId} aria-required={required} aria-invalid={!!error} aria-describedby={error ? `${inputId}-error` : hint ? `${inputId}-hint` : undefined} {...props} />
                {error && <p id={`${inputId}-error`} role="alert">{error}</p>}
            </div>
        );
    }
);
FormField.displayName = "FormField";
```

## Skip Links

```typescript
// components/SkipLinks.tsx
export function SkipLinks() {
    return (
        <div className="skip-links">
            <a href="#main-content" className="skip-link">Skip to main content</a>
            <a href="#navigation" className="skip-link">Skip to navigation</a>
        </div>
    );
}
```

## Live Announcer Hook

```typescript
// hooks/useAnnouncer.ts
import { useCallback, useRef, useEffect } from "react";

export function useAnnouncer() {
    const announcerRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        const announcer = document.createElement("div");
        announcer.setAttribute("role", "status");
        announcer.setAttribute("aria-live", "polite");
        announcer.className = "sr-only";
        document.body.appendChild(announcer);
        announcerRef.current = announcer;
        return () => { announcer.remove(); };
    }, []);

    const announce = useCallback((message: string, priority: "polite" | "assertive" = "polite") => {
        if (!announcerRef.current) return;
        announcerRef.current.setAttribute("aria-live", priority);
        announcerRef.current.textContent = "";
        setTimeout(() => { announcerRef.current!.textContent = message; }, 100);
    }, []);

    return announce;
}
```

## Best Practices

1. **Semantic HTML**: Use proper elements (button, nav, main)
2. **Focus Management**: Ensure logical focus order
3. **Color Contrast**: Maintain 4.5:1 contrast ratio
4. **Screen Readers**: Test with NVDA, VoiceOver
5. **Keyboard Navigation**: All elements keyboard accessible