Navigation chrome: SidebarButton aria-current and trailing slot, text-only Breadcrumb ancestors, compact NetworkStatusBadge

Aperta
  • Qualcosa non va?
#255 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

@pasevin ci sta già lavorando.

Dal 12/11/2026.

  • #261 di @pasevin — aperta
  • #264 di @pasevin — aperta

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
56/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Start with the four named component files: SidebarButton.tsx, breadcrumb.tsx, network-status-badge.tsx, and network-icon.tsx. Read the component props and rendering paths cited in the issue, then check their existing tests and add coverage for the requested accessibility, slot, breadcrumb typing, and compact badge behavior. Done means all four requests work without breaking existing usage.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

cla: allowlist

Small ones from the app shell:

  • SidebarButton doesn't set aria-current="page" when selected (SidebarButton.tsx#L65-L76). I set it on the <li> around it. This one is an a11y fix that needs nothing from apps.
  • SidebarButton trailing slot. Only badge?: string (#L10). I need a status dot or a small chip at the row's end.
  • Breadcrumb type. A missing href already renders as text (breadcrumb.tsx#L68), but BreadcrumbItems requires href on every ancestor (#L3-L13), so a section without its own page needs a cast.
  • Compact NetworkStatusBadge (lower priority). It always draws the ecosystem and the icon (network-status-badge.tsx#L37-L45), and a network without an icon gets an empty grey circle (network-icon.tsx#L32-L37). A header chip just needs the name.

Suggested, all non-breaking

  • set aria-current="page" when isSelected
  • trailing?: ReactNode on SidebarButton
  • widen the ancestor type to allow items without href
  • showEcosystem / showIcon (or variant="compact") on NetworkStatusBadge
Lingua principale
TypeScript
Stelle
7
Fork
4
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di OpenZeppelin/openzeppelin-ui

Tutte le issue di OpenZeppelin/openzeppelin-ui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.