fix visible focus ring

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

@@ -8,6 +8,7 @@ import { Preferences } from "@bindings/services";
 import { type LanguageCode, type Language } from "@bindings/i18n/models.js";
 import { HelpText } from "@/components/typography/HelpText";
 import { Label } from "@/components/typography/Label";
+import { useFocusVisible } from "@/hooks/useFocusVisible";
 import { loadLanguages } from "@/lib/i18n";
 import { cn } from "@/lib/cn";
 import { errorDialog, formatErrorMessage } from "@/lib/errors";
@@ -24,6 +25,7 @@ export function LanguagePicker() {
     const [languages, setLanguages] = useState<Language[]>([]);
     const [open, setOpen] = useState(false);
     const [busy, setBusy] = useState(false);
+    const isFocusVisible = useFocusVisible();
 
     useEffect(() => {
         let cancelled = false;
@@ -96,7 +98,8 @@ export function LanguagePicker() {
                                 "border-neutral-200 dark:border-nb-gray-700",
                                 "cursor-default text-xs font-semibold text-nb-gray-100 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",
+                                isFocusVisible &&
+                                    "focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
                                 "disabled:opacity-50",
                             )}
                         >

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

@@ -2,6 +2,7 @@ import { type ComponentType, type ReactNode, forwardRef } from "react";
 import * as Tabs from "@radix-ui/react-tabs";
 import { type LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";
+import { useFocusVisible } from "@/hooks/useFocusVisible";
 
 const Root = forwardRef<HTMLDivElement, Omit<Tabs.TabsProps, "orientation">>(
     function VerticalTabsRoot({ className, ...props }, ref) {
@@ -40,6 +41,7 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function VerticalTab
     { icon: Icon, title, iconSize = 16, adornment, className, ...props },
     ref,
 ) {
+    const isFocusVisible = useFocusVisible();
     return (
         <Tabs.Trigger
             ref={ref}
@@ -48,7 +50,8 @@ 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",
+                isFocusVisible &&
+                    "focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
                 className,
             )}
             {...props}

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

@@ -1,5 +1,6 @@
 import { type ButtonHTMLAttributes, type ComponentType, forwardRef } from "react";
 import { type LucideProps } from "lucide-react";
+import { useFocusVisible } from "@/hooks/useFocusVisible";
 import { cn } from "@/lib/cn";
 
 type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -12,6 +13,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
     { icon: Icon, iconSize = 17, iconClassName, className, type = "button", disabled, ...props },
     ref,
 ) {
+    const isFocusVisible = useFocusVisible();
     return (
         <button
             ref={ref}
@@ -21,7 +23,8 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
             className={cn(
                 "flex h-10 w-10 cursor-default items-center justify-center rounded-lg outline-none",
                 "text-nb-gray-400 hover:bg-nb-gray-900 hover:text-nb-gray-300",
-                "focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
+                isFocusVisible &&
+                    "focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
                 "wails-no-draggable transition-colors duration-150",
                 className,
             )}