From d94b183ed12ef011238c016cae6e02b949d35d96 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 11 Jul 2026 04:25:22 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20accessibility=20and?=
 =?UTF-8?q?=20interaction=20polish?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add focus-visible ring styles to core interactive components
- Reduce Tooltip delay to 200ms for snappier feel
- Update GitHub link to open in new tab with security attributes
- Record UX learnings in palette journal
---
 .jules/palette.md                    | 4 ++++
 app/components/CodeSnippet/index.tsx | 4 ++--
 app/components/Hero/index.tsx        | 4 +++-
 app/components/ThemeToggle/index.tsx | 4 ++--
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index f3f2b71..b6f11a8 100644
--- a/.jules/palette.md
+++ b/.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.
diff --git a/app/components/CodeSnippet/index.tsx b/app/components/CodeSnippet/index.tsx
index 6a2f937..80bb50b 100644
--- a/app/components/CodeSnippet/index.tsx
+++ b/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()}
diff --git a/app/components/Hero/index.tsx b/app/components/Hero/index.tsx
index bda558c..5b55a53 100644
--- a/app/components/Hero/index.tsx
+++ b/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
diff --git a/app/components/ThemeToggle/index.tsx b/app/components/ThemeToggle/index.tsx
index a7f0db2..ee25fd3 100644
--- a/app/components/ThemeToggle/index.tsx
+++ b/app/components/ThemeToggle/index.tsx
@@ -22,7 +22,7 @@ export function ThemeToggle() {
   , [mounted, targetTheme]);
 
   return (
-    <Tooltip delay={300} closeDelay={0}>
+    <Tooltip delay={200} closeDelay={0}>
       <Tooltip.Trigger
         render={(props: React.HTMLAttributes<Element>) => (
           <Button
@@ -30,7 +30,7 @@ export function ThemeToggle() {
             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);