From 0e998fdac93a62b1e11772b1dec99214118f4684 Mon Sep 17 00:00:00 2001
From: Jamey Greenwood <jamey@greenwood.im>
Date: Sat, 17 Jan 2026 13:51:15 +0000
Subject: [PATCH] refactor: extract skip_link to shared ShopComponents module

Move the accessibility skip link from ThemeLive.PreviewPages to the
shared ShopComponents module for reuse on public storefront pages.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/shop_components.ex                  | 14 ++++++++++++++
 .../live/theme_live/preview_pages.ex               | 10 ----------
 .../live/theme_live/preview_pages/about.html.heex  |  2 +-
 .../live/theme_live/preview_pages/cart.html.heex   |  2 +-
 .../theme_live/preview_pages/collection.html.heex  |  2 +-
 .../theme_live/preview_pages/contact.html.heex     |  2 +-
 .../live/theme_live/preview_pages/error.html.heex  |  2 +-
 .../live/theme_live/preview_pages/home.html.heex   |  2 +-
 .../live/theme_live/preview_pages/pdp.html.heex    |  2 +-
 9 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/lib/simpleshop_theme_web/components/shop_components.ex b/lib/simpleshop_theme_web/components/shop_components.ex
index a962806..b62a53a 100644
--- a/lib/simpleshop_theme_web/components/shop_components.ex
+++ b/lib/simpleshop_theme_web/components/shop_components.ex
@@ -38,4 +38,18 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     </div>
     """
   end
+
+  @doc """
+  Renders the skip link for keyboard navigation accessibility.
+
+  This is a standard accessibility pattern that allows keyboard users
+  to skip directly to the main content.
+  """
+  def skip_link(assigns) do
+    ~H"""
+    <a href="#main-content" class="skip-link">
+      Skip to main content
+    </a>
+    """
+  end
 end
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex b/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex
index ef89f87..4cfaac7 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex
@@ -4,16 +4,6 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
 
   embed_templates "preview_pages/*"
 
-  @doc """
-  Renders the skip link for keyboard navigation accessibility.
-  """
-  def skip_link(assigns) do
-    ~H"""
-    <a href="#main-content" class="skip-link">
-      Skip to main content
-    </a>
-    """
-  end
 
   @doc """
   Renders the shop header with logo based on logo_mode setting.
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex
index 0aeecff..eb8341b 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex
@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex
index 28b34ab..a557617 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex
@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex
index 9200da5..df68eea 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex
@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex
index 7b372f1..8c1936d 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex
@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex
index 3127486..978673d 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex
@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
index 0021bfd..67f5b90 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex
index 9c446b3..eca0058 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex
@@ -3,7 +3,7 @@
 %>
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>