fix(timeline): draw one focus ring on a focused event row

Aperta Adatta ai principianti
  • Qualcosa non va?
#389 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
80/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, nextjs, react, tailwindcss, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia dal link in src/components/timeline/event-inspector.tsx intorno alla riga 183 e leggilo accanto alla regola globale :focus-visible in src/app/globals.css:60-64, che è ciò che disegna il secondo anello sull’elemento link stesso. La correzione consiste nel sopprimere l’outline del link mentre viene mostrato l’anello ::after, quindi applicare lo stesso trattamento ai link dei membri del gruppo di esecuzione. Verifica con un passaggio da tastiera e una scansione axe a 1280px e 375px, ed esegui e2e/timeline.spec.ts per confermare che le asserzioni di ritorno del focus continuano a passare.

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

Descrizione

accessibility area: timeline bug priority: P3 size: XS

Context

Found while implementing slice 1 of #377 (PR #387), present before it on 5378271. Keyboard focus on a timeline row's details link draws two focus rings: one around the title text and one around the whole row.

  • The global rule :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } (src/app/globals.css:60-64) outlines the link element itself.
  • The link also draws focus-visible:after:outline-2 focus-visible:after:outline-accent on its stretched ::after hit area (src/components/timeline/event-inspector.tsx:183, on 377-timeline-polish).

Two rings for one focused control reads as two focus targets.

Plan

  1. Suppress the link's own outline while its ::after ring is shown (for example focus-visible:outline-none beside the after: outline classes), so exactly one ring, the row-sized one, is visible.
  2. Check the same pattern on grouped-run member links.

Acceptance criteria

  • A keyboard-focused row link shows exactly one visible focus ring, around the row, at 1280px and 375px.
  • The ring keeps at least 3:1 contrast against the panel.
  • Playwright: existing focus-return assertions in e2e/timeline.spec.ts still pass; no new test needed unless the ring is asserted geometrically.

Files and areas

src/components/timeline/event-inspector.tsx. Non-goals: the global focus style, other components.

Verification

Keyboard pass and axe scan on the timeline at 1280px and 375px.

Branch: <issue-number>-<slug>
Closes with a Closes #<issue-number> footer on the pull request.

Model: anthropic/claude-opus-5-5 | Reasoning effort: not exposed by harness

Lingua principale
TypeScript
Stelle
1
Fork
1
Merge medio
6h 56m
PR unite (30g)
136

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 eddiejaoude/StackDash

Tutte le issue di eddiejaoude/StackDash

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.