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

オープン 初心者向け
  • 何か問題がありますか？
#389 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
80/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css, nextjs, react, tailwindcss, typescript
領域
accessibility, frontend

調査の方向性

src/components/timeline/event-inspector.tsx の 183 行目付近にあるリンクから始め、src/app/globals.css:60-64 のグローバルな :focus-visible ルールと並べて読んでください。このルールがリンク要素自体に 2 つ目のリングを描画しているものです。修正は、::after のリングが表示されている間はリンク自身の outline を抑制し、その後、グループ化された実行のメンバーリンクにも同じ処理を適用することです。1280px と 375px でキーボード操作の確認と axe スキャンを行い、e2e/timeline.spec.ts を実行して focus-return アサーションが引き続き通ることを確認してください。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
1
フォーク
1
平均マージ
6時間 56分
マージ済み PR（30日）
136

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

eddiejaoude/StackDash のほかの issue

eddiejaoude/StackDash の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。