feat(web): skip link + route focus management + html lang sync (#52)

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)" },

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");
+});

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;

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)" },

web/src/shell/app-shell.test.tsx

@@ -21,6 +21,7 @@ function tree() {
     <Routes>
       <Route element={<AppShell />}>
         <Route path="/objects" element={<div>objects outlet</div>} />
+        <Route path="/fields" element={<div>fields outlet</div>} />
       </Route>
       <Route path="/login" element={<div>login page</div>} />
     </Routes>
@@ -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" }));

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<HTMLElement>(null);
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (!didMount.current) {
+      didMount.current = true;
+      return;
+    }
+    mainRef.current?.focus();
+  }, [location.pathname]);
+
   return (
     <div className="flex min-h-screen">
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-50 focus:rounded-md focus:border focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:ring-3 focus:ring-ring/50"
+      >
+        {t("common.skipToContent")}
+      </a>
       <Sidebar />
       <BreadcrumbProvider>
         <div className="flex flex-1 flex-col">
@@ -21,7 +42,7 @@ export function AppShell() {
             <LangSwitch />
             <UserMenu />
           </header>
-          <main className="flex-1 overflow-hidden">
+          <main ref={mainRef} id="main-content" tabIndex={-1} className="flex-1 overflow-hidden outline-none">
             <Outlet />
           </main>
         </div>