Files
adminandClaude Sonnet 4.6 c95cc44a11 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>
2026-06-25 18:17:19 +02:00

59 lines
2.2 KiB
TypeScript

"use client";
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,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
const t = useT();
useEffect(() => {
console.error(error);
}, [error]);
return (
<main id="main-content" className="min-h-screen bg-background text-foreground">
<Header />
<div className="mx-auto max-w-[80rem] px-6 py-28 md:py-40">
<div className="relative">
<span
aria-hidden
className="pointer-events-none absolute -top-8 right-0 select-none font-mono text-[clamp(6rem,22vw,18rem)] font-medium leading-none tracking-[-0.05em] text-foreground/[0.04]"
>
500
</span>
<p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
{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]">
{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">
{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)]"
>
{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"
>
{t({ en: "Home", sv: "Hem" })}
</Link>
</div>
</div>
</div>
</main>
);
}