ExternalLink component for the 16 hand-rolled "(opens in new tab)" links
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 74/100
- Issue type
- Refactor
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- typescript
- Domain
- accessibility, frontend
Research direction
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.
Written by the indexing model from the issue text.
Description
Context
PR #157 added a new-tab cue to every target="_blank" link in apps/web: <span className="sr-only"> (opens in new tab)</span> 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).
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 1
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 25
Getting set up
We have not checked this project's setup files yet. Start from its README, and see our first-contribution guide for the general steps.
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from CodeForPhilly/codeforphilly-ng
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
CodeForPhilly/codeforphilly-ng#178 ·
Maintainers usually reply within 1 day
-
MarkdownEditor toolbar: use Radix Toolbar from radix-ui instead of the hand-rolled roving tabindexOpenenhancement
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
CodeForPhilly/codeforphilly-ng#169 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
CodeForPhilly/codeforphilly-ng#89 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
CodeForPhilly/codeforphilly-ng#87 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
CodeForPhilly/codeforphilly-ng#50 ·
Maintainers usually reply within 1 day
All issues in CodeForPhilly/codeforphilly-ng
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
opengovsg/FormSG#10118 · 1 comment ·
Maintainers usually reply within 1 day
-
ai-driven-qa bug claude
Difficulty 1/5 Under an hour Newbie friendliness 75/100
linagora/twake-calendar-frontend#1434 · 1 comment ·
Maintainers usually reply within 1 day
-
check:passed streams:add
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
iptv-org/iptv#52824 · 2 comments ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 Half a day Newbie friendliness 78/100
jaegertracing/jaeger-ui#4512 ·
Maintainers usually reply within 1 day
-
area:ide documentation enhancement platform:macos platform:vscode
Difficulty 1/5 1-3 hours Newbie friendliness 88/100
anthropics/claude-code#97389 ·
Maintainers usually reply within 1 day