add external link UX: icons, rel attributes, screen reader labels
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:
@@ -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} →
|
||||
</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 →
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user