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

Nobody has claimed this yet.

Assessment

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

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.

Description

enhancement

Context

PR #157 wired Breadcrumbs.tsx into the six screens that specs/behaviors/app-shell.md names. Each screen renders <Breadcrumbs> 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 <main>. 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 handles 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 <Breadcrumbs> calls go away. The row then sits between the header and <main>, 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).

Dominant language
TypeScript
Stars
1
Forks
1
Avg merge
1d 20h
Merged PRs (30d)
25

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from CodeForPhilly/codeforphilly-ng

All issues in CodeForPhilly/codeforphilly-ng

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.