CodeForPhilly / CodeForPhilly/codeforphilly-ng

ExternalLink component for the 16 hand-rolled "(opens in new tab)" links

未关闭
#167 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
enhancement
主要语言
TypeScript
星标
1
派生
1
平均合并
5 天 3 小时
30 天内合并 PR
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).

贡献指南

这个仓库没有索引到贡献指南

调研方向

从 apps/web/src/components/ 开始,检查 AppFooter、AppHeader、ProjectCard、ActivityCard、LoginPlaceholder、Account、PersonDetail、ProjectDetail 和 Volunteer 中的 16 个 target links。运行现有的 accessible-name 测试,然后确认每个 site 都使用共享组件,并且 assertions 仍与 new-tab cue 以及 target 和 rel 的行为相匹配。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
accessibility, frontend
Issue 类型
重构
难度
3/5
预计耗时
1-2 天
活跃度
活跃
描述清晰度
描述清楚
新手友好度
74/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。