[A11y] Layout — No skip-to-content link for keyboard users

[Ryan-Atkinson87]

WCAG criterion

2.4.1 Bypass Blocks — Level A

Description

The Layout component renders a persistent sidebar (<nav>) with 8 navigation links before the <main> content area. There is no skip-to-content mechanism, so keyboard-only users must tab through all navigation links every time they land on or navigate within the application.

Steps to reproduce

1. Load any authenticated route (e.g. /runs)
2. Press Tab to begin keyboard navigation
3. Observe: focus begins in the sidebar and must pass through all 8 nav links + the Log out button before reaching the <main> content area

Expected behaviour

A visually hidden "Skip to content" link appears as the first focusable element on Tab press and jumps keyboard focus to <main>.

Actual behaviour

No skip link exists. Keyboard users must tab through all 9 sidebar controls to reach main content.

Fix

Add a skip link at the top of Layout.tsx:

<a
  href="#main-content"
  className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:shadow"
>
  Skip to content
</a>

And add id="main-content" to the <main> element.

Location

orchestrator-ui/src/components/Layout.tsx