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

Abierto
#166 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
54/100
Tipo de issue
Refactorización
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
accessibility, frontend

Línea de trabajo

Comienza con apps/web/src/components/AppShell.tsx y la configuración del router; después inspecciona las seis pantallas mencionadas y el comportamiento de los recorridos de ruta en ProjectDetail.test.tsx y PersonDetail.test.tsx. Verifica que los route handles habilitados proporcionen los recorridos esperados, que se eliminen las llamadas a Breadcrumbs de cada pantalla, que la fila esté antes de

y que el skip link la omita mientras las pruebas sigan pasando.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
1
Forks
1
Merge medio
1 d 20 h
PR fusionados (30 d)
25

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de CodeForPhilly/codeforphilly-ng

Todos los issues de CodeForPhilly/codeforphilly-ng

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.