jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add external link UX: icons, rel attributes, screen reader labels

Browse Source 
New external_link component in core_components handles target="_blank",
rel="noopener noreferrer", external-link icon, and sr-only "(opens in
new tab)" text. Migrated admin providers form, settings (Stripe),
order tracking, onboarding setup links to use it. Fixed rel="noopener"
to "noopener noreferrer" on remaining links (email settings, product
show, core_components card radio). Added sr-only text to shop social
link cards and aria-label to page renderer tracking link.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-03-04 00:55:09 +00:00
parent 696843bacd
commit 156a23da16
12 changed files with 58 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
PROGRESS.md
View File

@ -64,7 +64,7 @@ Based on usability testing (March 2026). Reworks the entire setup flow into a si
| E | Contextual prompts for skipped steps (products, checkout, order detail) | 2h | planned |
| F | Dashboard checklist and messaging rework | 2h | planned |
| G | Coming soon page fixes (logo layout, admin login link) | 30m | done |
| H | External links UX (new tabs, icons, aria labels) | 1h | planned |
| H | External links UX (new tabs, icons, aria labels) | 1h | done |
| I | Input styling — WCAG AA/AAA compliance | 1h | done |
### Notification system overhaul ([plan](docs/plans/notification-overhaul.md))

8
assets/css/admin/components.css
View File

@ -4774,6 +4774,14 @@
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-1 { margin-inline-start: 0.25rem; }
.external-link-icon {
width: 0.75em;
height: 0.75em;
margin-inline-start: 0.25em;
vertical-align: baseline;
opacity: 0.6;
}
.sr-only {
position: absolute;
width: 1px;

8
assets/css/shop/utilities.css
View File

@ -14,6 +14,14 @@
border-width: 0;
}
.external-link-icon {
width: 0.75em;
height: 0.75em;
margin-inline-start: 0.25em;
vertical-align: baseline;
opacity: 0.6;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;

22
lib/berrypod_web/components/core_components.ex
View File

@ -423,6 +423,25 @@ defmodule BerrypodWeb.CoreComponents do
"""
end
@doc """
Renders a link to an external site with proper security attributes,
an external-link icon, and screen reader context.
"""
attr :href, :string, required: true
attr :class, :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def external_link(assigns) do
~H"""
<a href={@href} target="_blank" rel="noopener noreferrer" class={@class} {@rest}>
{render_slot(@inner_block)}
<.icon name="hero-arrow-top-right-on-square" class="external-link-icon" />
<span class="sr-only">(opens in new tab)</span>
</a>
"""
end
## JS Commands
def show(js \\ %JS{}, selector) do
@ -608,9 +627,10 @@ defmodule BerrypodWeb.CoreComponents do
:if={@option[:url]}
href={@option.url}
target="_blank"
rel="noopener"
rel="noopener noreferrer"
class="card-radio-link"
onclick="event.stopPropagation();"
aria-label={@option.name <> " (opens in new tab)"}
>
{@option.name} &nearr;
</a>

1
lib/berrypod_web/components/shop_components/content.ex
View File

@ -431,6 +431,7 @@ defmodule BerrypodWeb.ShopComponents.Content do
<.social_icon platform={link.platform} />
</span>
<span>{link.label}</span>
<span class="sr-only">(opens in new tab)</span>
</a>
<% end %>
</div>

3
lib/berrypod_web/live/admin/email_settings.ex
View File

@ -272,8 +272,9 @@ defmodule BerrypodWeb.Admin.EmailSettings do
:if={adapter.url}
href={adapter.url}
target="_blank"
rel="noopener"
rel="noopener noreferrer"
class="admin-link-subtle admin-adapter-link"
aria-label={adapter.name <> " website (opens in new tab)"}
>
&nearr;
</a>

8
lib/berrypod_web/live/admin/order_show.ex
View File

@ -134,15 +134,13 @@ defmodule BerrypodWeb.Admin.OrderShow do
>
<span class="admin-text-secondary"><.icon name="hero-truck-mini" class="size-4" /></span>
<span class="admin-text-medium">{@order.tracking_number}</span>
<a
<.external_link
:if={@order.tracking_url not in [nil, ""]}
href={@order.tracking_url}
target="_blank"
rel="noopener"
class="admin-link"
>
Track shipment &rarr;
</a>
Track shipment
</.external_link>
</div>
<.order_timeline entries={@timeline} />
</div>

3
lib/berrypod_web/live/admin/product_show.ex
View File

@ -102,11 +102,12 @@ defmodule BerrypodWeb.Admin.ProductShow do
:if={provider_edit_url(@product)}
href={provider_edit_url(@product)}
target="_blank"
rel="noopener"
rel="noopener noreferrer"
class="admin-btn admin-btn-ghost admin-btn-sm"
>
Edit on {provider_label(@product)}
<.icon name="hero-arrow-top-right-on-square-mini" class="size-4" />
<span class="sr-only">(opens in new tab)</span>
</.link>
<.link
navigate={~p"/products/#{@product.slug}"}

6
lib/berrypod_web/live/admin/providers/form.html.heex
View File

@ -15,10 +15,10 @@
<p class="admin-callout-title">Get your API key from {@provider.name}:</p>
<ol class="admin-callout-list">
<li>
<a href={@provider.login_url} target="_blank" rel="noopener" class="admin-link">
<.external_link href={@provider.login_url} class="admin-link">
Log in to {@provider.name}
</a>
(or <a href={@provider.signup_url} target="_blank" rel="noopener" class="admin-link">create a free account</a>)
</.external_link>
(or <.external_link href={@provider.signup_url} class="admin-link">create a free account</.external_link>)
</li>
<li :for={step <- @provider.setup_steps}>
{raw(step)}

9
lib/berrypod_web/live/admin/settings.ex
View File

@ -592,14 +592,9 @@ defmodule BerrypodWeb.Admin.Settings do
<p class="admin-section-desc admin-section-desc-flush">
To accept payments, connect your Stripe account by entering your secret key.
You can find it in your
<a
href="https://dashboard.stripe.com/apikeys"
target="_blank"
rel="noopener"
class="admin-link"
>
<.external_link href="https://dashboard.stripe.com/apikeys" class="admin-link">
Stripe dashboard
</a>
</.external_link>
under Developers &rarr; API keys.
</p>

17
lib/berrypod_web/live/setup/onboarding.ex
View File

@ -392,9 +392,9 @@ defmodule BerrypodWeb.Setup.Onboarding do
<% provider_info = Enum.find(@providers, &(&1.type == @selected)) %>
<p class="setup-hint">
{provider_info.setup_hint}.
<a href={provider_info.setup_url} target="_blank" rel="noopener" class="setup-link">
Open {provider_info.name} &rarr;
</a>
<.external_link href={provider_info.setup_url} class="setup-link">
Open {provider_info.name}
</.external_link>
</p>
<.form for={@form} phx-submit="connect_provider">
@ -428,14 +428,9 @@ defmodule BerrypodWeb.Setup.Onboarding do
<div>
<p class="setup-hint">
Enter your Stripe secret key to accept payments.
<a
href="https://dashboard.stripe.com/apikeys"
target="_blank"
rel="noopener"
class="setup-link"
>
Open Stripe dashboard &rarr;
</a>
<.external_link href="https://dashboard.stripe.com/apikeys" class="setup-link">
Open Stripe dashboard
</.external_link>
</p>
<.form for={@form} phx-submit="connect_stripe">

1
lib/berrypod_web/page_renderer.ex
View File

@ -888,6 +888,7 @@ defmodule BerrypodWeb.PageRenderer do
target="_blank"
rel="noopener noreferrer"
class="order-detail-tracking-btn themed-button"
aria-label="Track parcel (opens in new tab)"
>
Track parcel
</a>