HOLD: Distinguish new-tab links from same-tab jumps#1687
Draft
maebeale wants to merge 1 commit into
Draft
Conversation
The box-arrow icon was doing double duty: it marked links that open in a new tab AND links that just navigate in place (Turbo `_top` break-outs, drill-ins), so users couldn't trust what a link would do. New-tab links also lacked the screen-reader warning WCAG G201 expects. - Add `new_tab_link` helper as the single origin of the box-arrow icon: sets target=_blank + rel=noopener and appends sr-only "(opens in new tab)". Named for the behavior (new tab), not destination — these are internal links, not external sites. - Migrate all genuine new-tab links to the helper, adding the missing a11y text and reconciling ad-hoc icon sizes. - Same-tab navigation now uses a directional arrow (or no icon); the box-arrow no longer leaks onto in-place links. Fixes the lone fa-external-link-alt outlier too. - Record the standard in .impeccable.md so future design work follows it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
maebeale
commented
Jun 15, 2026
| # | ||
| # <%= new_tab_link "View receipt", receipt_url, class: "underline" %> | ||
| # <%= new_tab_link grants_path, class: "..." do %>View all grants<% end %> | ||
| def new_tab_link(name = nil, options = nil, html_options = nil, &block) |
Collaborator
Author
There was a problem hiding this comment.
🤖 From Claude: This helper is intentionally the only place fa-arrow-up-right-from-square is emitted — that keeps the box-arrow meaning exactly "opens in a new tab" and prevents it from drifting back onto same-tab links. rel merges with any caller value (so rel: "noreferrer" becomes noreferrer noopener).
maebeale
commented
Jun 15, 2026
| class: "relative block rounded-lg border border-gray-300 bg-white px-3 py-2 pr-8 transition-colors hover:border-gray-400 hover:bg-gray-50", | ||
| data: { turbo_frame: "_top" } do %> | ||
| <i class="fa-solid fa-arrow-up-right-from-square absolute right-2 top-2 text-[0.6rem] text-gray-400"></i> | ||
| <i class="fa-solid fa-arrow-right absolute right-2 top-2 text-[0.6rem] text-gray-400"></i> |
Collaborator
Author
There was a problem hiding this comment.
🤖 From Claude: This link breaks out of the Turbo frame in the same tab (turbo_frame: "_top"), so it now uses a directional arrow instead of the box-arrow, which had implied a new window.
maebeale
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is the goal of this PR and why is this important?
fa-arrow-up-right-from-square) was used for two different behaviors: links that open in a new tab and links that just navigate in place (Turbo_topbreak-outs, drill-ins). Users couldn't tell what a link would do before clicking.text-[0.55rem],text-[10px],w-3 h-3, …).How did you approach the change?
new_tab_linkhelper (app/helpers/application_helper.rb) is now the only origin of the box-arrow icon. It setstarget="_blank"+rel="noopener"and appends screen-reader-only(opens in new tab)text. Named for the behavior (opens a new tab), not destination — these are internal links, not external sites.fa-arrow-right) or no icon; the box-arrow no longer leaks onto in-place links. Also fixes the lonefa-external-link-altoutlier intaggings/index..impeccable.mdso future design work (and the impeccable skills) follow it.How was it tested?
icon_classsizing.Anything else to add?
Same-tab links were kept same-tab (the principled fix: prefer same-tab, just correct the icon). If any of those should actually open a new tab instead, that's a per-link product call — happy to flip specific ones.
🤖 Generated with Claude Code