Skip to content

[A11y] LoginPage — No <main> landmark #187

Description

@Ryan-Atkinson87

WCAG criterion

1.3.1 Info and Relationships — Level A

Description

The LoginPage renders entirely inside <div> elements with no <main> landmark. Screen reader users who navigate by landmarks cannot jump to the main content area of the page, as no <main> region is declared.

Steps to reproduce

  1. Navigate to /login
  2. Open a screen reader (e.g. VoiceOver on macOS or NVDA on Windows)
  3. Open the rotor / landmarks list
  4. Observe: only a generic region or no landmarks; no <main> is listed

Expected behaviour

A <main> element wraps the login card, appearing in the screen reader's landmarks list and allowing direct navigation to it.

Actual behaviour

The page has no landmark structure: the outermost element is <div className="flex h-dvh ...">.

Fix

Wrap the login card in <main>:

return (
  <main className="flex h-dvh items-center justify-center bg-gray-50">
    <div className="w-full max-w-sm rounded-lg bg-white p-8 shadow">
      ...
    </div>
  </main>
);

Location

orchestrator-ui/src/auth/LoginPage.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions