make settings accessible

 Conflicts:

	client/ui/frontend/src/modules/profiles/ProfilesTab.tsx

client/ui/frontend/src/components/LanguagePicker.tsx

@@ -49,6 +49,14 @@ export function LanguagePicker() {
         [languages, i18n.language],
     );
 
+    const handleTriggerKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (open) return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            setOpen(true);
+        }
+    };
+
     const select = async (code: string) => {
         setOpen(false);
         if (busy || code === i18n.language) return;
@@ -76,7 +84,9 @@ export function LanguagePicker() {
                     <Popover.Trigger asChild>
                         <button
                             type={"button"}
+                            tabIndex={0}
                             disabled={busy || languages.length === 0}
+                            onKeyDown={handleTriggerKeyDown}
                             aria-label={t("settings.general.language.label")}
                             aria-haspopup="listbox"
                             aria-expanded={open}
@@ -86,6 +96,7 @@ export function LanguagePicker() {
                                 "border-neutral-200 dark:border-nb-gray-700",
                                 "text-xs font-semibold text-nb-gray-100 cursor-default outline-none",
                                 "hover:border-nb-gray-600 data-[state=open]:border-nb-gray-600",
+                                "focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
                                 "disabled:opacity-50",
                             )}
                         >
@@ -109,7 +120,6 @@ export function LanguagePicker() {
                         <Popover.Content
                             align={"start"}
                             sideOffset={6}
-                            onCloseAutoFocus={(e) => e.preventDefault()}
                             className={cn(
                                 "w-[var(--radix-popover-trigger-width)]",
                                 "rounded-lg border border-nb-gray-850 bg-nb-gray-920 shadow-lg p-1 z-50",

client/ui/frontend/src/components/VerticalTabs.tsx

@@ -48,6 +48,7 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function VerticalTab
                 "transition-colors duration-150",
                 "data-[state=active]:bg-nb-gray-930",
                 "data-[state=inactive]:hover:bg-nb-gray-935",
+                "focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
                 className,
             )}
             {...props}
@@ -81,7 +82,14 @@ const Content = forwardRef<HTMLDivElement, Tabs.TabsContentProps>(function Verti
     { className, ...props },
     ref,
 ) {
-    return <Tabs.Content ref={ref} className={cn("outline-none", className)} {...props} />;
+    return (
+        <Tabs.Content
+            ref={ref}
+            tabIndex={-1}
+            className={cn("outline-none", className)}
+            {...props}
+        />
+    );
 });
 
 export const VerticalTabs = Object.assign(Root, { List, Trigger, Content });

client/ui/frontend/src/components/buttons/Button.tsx

@@ -143,6 +143,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         <button
             ref={ref}
             type={type}
+            tabIndex={0}
             disabled={disabled || loading}
             aria-busy={loading || undefined}
             className={cn(

client/ui/frontend/src/components/switches/FancyToggleSwitch.tsx

@@ -83,6 +83,7 @@ export default function FancyToggleSwitch({
     return (
         <div
             onClick={handleClick}
+            {...(disabled ? { inert: "" } : {})}
             className={cn(
                 "cursor-default transition-all duration-300 relative z-[1]",
                 "inline-block text-left w-full",