feat(web): focus-visible rings on custom controls; honest authority links + lang group (#52)

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 (
-    <div className="flex gap-1 text-xs">
+    <div role="group" aria-label={t("common.language")} className="flex gap-1 text-xs">
       {(["sv", "en"] as const).map((lng) => (
         <button
           key={lng}
+          type="button"
           onClick={() => setLocale(lng)}
           aria-pressed={base === lng}
-          className={base === lng ? "font-bold" : "text-muted-foreground"}
+          className={cn("rounded-sm px-1", focusRing, base === lng ? "font-bold" : "text-muted-foreground")}
         >
           {lng.toUpperCase()}
         </button>

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