CodeForPhilly / CodeForPhilly/codeforphilly-ng
ExternalLink component for the 16 hand-rolled "(opens in new tab)" links
- 主要言語
- TypeScript
- スター
- 1
- フォーク
- 1
- 平均マージ
- 5日 3時間
- マージ済み PR(30日)
- 9
説明
## Context
PR #157 added a new-tab cue to every `target="_blank"` link in `apps/web`: ` (opens in new tab)` where the link has visible text, or appended to the `aria-label` where it does not. That is 16 copies across 9 files (`AppFooter`, `AppHeader`, `ProjectCard`, `ActivityCard`, `LoginPlaceholder`, `Account`, `PersonDetail`, `ProjectDetail`, `Volunteer`).
## Problem
The cue text, the `rel="noopener noreferrer"`, and the `target` are re-typed at every site. A future link will forget one of them, and changing the wording (or adding a visual icon) means touching 16 places.
## Proposal
An `ExternalLink` component in `apps/web/src/components/` that takes `href` + children, sets `target`/`rel`, and appends the sr-only cue (or merges it into a supplied `aria-label`). Migrate the 16 sites; the existing accessible-name assertions in the test suite (regex matchers on `/\(opens in new tab\)$/`) cover the migration.
Deferred from `plans/a11y-mechanical.md` (PR #157).
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
調査の方向性
Start in apps/web/src/components/ and inspect the 16 target links across AppFooter, AppHeader, ProjectCard, ActivityCard, LoginPlaceholder, Account, PersonDetail, ProjectDetail, and Volunteer. Run the existing accessible-name tests, then confirm every site uses the shared component and the assertions still match the new-tab cue, target, and rel behavior.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- typescript
- 領域
- accessibility, frontend
- issue の種類
- リファクタリング
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 活発
- 明瞭さ
- 明確に書かれている
- 初心者へのやさしさ
- 74/100