From 580d1aca335933dbd431d9aacae2200c2925c683 Mon Sep 17 00:00:00 2001
From: Simon Axelsson <simon@siax.io>
Date: Thu, 25 Jun 2026 18:20:42 +0200
Subject: [PATCH] feat(a11y): aria-pressed on validera destinations + homepage
 filter group

- validera: delivery destination toggle buttons get aria-pressed + role=group
  + focus-visible ring
- featured-products-section: filter buttons get aria-pressed + role=group
  with aria-label

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/order/[id]/validera/page.tsx                  | 5 +++--
 components/sections/featured-products-section.tsx | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/order/[id]/validera/page.tsx b/app/order/[id]/validera/page.tsx
index 3376b99..ea53d47 100644
--- a/app/order/[id]/validera/page.tsx
+++ b/app/order/[id]/validera/page.tsx
@@ -310,14 +310,15 @@ export default function ValidationPage() {
           <p className="font-mono text-[10.5px] uppercase tracking-[0.12em] text-muted-foreground">
             {t({ en: "Deliver to", sv: "Leverera till" })}
           </p>
-          <div className="mt-4 flex flex-wrap gap-2">
+          <div role="group" aria-label={t({ en: "Delivery destinations", sv: "Leveransdestinationer" })} className="mt-4 flex flex-wrap gap-2">
             {DESTINATIONS.map((d) => {
               const on = dests.includes(d.id);
               return (
                 <button
                   key={d.id}
+                  aria-pressed={on}
                   onClick={() => toggleDest(d.id)}
-                  className="border px-3.5 py-2 font-mono text-[11px] uppercase tracking-[0.08em] transition-colors hover:border-foreground"
+                  className="border px-3.5 py-2 font-mono text-[11px] uppercase tracking-[0.08em] transition-colors hover:border-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                   style={{
                     borderColor: on ? "var(--foreground)" : "var(--border)",
                     backgroundColor: on ? "var(--foreground)" : "transparent",
diff --git a/components/sections/featured-products-section.tsx b/components/sections/featured-products-section.tsx
index 895bd5b..47807f9 100644
--- a/components/sections/featured-products-section.tsx
+++ b/components/sections/featured-products-section.tsx
@@ -67,10 +67,11 @@ export function FeaturedProductsSection() {
               <span className="text-muted-foreground">{t({ en: "Ready to ship.", sv: "Redo att leverera." })}</span>
             </h2>
           </div>
-          <div className="flex flex-wrap gap-px bg-border">
+          <div role="group" aria-label={t({ en: "Filter by type", sv: "Filtrera efter typ" })} className="flex flex-wrap gap-px bg-border">
             {FILTERS.map((f) => (
               <button
                 key={f}
+                aria-pressed={filter === f}
                 onClick={() => setFilter(f)}
                 className="bg-background px-4 py-2 font-mono text-[11px] uppercase tracking-[0.1em] transition-colors"
                 style={{