From 1948d09d16bd9d60f59858d7cb5678fc598a7c9c Mon Sep 17 00:00:00 2001 From: Anders Olsson Date: Mon, 8 Jun 2026 09:36:44 +0200 Subject: [PATCH 1/4] =?UTF-8?q?docs(specs):=20a11y=20=E2=80=94=20focus=20r?= =?UTF-8?q?ings,=20route=20focus,=20skip=20link,=20honest=20semantics,=20h?= =?UTF-8?q?tml=20lang=20(#52)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../specs/2026-06-08-a11y-focus-design.md | 135 ++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 docs/superpowers/specs/2026-06-08-a11y-focus-design.md diff --git a/docs/superpowers/specs/2026-06-08-a11y-focus-design.md b/docs/superpowers/specs/2026-06-08-a11y-focus-design.md new file mode 100644 index 0000000..fa01a1e --- /dev/null +++ b/docs/superpowers/specs/2026-06-08-a11y-focus-design.md @@ -0,0 +1,135 @@ +# Accessibility — Focus, Route Management, Honest Semantics — Design + +**Date:** 2026-06-08 +**Status:** Approved (brainstorming) — ready for implementation planning. +**Issue:** #52. + +## Context + +Keyboard-driven fast data entry is a stated goal and this is a public-institution tool, but several +custom controls drop the `ui/*` kit's focus ring, route changes leave focus stranded, there's no skip +link, the authority "tabs" announce tab semantics they don't fulfill, the lang switch lacks a group +label, and `` never updates. + +**Current state (post #49/#51/#54/#59):** the four raw ` { test("kind tabs link to the other kinds", async () => { renderApp(tree(), { route: "/authorities/person" }); - expect(await screen.findByRole("tab", { name: /place/i })).toHaveAttribute("href", "/authorities/place"); + expect(await screen.findByRole("link", { name: /place/i })).toHaveAttribute("href", "/authorities/place"); }); -test("aria-selected is on the tab element and reflects the active kind", async () => { +test("aria-current marks the active kind link", async () => { renderApp(tree(), { route: "/authorities/person" }); - expect(await screen.findByRole("tab", { name: /^person$/i })).toHaveAttribute("aria-selected", "true"); - expect(screen.getByRole("tab", { name: /^place$/i })).toHaveAttribute("aria-selected", "false"); + expect(await screen.findByRole("link", { name: /^person$/i })).toHaveAttribute("aria-current", "page"); + expect(screen.getByRole("link", { name: /^place$/i })).not.toHaveAttribute("aria-current"); }); test("create without EN label shows required alert and does not POST", async () => { diff --git a/web/src/fields/field-list.tsx b/web/src/fields/field-list.tsx index 110259c..1838ddd 100644 --- a/web/src/fields/field-list.tsx +++ b/web/src/fields/field-list.tsx @@ -5,8 +5,10 @@ import type { components } from "../api/schema"; import { useFieldDefinitions, useDeleteFieldDefinition } from "../api/queries"; import { labelText } from "../lib/labels"; import { byLabel, compareStrings } from "../lib/sort"; +import { focusRing } from "../lib/focus-ring"; import { DeleteConfirmDialog } from "../components/delete-confirm-dialog"; import { Badge } from "@/components/ui/badge"; +import { cn } from "@/lib/utils"; import { Input } from "@/components/ui/input"; import { ListSkeleton } from "@/components/ui/skeletons"; @@ -86,7 +88,7 @@ export function FieldList({ > diff --git a/web/src/shell/lang-switch.tsx b/web/src/shell/lang-switch.tsx index 0e2e2a2..628fe2d 100644 --- a/web/src/shell/lang-switch.tsx +++ b/web/src/shell/lang-switch.tsx @@ -1,17 +1,23 @@ +import { useTranslation } from "react-i18next"; + import { useLocale } from "../i18n/use-locale"; +import { focusRing } from "../lib/focus-ring"; +import { cn } from "@/lib/utils"; export function LangSwitch() { + const { t } = useTranslation(); const { locale, setLocale } = useLocale(); const base = locale.startsWith("sv") ? "sv" : "en"; return ( -
+
{(["sv", "en"] as const).map((lng) => ( diff --git a/web/src/shell/theme-switch.tsx b/web/src/shell/theme-switch.tsx index e366376..266751b 100644 --- a/web/src/shell/theme-switch.tsx +++ b/web/src/shell/theme-switch.tsx @@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"; import { useTheme } from "../theme/use-theme"; import type { Theme } from "../theme/theme"; +import { focusRing } from "../lib/focus-ring"; import { cn } from "@/lib/utils"; const OPTIONS: { value: Theme; Icon: typeof Sun }[] = [ @@ -29,6 +30,7 @@ export function ThemeSwitch() { title={t(`theme.${value}`)} className={cn( "rounded-md p-1 transition-colors", + focusRing, active ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground", From 69d3d2be15e1787ae51781f642165678ca023691 Mon Sep 17 00:00:00 2001 From: Anders Olsson Date: Mon, 8 Jun 2026 09:46:17 +0200 Subject: [PATCH 4/4] feat(web): skip link + route focus management + html lang sync (#52) --- web/src/i18n/en.json | 2 +- web/src/i18n/i18n.test.tsx | 7 +++++++ web/src/i18n/index.ts | 9 +++++++++ web/src/i18n/sv.json | 2 +- web/src/shell/app-shell.test.tsx | 30 ++++++++++++++++++++++++++++++ web/src/shell/app-shell.tsx | 25 +++++++++++++++++++++++-- 6 files changed, 71 insertions(+), 4 deletions(-) diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json index 27daa53..f20aeac 100644 --- a/web/src/i18n/en.json +++ b/web/src/i18n/en.json @@ -1,5 +1,5 @@ { - "common": { "yes": "Yes", "no": "No", "close": "Close", "loading": "Loading", "filter": "Filter…", "noMatches": "No matches", "language": "Language" }, + "common": { "yes": "Yes", "no": "No", "close": "Close", "loading": "Loading", "filter": "Filter…", "noMatches": "No matches", "language": "Language", "skipToContent": "Skip to content" }, "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar" }, "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server" }, "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)" }, diff --git a/web/src/i18n/i18n.test.tsx b/web/src/i18n/i18n.test.tsx index 30f6646..9ca4fd5 100644 --- a/web/src/i18n/i18n.test.tsx +++ b/web/src/i18n/i18n.test.tsx @@ -33,3 +33,10 @@ test("switches language at runtime", async () => { }); expect(screen.getByTestId("title")).toHaveTextContent("Föremål"); }); + +test("syncs document.documentElement.lang on language change", async () => { + await i18n.changeLanguage("sv"); + expect(document.documentElement.lang).toBe("sv"); + await i18n.changeLanguage("en"); + expect(document.documentElement.lang).toBe("en"); +}); diff --git a/web/src/i18n/index.ts b/web/src/i18n/index.ts index be89623..ef52596 100644 --- a/web/src/i18n/index.ts +++ b/web/src/i18n/index.ts @@ -15,4 +15,13 @@ void i18n.use(initReactI18next).init({ interpolation: { escapeValue: false }, }); +function syncHtmlLang(lng: string) { + if (typeof document !== "undefined") { + document.documentElement.lang = lng.startsWith("sv") ? "sv" : "en"; + } +} + +i18n.on("languageChanged", syncHtmlLang); +syncHtmlLang(i18n.language); + export default i18n; diff --git a/web/src/i18n/sv.json b/web/src/i18n/sv.json index 3cf88ab..7cedbc4 100644 --- a/web/src/i18n/sv.json +++ b/web/src/i18n/sv.json @@ -1,5 +1,5 @@ { - "common": { "yes": "Ja", "no": "Nej", "close": "Stäng", "loading": "Laddar", "filter": "Filtrera…", "noMatches": "Inga träffar", "language": "Språk" }, + "common": { "yes": "Ja", "no": "Nej", "close": "Stäng", "loading": "Laddar", "filter": "Filtrera…", "noMatches": "Inga träffar", "language": "Språk", "skipToContent": "Hoppa till innehåll" }, "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet" }, "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern" }, "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)" }, diff --git a/web/src/shell/app-shell.test.tsx b/web/src/shell/app-shell.test.tsx index 728e4f3..b1182ef 100644 --- a/web/src/shell/app-shell.test.tsx +++ b/web/src/shell/app-shell.test.tsx @@ -21,6 +21,7 @@ function tree() { }> objects outlet
} /> + fields outlet
} /> login page} /> @@ -36,6 +37,35 @@ test("shows active and disabled nav and renders the outlet", async () => { expect(screen.getByRole("link", { name: /fields/i })).toBeInTheDocument(); }); +test("renders a skip link targeting the focusable main region", async () => { + renderApp(tree(), { route: "/objects" }); + await screen.findByText("objects outlet"); + + expect(screen.getByRole("link", { name: /skip to content/i })).toHaveAttribute( + "href", + "#main-content", + ); + + const main = document.getElementById("main-content"); + expect(main).toBeTruthy(); + expect(main?.tabIndex).toBe(-1); +}); + +test("moves focus to the main region on route change", async () => { + renderApp(tree(), { route: "/objects" }); + await screen.findByText("objects outlet"); + + // Initial mount must NOT steal focus to main. + expect(document.activeElement).not.toBe(document.getElementById("main-content")); + + await userEvent.click(screen.getByRole("link", { name: /fields/i })); + await screen.findByText("fields outlet"); + + await waitFor(() => + expect(document.activeElement).toBe(document.getElementById("main-content")), + ); +}); + test("language switch toggles to Swedish", async () => { renderApp(tree(), { route: "/objects" }); await userEvent.click(await screen.findByRole("button", { name: "SV" })); diff --git a/web/src/shell/app-shell.tsx b/web/src/shell/app-shell.tsx index 650429f..819d5df 100644 --- a/web/src/shell/app-shell.tsx +++ b/web/src/shell/app-shell.tsx @@ -1,4 +1,6 @@ -import { Outlet } from "react-router-dom"; +import { useEffect, useRef } from "react"; +import { Outlet, useLocation } from "react-router-dom"; +import { useTranslation } from "react-i18next"; import { LangSwitch } from "./lang-switch"; import { ThemeSwitch } from "./theme-switch"; @@ -9,8 +11,27 @@ import { HeaderSearch } from "./header-search"; import { UserMenu } from "./user-menu"; export function AppShell() { + const { t } = useTranslation(); + const location = useLocation(); + const mainRef = useRef(null); + const didMount = useRef(false); + + useEffect(() => { + if (!didMount.current) { + didMount.current = true; + return; + } + mainRef.current?.focus(); + }, [location.pathname]); + return (
+ + {t("common.skipToContent")} +
@@ -21,7 +42,7 @@ export function AppShell() { -
+