From aa469ffb50f10698cabda740d4dc6eeebe92a2f7 Mon Sep 17 00:00:00 2001 From: Jamey Greenwood Date: Thu, 15 Jan 2026 00:24:25 +0000 Subject: [PATCH] feat: implement UX pattern improvements for accessibility & performance MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Accessibility: - Add skip link component for keyboard navigation - Add visible focus rings on all interactive elements - Add aria-current="page" to navigation active states - Ensure 44px minimum touch targets on header icons and filter pills Product Page (PDP): - Add accordion layout for Description, Size Guide, Shipping & Returns - Convert Reviews section to accordion format (open by default) - Make Add to Basket button sticky on mobile, normal on desktop Product Cards (home & collection): - Add "Free delivery over £40" shipping badge - Add loading="lazy" and decoding="async" to images Cart Drawer: - Add "Delivery: Calculated at checkout" label - Add Remove button to each cart item All Preview Pages: - Add skip link to all 7 preview pages - Wrap main content in
- Pass active_page to shop_header for nav highlighting Co-Authored-By: Claude Opus 4.5 --- assets/css/theme-semantic.css | 74 ++++++ .../live/theme_live/preview_pages.ex | 35 ++- .../theme_live/preview_pages/about.html.heex | 9 +- .../theme_live/preview_pages/cart.html.heex | 9 +- .../preview_pages/collection.html.heex | 14 +- .../preview_pages/contact.html.heex | 9 +- .../theme_live/preview_pages/error.html.heex | 9 +- .../theme_live/preview_pages/home.html.heex | 14 +- .../theme_live/preview_pages/pdp.html.heex | 241 ++++++++++++------ 9 files changed, 318 insertions(+), 96 deletions(-) diff --git a/assets/css/theme-semantic.css b/assets/css/theme-semantic.css index 20c798c..5547558 100644 --- a/assets/css/theme-semantic.css +++ b/assets/css/theme-semantic.css @@ -105,3 +105,77 @@ .preview-frame[data-mood="dark"], .shop-root[data-mood="dark"] { --t-accent-subtle: hsl(var(--t-accent-h) 30% 15%); } + +/* ======================================== + ACCESSIBILITY - Focus Rings + Visible focus indicators for all interactive elements + ======================================== */ + +/* Base focus ring style */ +.shop-container a:focus-visible, +.shop-container button:focus-visible, +.shop-container input:focus-visible, +.shop-container select:focus-visible, +.shop-container textarea:focus-visible, +.shop-container [tabindex]:focus-visible, +.shop-container details summary:focus-visible { + outline: 2px solid hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); + outline-offset: 2px; +} + +/* Remove default browser outlines when using focus-visible */ +.shop-container a:focus:not(:focus-visible), +.shop-container button:focus:not(:focus-visible), +.shop-container input:focus:not(:focus-visible), +.shop-container select:focus:not(:focus-visible), +.shop-container textarea:focus:not(:focus-visible) { + outline: none; +} + +/* Skip link for keyboard navigation */ +.skip-link { + position: absolute; + top: -100px; + left: 50%; + transform: translateX(-50%); + background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); + color: var(--t-text-inverse); + padding: 0.75rem 1.5rem; + z-index: 9999; + border-radius: var(--t-radius-button); + font-weight: 600; + text-decoration: none; + transition: top 0.2s ease; +} + +.skip-link:focus { + top: 1rem; +} + +/* Ensure minimum touch target size (44x44px) */ +.shop-container .header-icon-btn { + min-width: 44px; + min-height: 44px; +} + +.shop-container .filter-pill { + min-height: 44px; + padding-left: 1rem; + padding-right: 1rem; +} + +/* Nav link styling with active state indicator */ +.shop-nav a { + padding: 0.5rem 0; + border-bottom: 2px solid transparent; + transition: border-color 0.2s ease, color 0.2s ease; +} + +.shop-nav a:hover { + color: var(--t-text-primary); +} + +.shop-nav a[aria-current="page"] { + color: var(--t-text-primary); + border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); +} 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 758cb7d..4bfa30a 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex @@ -3,6 +3,17 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do embed_templates "preview_pages/*" + @doc """ + Renders the skip link for keyboard navigation accessibility. + """ + def skip_link(assigns) do + ~H""" + + """ + end + @doc """ Renders the announcement bar. """ @@ -25,6 +36,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do attr :theme_settings, :map, required: true attr :logo_image, :map, default: nil attr :header_image, :map, default: nil + attr :active_page, :string, default: nil def shop_header(assigns) do ~H""" @@ -76,10 +88,10 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
@@ -266,15 +278,24 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do

<%= item.variant %>

-

- <%= item.price %> -

+
+

+ <%= item.price %> +

+ +
<% end %>
+
+ Delivery + Calculated at checkout +
Subtotal £72.00 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 7d621ab..758aae0 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,14 +1,17 @@
+ + + <%= if @theme_settings.announcement_bar do %> <% end %> - + -
+

@@ -60,7 +63,7 @@

-
+
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 5f7b157..0a5db6a 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,13 +1,16 @@
+ + + <%= if @theme_settings.announcement_bar do %> <% end %> - + -
+

Your basket

@@ -113,7 +116,7 @@
- + 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 5a99a1c..5a6b818 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,13 +1,17 @@
+ + + <%= if @theme_settings.announcement_bar do %> <% end %> - + +

@@ -77,6 +81,8 @@ {product.name} @@ -84,6 +90,8 @@ {product.name} <% end %> @@ -111,11 +119,15 @@ <% end %>

<% end %> +

+ Free delivery over £40 +

<% end %> + 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 fdbee5d..ead2566 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,13 +1,16 @@
+ + + <%= if @theme_settings.announcement_bar do %> <% end %> - + -
+

Contact Us

@@ -180,7 +183,7 @@
- + 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 2ae1336..e92ce73 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,13 +1,16 @@
+ + + <%= if @theme_settings.announcement_bar do %> <% end %> - + -
+

404 @@ -71,7 +74,7 @@ <% end %>

-
+ 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 b9de11d..84ec68b 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,13 +1,17 @@
+ + + <%= if @theme_settings.announcement_bar do %> <% end %> - + +

Original designs, printed on demand @@ -74,12 +78,16 @@ {product.name} <%= if @theme_settings.hover_image && product[:hover_image_url] do %> {product.name} <% end %> @@ -96,6 +104,9 @@ £<%= product.price / 100 %>

<% end %> +

+ Free delivery over £40 +

<% end %> @@ -137,6 +148,7 @@ + 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 6701a00..f7eb96e 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 @@ -2,15 +2,18 @@ product = List.first(@preview_data.products) %>
+ + + <%= if @theme_settings.announcement_bar do %> <% end %> - + -
+
-

- <%= product.description %>. Crafted with attention to detail and quality materials, this product is designed to last. Perfect for everyday use or special occasions. -

-
- - + +
+ +
<%= if @theme_settings.pdp_trust_badges do %> @@ -231,32 +232,97 @@ <% end %> + + +
+ +
+ + Description + + + + +
+

<%= product.description %>. Crafted with attention to detail and quality materials, this product is designed to last. Perfect for everyday use or special occasions.

+
+
+ + +
+ + Size Guide + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SizeChest (cm)Length (cm)
S86-9171
M91-9673
L96-10175
XL101-10677
+
+
+ + +
+ + Shipping & Returns + + + + +
+
+

Delivery

+

Free UK delivery on orders over £40. Standard delivery 3-5 working days. Express delivery available at checkout.

+
+
+

Returns

+

We offer a 30-day return policy. Items must be unused and in original packaging. Please contact us to arrange a return.

+
+
+
+
- + <%= if @theme_settings.pdp_reviews do %> -
-
-

- Customer reviews -

-
-
- <%= for _i <- 1..5 do %> - - - - <% end %> -
- Based on 24 reviews -
-
- -
- -
-
+
+ +
+

+ Customer reviews +

+
<%= for _i <- 1..5 do %> @@ -264,48 +330,69 @@ <% end %>
- 2 weeks ago + (24)
-

Absolutely beautiful

-

- The quality exceeded my expectations. The colours are vibrant and the paper feels premium. It's now pride of place in my living room. -

-
- Sarah M. - Verified purchase -
-
+
+ + + + - -
-
-
- <%= for i <- 1..5 do %> - - - - <% end %> +
+
+ +
+
+
+ <%= for _i <- 1..5 do %> + + + + <% end %> +
+ 2 weeks ago
- 1 month ago -
-

Great gift

-

- Bought this as a gift and it arrived beautifully packaged. Fast shipping too. Would definitely order again. -

-
- James T. - Verified purchase -
-
-
+

Absolutely beautiful

+

+ The quality exceeded my expectations. The colours are vibrant and the paper feels premium. It's now pride of place in my living room. +

+
+ Sarah M. + Verified purchase +
+ - - + +
+
+
+ <%= for i <- 1..5 do %> + + + + <% end %> +
+ 1 month ago +
+

Great gift

+

+ Bought this as a gift and it arrived beautifully packaged. Fast shipping too. Would definitely order again. +

+
+ James T. + Verified purchase +
+
+ + + + + <% end %> @@ -328,12 +415,16 @@ {related_product.name} <%= if @theme_settings.hover_image && related_product[:hover_image_url] do %> {related_product.name} <% end %> @@ -353,7 +444,7 @@ <% end %> - +