Доступность форм

<label htmlFor="email">Email</label>
<input id="email" type="email" />

<label>
    Email
    <input type="email" />
</label>

import { useId } from 'react';

function Input({ label }: { label: string }) {
    const id = useId();

    return (
        <>
            <label htmlFor={id}>{label}</label>
            <input id={id} />
        </>
    );
}

<input
    aria-invalid={!!errors.email}
    aria-describedby={errors.email ? 'email-error' : undefined}
/>
{errors.email && <p id="email-error">{errors.email}</p>}

<label htmlFor="email">
    Email <span aria-hidden="true">*</span>
</label>
<input id="email" required aria-required="true" />

<input type="search" aria-label="Поиск по сайту" />

<fieldset>
    <legend>Способ оплаты</legend>

    <label>
        <input type="radio" name="payment" value="card" />
        Карта
    </label>

    <label>
        <input type="radio" name="payment" value="cash" />
        Наличные
    </label>
</fieldset>

const firstErrorRef = useRef<HTMLInputElement>(null);

useEffect(() => {
    if (Object.keys(errors).length > 0) {
        firstErrorRef.current?.focus();
    }
}, [errors]);

/* Плохо */
input:focus { outline: none; }

/* Хорошо */
input:focus-visible { outline: 2px solid var(--accent); }

<input
    aria-invalid={!!errors.email}
    aria-describedby="email-error"
/>
<p id="email-error" role="alert">
    {errors.email}
</p>

<button disabled={isSubmitting} aria-busy={isSubmitting}>
    {isSubmitting ? 'Отправка...' : 'Отправить'}
</button>

<input autoComplete="email" type="email" />
<input autoComplete="current-password" type="password" />
<input autoComplete="name" />