CodeForPhilly / CodeForPhilly/codeforphilly-ng

Render breadcrumbs from the shell via route handles (useMatches) so skip-to-main clears them

Offen
#166 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement
Vorherrschende Sprache
TypeScript
Sterne
1
Forks
1
Ø Merge
5 T. 3 Std.
Gemergte PRs (30 T.)
9

Beschreibung

## Context

PR #157 wired `Breadcrumbs.tsx` into the six screens that `specs/behaviors/app-shell.md` names. Each screen renders `` itself as a fragment sibling above its content container, because that was the minimal change that made the spec's trail table true.

## Problem

`app-shell.md` describes the breadcrumb row as part of the *shell* ("an optional row below the header ... a screen opts in by declaring a `breadcrumbs` trail"), and the shell's skip link targets ``. With the crumbs rendered inside each screen, "skip to main content" lands on the breadcrumb nav rather than past it, and every screen repeats the same import + placement.

## Proposal

Render breadcrumbs once from `AppShell`, sourced from route `handle`s via `useMatches()` (React Router v7). Each opted-in route declares its trail on its `handle` (with loader/query data supplying the dynamic segment), and the six per-screen `` calls go away. The row then sits between the header and ``, so the skip link clears it.

Scope: `apps/web/src/components/AppShell.tsx`, the router config, and the six screens (`ProjectDetail`, `ProjectEdit`, `PersonDetail`, `TagDetail`, `Account`, plus the create variant). Tests in `ProjectDetail.test.tsx` / `PersonDetail.test.tsx` assert the trails and should keep passing.

Deferred from `plans/a11y-mechanical.md` (PR #157).

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Start with apps/web/src/components/AppShell.tsx and the router config, then inspect the six named screens and the route-trail behavior in ProjectDetail.test.tsx and PersonDetail.test.tsx. Verify that opted-in route handles provide the expected trails, the per-screen Breadcrumbs calls are removed, the row sits before , and the skip link bypasses it while the tests continue to pass.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
accessibility, frontend
Issue-Typ
Refactoring
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
54/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.