CodeForPhilly / CodeForPhilly/codeforphilly-ng

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

Open
#166 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
1
Forks
1
Avg merge
5d 3h
Merged PRs (30d)
9

Description

## 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).

Contributor guide

No contributing guide indexed for this repository

Research direction

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.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
54/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.