Login & Auth

The login page demonstrates accessible form patterns including validation, error handling, focus management, and social auth buttons.

Page URL

/login

Key Features

• Form validation with inline error messages
• Focus management on validation errors
• Password visibility toggle with accessible label
• Social auth buttons with descriptive text
• "Remember me" checkbox with proper label association

Accessibility Patterns

Form Labels

Every input has an associated <label>:

<label htmlFor="email">Email address</label>
<input id="email" type="email" required aria-describedby="email-error" />
<p id="email-error" role="alert">Please enter a valid email address</p>

The aria-describedby links the input to its error message so screen readers announce both.

Error Handling

When validation fails:

1. Focus moves to the first field with an error
2. Error messages appear with role="alert" for immediate announcement
3. The input gets aria-invalid="true"
4. A summary of errors is announced via live region

// Focus the first invalid field
if (errors.email) {
    emailRef.current?.focus();
}

Password Visibility Toggle

The show/hide password button uses:

<button type="button" aria-label="Show password" aria-pressed="false">
    <EyeIcon aria-hidden="true" />
</button>

When toggled, aria-label updates to "Hide password" and aria-pressed becomes true.

Social Auth Buttons

Social login buttons include the provider name:

<button>
    <GoogleIcon aria-hidden="true" />
    Continue with Google
</button>

The icon is decorative (aria-hidden), and the button text provides the full meaning.

Customization

1. Connect form submission to your auth API
2. Add or remove social auth providers
3. Add registration form following the same patterns
4. Implement forgot password flow with accessible step indicators