Accessibility in Forms

import { useRef } from "react";
import {
  AccessibilityInfo,
  Pressable,
  Text,
  TextInput,
  View,
} from "react-native";
 
export function AccessibleField({
  label,
  hint,
  error,
  value,
  onChangeText,
}: {
  label: string;
  hint?: string;
  error?: string;
  value: string;
  onChangeText: (t: string) => void;
}) {
  const inputRef = useRef<TextInput>(null);
 
  return (
    <View style={{ gap: 4 }}>
      <Text nativeID="emailLabel" style={{ fontWeight: "600" }}>
        {label}
      </Text>
      <TextInput
        ref={inputRef}
        value={value}
        onChangeText={onChangeText}
        accessibilityLabel={label}
        accessibilityHint={hint}
        accessibilityLabelledBy="emailLabel"
        accessibilityInvalid={!!error}
      />
      {error ? (
        <Text
          accessibilityRole="alert"
          accessibilityLiveRegion="assertive"
          style={{ color: "#dc2626" }}
        >
          {error}
        </Text>
      ) : null}
    </View>
  );
}
 
export async function announceFormError(message: string) {
  await AccessibilityInfo.announceForAccessibility(message);
}
 
export function focusFirstError(
  refs: Array<React.RefObject<TextInput | null>>,
  errors: boolean[],
) {
  const idx = errors.findIndex(Boolean);
  if (idx >= 0) refs[idx]?.current?.focus();
}

import { zodResolver } from "@hookform/resolvers/zod";
import { forwardRef, useRef } from "react";
import { Controller, useForm } from "react-hook-form";
import {
  AccessibilityInfo,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from "react-native";
import { z } from "zod";
 
const schema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  email: z.string().email("Enter a valid email address"),
  phone: z
    .string()
    .regex(/^\d{10}$/, "Enter a 10-digit phone number without spaces"),
});
 
type FormValues = z.infer<typeof schema>;
 
const FIELD_ORDER = ["name", "email", "phone"] as const;
 
export function ContactForm({ onSuccess }: { onSuccess: () => void }) {
  const nameRef = useRef<TextInput>(null);
  const emailRef = useRef<TextInput>(null);
  const phoneRef = useRef<TextInput>(null);
  const refs = [nameRef, emailRef, phoneRef];
 
  const {
    control,
    handleSubmit,
    formState: { errors },
    setFocus,
  } = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { name: "", email: "", phone: "" },
    mode: "onTouched",
  });
 
  const onInvalid = async () => {
    const first = FIELD_ORDER.find((k) => errors[k]);
    if (first) {
      setFocus(first);
      const message = errors[first]?.message ?? "Fix the highlighted fields";
      await AccessibilityInfo.announceForAccessibility(message);
    }
  };
 
  const onSubmit = handleSubmit(async (data) => {
    await fakeSubmit(data);
    await AccessibilityInfo.announceForAccessibility("Message sent successfully");
    onSuccess();
  }, onInvalid);
 
  return (
    <ScrollView
      contentContainerStyle={styles.container}
      keyboardShouldPersistTaps="handled"
    >
      <Text style={styles.heading} accessibilityRole="header">
        Contact us
      </Text>
      <Text style={styles.sub}>
        Required fields are marked. Errors are announced automatically.
      </Text>
 
      <Controller
        control={control}
        name="name"
        render={({ field, fieldState }) => (
          <Field
            ref={nameRef}
            label="Full name"
            required
            value={field.value}
            onChangeText={field.onChange}
            onBlur={field.onBlur}
            error={fieldState.error?.message}
          />
        )}
      />
 
      <Controller
        control={control}
        name="email"
        render={({ field, fieldState }) => (
          <Field
            ref={emailRef}
            label="Email"
            required
            hint="We reply within one business day"
            keyboardType="email-address"
            autoCapitalize="none"
            value={field.value}
            onChangeText={field.onChange}
            onBlur={field.onBlur}
            error={fieldState.error?.message}
          />
        )}
      />
 
      <Controller
        control={control}
        name="phone"
        render={({ field, fieldState }) => (
          <Field
            ref={phoneRef}
            label="Phone"
            hint="Ten digits, no dashes"
            keyboardType="phone-pad"
            value={field.value}
            onChangeText={field.onChange}
            onBlur={field.onBlur}
            error={fieldState.error?.message}
          />
        )}
      />
 
      <Pressable
        style={styles.submit}
        onPress={onSubmit}
        accessibilityRole="button"
        accessibilityLabel="Send message"
      >
        <Text style={styles.submitText}>Send</Text>
      </Pressable>
    </ScrollView>
  );
}
 
type FieldProps = {
  label: string;
  value: string;
  onChangeText: (t: string) => void;
  onBlur: () => void;
  error?: string;
  hint?: string;
  required?: boolean;
  keyboardType?: "default" | "email-address" | "phone-pad";
  autoCapitalize?: "none" | "sentences";
};
 
const Field = forwardRef<TextInput, FieldProps>(function Field(
  {
    label,
    value,
    onChangeText,
    onBlur,
    error,
    hint,
    required,
    keyboardType = "default",
    autoCapitalize = "sentences",
  },
  ref,
) {
  const labelId = `${label.replace(/\s/g, "")}Label`;
  const errorId = `${label.replace(/\s/g, "")}Error`;
  const a11yLabel = required ? `${label}, required` : label;
 
  return (
    <View style={styles.field}>
      <Text nativeID={labelId} style={styles.label}>
        {label}
        {required ? " *" : ""}
      </Text>
      <TextInput
        ref={ref}
        style={[styles.input, error && styles.inputError]}
        value={value}
        onChangeText={onChangeText}
        onBlur={onBlur}
        keyboardType={keyboardType}
        autoCapitalize={autoCapitalize}
        accessibilityLabel={a11yLabel}
        accessibilityHint={hint}
        accessibilityLabelledBy={labelId}
        accessibilityInvalid={!!error}
      />
      {error ? (
        <Text
          nativeID={errorId}
          accessibilityRole="alert"
          accessibilityLiveRegion="assertive"
          style={styles.error}
        >
          {error}
        </Text>
      ) : null}
    </View>
  );
});
 
async function fakeSubmit(_data: FormValues) {
  await new Promise((r) => setTimeout(r, 300));
}
 
const styles = StyleSheet.create({
  container: { padding: 16, gap: 16 },
  heading: { fontSize: 24, fontWeight: "700" },
  sub: { fontSize: 14, color: "#64748b", marginBottom: 4 },
  field: { gap: 6 },
  label: { fontSize: 14, fontWeight: "600" },
  input: {
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 8,
    padding: 14,
    fontSize: 16,
  },
  inputError: { borderColor: "#dc2626" },
  error: { fontSize: 13, color: "#dc2626" },
  submit: {
    backgroundColor: "#2563eb",
    padding: 16,
    borderRadius: 8,
    alignItems: "center",
    marginTop: 8,
  },
  submitText: { color: "#fff", fontWeight: "600", fontSize: 16 },
});

// 1. Inline error text - mount/unmount triggers live region
{error && (
  <Text accessibilityRole="alert" accessibilityLiveRegion="assertive">
    {error}
  </Text>
)}
 
// 2. Submit summary - one spoken message for multiple failures
const count = Object.keys(errors).length;
if (count > 0) {
  await AccessibilityInfo.announceForAccessibility(
    `${count} fields need attention. ${firstMessage}`,
  );
}
 
// 3. Success confirmation - do not rely on toast alone
await AccessibilityInfo.announceForAccessibility("Profile saved");

import type { TextInput } from "react-native";
import type { RefObject } from "react";
 
type InputRef = RefObject<TextInput | null>;
 
function focusField(ref: InputRef) {
  ref.current?.focus();
}
 
// react-hook-form setFocus is typed to field names
import type { FieldPath } from "react-hook-form";
function focusByName<T extends Record<string, unknown>>(
  setFocus: (name: FieldPath<T>) => void,
  name: FieldPath<T>,
) {
  setFocus(name);
}