🎨 Palette: Accessibility and Interaction Polish

.jules/palette.md

@@ -3,3 +3,7 @@
 ## 2025-05-14 - Tooltips for Icon-only Buttons
 **Learning:** Icon-only buttons, while space-efficient, can be ambiguous for users who rely on visual cues but don't immediately recognize the icon. Providing a Tooltip alongside an ARIA label ensures both visual and screen-reader accessibility. In HeroUI v3, the `Tooltip` component should wrap the interactive element, using `Tooltip.Trigger` and `Tooltip.Content` for clarity.
 **Action:** Always wrap icon-only buttons in a Tooltip if the action isn't globally standard or if additional clarity can be provided without cluttering the UI.
+
+## 2025-05-15 - Micro-UX Polish: Focus and Snappiness
+**Learning:** High-contrast focus rings (`focus-visible:ring-primary`) significantly improve navigation for keyboard-only users. Additionally, reducing Tooltip delay from 300ms to 200ms makes the interface feel noticeably more responsive and "snappy" without becoming distracting.
+**Action:** Apply consistent `focus-visible` styles to all interactive elements and standardize Tooltip delays to 200ms across the application.

app/components/CodeSnippet/index.tsx

@@ -52,7 +52,7 @@ export const CodeSnippet = ({ code }: CodeSnippetProps) => {
         <span className="text-primary select-none">$</span>
         <code className="text-foreground">{code}</code>
       </div>
-      <Tooltip delay={300} closeDelay={0}>
+      <Tooltip delay={200} closeDelay={0}>
         <Tooltip.Trigger
           render={(props: React.HTMLAttributes<Element>) => (
             <Button
@@ -64,7 +64,7 @@ export const CodeSnippet = ({ code }: CodeSnippetProps) => {
                 props.onClick?.(e);
                 copyToClipboard();
               }}
-              className="code-block__button"
+              className="code-block__button focus-visible:ring-2 focus-visible:ring-primary"
               aria-label={label}
             >
               {getIcon()}

app/components/Hero/index.tsx

@@ -27,7 +27,9 @@ export function Hero() {
       <div className="flex justify-center gap-4">
         <Link
           href="https://github.com/cur8d/typescript"
-          className="inline-flex items-center justify-center gap-2 rounded-xl border border-border bg-background px-8 py-3 text-sm font-medium transition-colors hover:bg-secondary"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center justify-center gap-2 rounded-xl border border-border bg-background px-8 py-3 text-sm font-medium transition-colors hover:bg-secondary focus-visible:ring-2 focus-visible:ring-primary"
         >
           <SiGithub className="h-5 w-5" />
           GitHub

app/components/ThemeToggle/index.tsx

@@ -22,15 +22,15 @@ export function ThemeToggle() {
   , [mounted, targetTheme]);
 
   return (
-    <Tooltip delay={300} closeDelay={0}>
+    <Tooltip delay={200} closeDelay={0}>
       <Tooltip.Trigger
         render={(props: React.HTMLAttributes<Element>) => (
           <Button
             {...props}
             isIconOnly
             variant="ghost"
             aria-label={label}
-            className="size-10 md:size-9"
+            className="size-10 md:size-9 focus-visible:ring-2 focus-visible:ring-primary"
             onClick={(e: React.MouseEvent<Element>) => {
               props.onClick?.(e);
               if (mounted) setTheme(targetTheme);