From c95cc44a1140f0fbb796d4762166d810373dd0c8 Mon Sep 17 00:00:00 2001
From: Simon Axelsson <simon@siax.io>
Date: Thu, 25 Jun 2026 18:17:19 +0200
Subject: [PATCH] feat(a11y): add ARIA tablist/tab/tabpanel roles + i18n error
 page

- validera: role=tablist + role=tab + aria-selected + aria-controls/id
  on tab buttons; role=tabpanel + id + aria-labelledby on content div
- katalog/[id]: same ARIA tab pattern; replaced incorrect aria-current=page
  on tab buttons with role=tab + aria-selected
- error.tsx: i18n all hardcoded English strings via useT()

All three changes pass tsc 0.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/error.tsx                    | 12 +++++++-----
 app/katalog/[id]/page.tsx        | 17 +++++++++++++----
 app/order/[id]/validera/page.tsx | 16 +++++++++++++---
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/app/error.tsx b/app/error.tsx
index bfc72dd..5bc5f64 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useEffect } from "react";
 import { Header } from "@/components/header";
+import { useT } from "@/components/locale-provider";
 
 export default function Error({
   error,
@@ -11,6 +12,7 @@ export default function Error({
   error: Error & { digest?: string };
   reset: () => void;
 }) {
+  const t = useT();
   useEffect(() => {
     console.error(error);
   }, [error]);
@@ -27,26 +29,26 @@ export default function Error({
             500
           </span>
           <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
-            Error
+            {t({ en: "Error", sv: "Fel" })}
           </p>
           <h1 className="mt-5 max-w-[14ch] text-[clamp(2.6rem,7vw,5.5rem)] font-medium leading-[0.95] tracking-[-0.035em]">
-            Something went wrong.
+            {t({ en: "Something went wrong.", sv: "Något gick fel." })}
           </h1>
           <p className="mt-6 max-w-[40ch] font-mono text-sm text-muted-foreground">
-            An unexpected error occurred. Nothing was guessed.{error.digest ? ` (${error.digest})` : ""}
+            {t({ en: "An unexpected error occurred. Nothing was guessed.", sv: "Ett oväntat fel inträffade. Inget gissades." })}{error.digest ? ` (${error.digest})` : ""}
           </p>
           <div className="mt-12 flex flex-wrap gap-3">
             <button
               onClick={reset}
               className="bg-foreground px-7 py-4 font-mono text-[12px] uppercase tracking-[0.14em] text-background transition-colors hover:bg-[var(--accent-red)]"
             >
-              Try again →
+              {t({ en: "Try again →", sv: "Försök igen →" })}
             </button>
             <Link
               href="/"
               className="border border-foreground px-7 py-4 font-mono text-[12px] uppercase tracking-[0.14em] transition-colors hover:bg-foreground hover:text-background"
             >
-              Home
+              {t({ en: "Home", sv: "Hem" })}
             </Link>
           </div>
         </div>
diff --git a/app/katalog/[id]/page.tsx b/app/katalog/[id]/page.tsx
index fed5e72..33eedbe 100644
--- a/app/katalog/[id]/page.tsx
+++ b/app/katalog/[id]/page.tsx
@@ -267,15 +267,18 @@ function DatasetView({ d, tab, setTab }: { d: Dataset; tab: TabKey; setTab: (k:
       <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px]">
         <div className="reveal-left delay-1 lg:border-r lg:border-border">
           {/* tabs */}
-          <nav aria-label={t({ en: "Views", sv: "Vyer" })} className="sticky top-16 z-30 -mx-px flex flex-wrap gap-px border-b border-border bg-border">
+          <div role="tablist" aria-label={t({ en: "Dataset views", sv: "Datasetvyer" })} className="sticky top-16 z-30 -mx-px flex flex-wrap gap-px border-b border-border bg-border">
             {TABS.map((tb) => {
               const active = tb.key === tab;
               return (
                 <button
                   key={tb.key}
+                  id={`katalog-tab-${tb.key}`}
+                  role="tab"
                   type="button"
+                  aria-selected={active}
+                  aria-controls={`katalog-panel-${tb.key}`}
                   onClick={() => setTab(tb.key)}
-                  aria-current={active ? "page" : undefined}
                   className="flex-1 bg-background px-4 py-3.5 font-mono text-[11px] uppercase tracking-[0.1em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                   style={{
                     backgroundColor: active ? "var(--foreground)" : "var(--background)",
@@ -286,9 +289,15 @@ function DatasetView({ d, tab, setTab }: { d: Dataset; tab: TabKey; setTab: (k:
                 </button>
               );
             })}
-          </nav>
+          </div>
 
-          <div className="px-1 py-10 lg:pr-8">
+          <div
+            className="px-1 py-10 lg:pr-8"
+            role="tabpanel"
+            id={`katalog-panel-${tab}`}
+            aria-labelledby={`katalog-tab-${tab}`}
+            tabIndex={0}
+          >
             {tab === "overview"  ? <OverviewTab  d={d} /> : null}
             {tab === "samples"   ? <SampleTab    d={d} /> : null}
             {tab === "quality"   ? <QualityTab   d={d} /> : null}
diff --git a/app/order/[id]/validera/page.tsx b/app/order/[id]/validera/page.tsx
index b6c8478..4f0ddf2 100644
--- a/app/order/[id]/validera/page.tsx
+++ b/app/order/[id]/validera/page.tsx
@@ -121,12 +121,16 @@ export default function ValidationPage() {
 
       <div className="mx-auto max-w-[80rem] px-6 py-12">
         {/* tabs */}
-        <div className="reveal flex flex-wrap border-b border-border">
+        <div role="tablist" aria-label={t({ en: "Result views", sv: "Resultatvyer" })} className="reveal flex flex-wrap border-b border-border">
           {TABS.map((tb, i) => (
             <button
               key={tb.key}
+              id={`validera-tab-${tb.key}`}
+              role="tab"
+              aria-selected={tab === tb.key}
+              aria-controls={`validera-panel-${tb.key}`}
               onClick={() => setTab(tb.key)}
-              className="group relative -mb-px px-5 py-3.5 font-mono text-[11px] uppercase tracking-[0.12em] transition-colors"
+              className="group relative -mb-px px-5 py-3.5 font-mono text-[11px] uppercase tracking-[0.12em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
               style={{ color: tab === tb.key ? "var(--foreground)" : "var(--muted-foreground)" }}
             >
               <span className="mr-2 text-muted-foreground">{String(i + 1).padStart(2, "0")}</span>
@@ -140,7 +144,13 @@ export default function ValidationPage() {
           ))}
         </div>
 
-        <div className="mt-10">
+        <div
+          className="mt-10"
+          role="tabpanel"
+          id={`validera-panel-${tab}`}
+          aria-labelledby={`validera-tab-${tab}`}
+          tabIndex={0}
+        >
           {/* Table tab */}
           {tab === "table" ? (
             <div className="reveal-fade">