feat: add accessibility improvements to LoginPage (#4) (#8)

- Add ARIA labels, roles, and semantic HTML to LoginPage component
- Add aria-busy, aria-disabled, and aria-live for loading states
- Add useId() for stable form element ID associations
- Add vitest-axe for automated accessibility testing
- Add checkA11y() test helper with axe-core integration
- Add 18 new accessibility-focused tests for LoginPage

Closes #4

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: intel352

package-lock.json

@@ -65,6 +65,7 @@
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1",
     "vitest": "^4.0.18",
+    "vitest-axe": "^0.1.0",
     "zustand": "^5.0.11"
   },
   "publishConfig": {

package.json

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import LoginPage from './LoginPage';
+import { checkA11y } from '../test/a11y';
 
 describe('LoginPage', () => {
   it('renders with title and subtitle', () => {
@@ -68,4 +69,181 @@ describe('LoginPage', () => {
     expect(screen.getByText('Signing in...')).toBeInTheDocument();
     resolveLogin!();
   });
+
+  // Accessibility tests
+
+  it('should have no accessibility violations', async () => {
+    const { container } = render(
+      <LoginPage
+        title="TestApp"
+        subtitle="Sign in to continue"
+        onLogin={vi.fn()}
+      />,
+    );
+    await checkA11y(container);
+  });
+
+  it('should have no accessibility violations when error is shown', async () => {
+    const { container } = render(
+      <LoginPage
+        title="TestApp"
+        error="Invalid credentials"
+        onLogin={vi.fn()}
+      />,
+    );
+    await checkA11y(container);
+  });
+
+  // Semantic HTML structure
+
+  it('wraps the page in a <main> landmark', () => {
+    render(<LoginPage title="App" onLogin={vi.fn()} />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+  });
+
+  it('renders a <form> element for the login form', () => {
+    render(<LoginPage title="App" onLogin={vi.fn()} />);
+    expect(screen.getByRole('form', { name: 'Login form' })).toBeInTheDocument();
+  });
+
+  it('has a heading with the app title', () => {
+    render(<LoginPage title="MyApp" onLogin={vi.fn()} />);
+    expect(screen.getByRole('heading', { name: 'MyApp', level: 1 })).toBeInTheDocument();
+  });
+
+  // ARIA attributes
+
+  it('labels username input with a <label> element via htmlFor', () => {
+    render(<LoginPage title="App" usernameLabel="Email address" onLogin={vi.fn()} />);
+    const input = screen.getByLabelText('Email address');
+    expect(input).toBeInTheDocument();
+    expect(input.tagName).toBe('INPUT');
+  });
+
+  it('labels password input with a <label> element via htmlFor', () => {
+    render(<LoginPage title="App" onLogin={vi.fn()} />);
+    const input = screen.getByLabelText('Password');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'password');
+  });
+
+  it('marks username input as required via aria-required', () => {
+    render(<LoginPage title="App" onLogin={vi.fn()} />);
+    const input = screen.getByLabelText('Username');
+    expect(input).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('marks password input as required via aria-required', () => {
+    render(<LoginPage title="App" onLogin={vi.fn()} />);
+    const input = screen.getByLabelText('Password');
+    expect(input).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('sets aria-busy on the form while loading', async () => {
+    let resolveLogin: () => void;
+    const loginPromise = new Promise<void>((resolve) => {
+      resolveLogin = resolve;
+    });
+    const onLogin = vi.fn().mockReturnValue(loginPromise);
+    const user = userEvent.setup();
+
+    render(<LoginPage title="App" onLogin={onLogin} />);
+
+    const form = screen.getByRole('form', { name: 'Login form' });
+    expect(form).toHaveAttribute('aria-busy', 'false');
+
+    await user.type(screen.getByLabelText('Username'), 'u');
+    await user.type(screen.getByLabelText('Password'), 'p');
+    await user.click(screen.getByRole('button', { name: 'Sign In' }));
+
+    expect(form).toHaveAttribute('aria-busy', 'true');
+    resolveLogin!();
+  });
+
+  it('sets aria-disabled on button when loading', async () => {
+    let resolveLogin: () => void;
+    const loginPromise = new Promise<void>((resolve) => {
+      resolveLogin = resolve;
+    });
+    const onLogin = vi.fn().mockReturnValue(loginPromise);
+    const user = userEvent.setup();
+
+    render(<LoginPage title="App" onLogin={onLogin} />);
+
+    await user.type(screen.getByLabelText('Username'), 'u');
+    await user.type(screen.getByLabelText('Password'), 'p');
+    await user.click(screen.getByRole('button', { name: 'Sign In' }));
+
+    const button = screen.getByRole('button', { name: 'Signing in...' });
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    expect(button).toBeDisabled();
+    resolveLogin!();
+  });
+
+  // Error message announcement
+
+  it('renders error message container with aria-live="polite"', () => {
+    render(<LoginPage title="App" error="Bad credentials" onLogin={vi.fn()} />);
+    const liveRegion = screen.getByRole('status');
+    expect(liveRegion).toHaveAttribute('aria-live', 'polite');
+    expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+  });
+
+  it('error message has role="alert"', () => {
+    render(<LoginPage title="App" error="Bad credentials" onLogin={vi.fn()} />);
+    expect(screen.getByRole('alert')).toHaveTextContent('Bad credentials');
+  });
+
+  it('inputs reference error element via aria-describedby when error is shown', () => {
+    render(<LoginPage title="App" error="Oops" onLogin={vi.fn()} />);
+    const usernameInput = screen.getByLabelText('Username');
+    const errorEl = screen.getByRole('alert');
+    expect(usernameInput).toHaveAttribute('aria-describedby', errorEl.id);
+  });
+
+  it('inputs do not have aria-describedby when there is no error', () => {
+    render(<LoginPage title="App" onLogin={vi.fn()} />);
+    const usernameInput = screen.getByLabelText('Username');
+    expect(usernameInput).not.toHaveAttribute('aria-describedby');
+  });
+
+  // Keyboard navigation
+
+  it('can tab from username to password to submit button', async () => {
+    const user = userEvent.setup();
+    render(<LoginPage title="App" onLogin={vi.fn()} />);
+
+    const usernameInput = screen.getByLabelText('Username');
+    const passwordInput = screen.getByLabelText('Password');
+    const submitButton = screen.getByRole('button', { name: 'Sign In' });
+
+    expect(usernameInput).toHaveFocus();
+
+    await user.tab();
+    expect(passwordInput).toHaveFocus();
+
+    await user.tab();
+    expect(submitButton).toHaveFocus();
+  });
+
+  it('submits the form when pressing Enter on the submit button', async () => {
+    const onLogin = vi.fn().mockResolvedValue(undefined);
+    const user = userEvent.setup();
+
+    render(<LoginPage title="App" onLogin={onLogin} />);
+
+    await user.type(screen.getByLabelText('Username'), 'testuser');
+    await user.type(screen.getByLabelText('Password'), 'testpass');
+
+    await user.tab();
+    await user.keyboard('{Enter}');
+
+    expect(onLogin).toHaveBeenCalledWith('testuser', 'testpass');
+  });
+
+  it('submit button has type="submit"', () => {
+    render(<LoginPage title="App" onLogin={vi.fn()} />);
+    const button = screen.getByRole('button', { name: 'Sign In' });
+    expect(button).toHaveAttribute('type', 'submit');
+  });
 });