🎨 Palette: Keyboard Accessible Tooltips

.jules/palette.md

@@ -1,3 +1,6 @@
 ## 2024-03-16 - Make hover-only actions keyboard accessible
 **Learning:** Actions hidden behind `opacity-0` and revealed with `group-hover:opacity-100` are completely inaccessible to keyboard-only users navigating via Tab. This is a common pattern for "secondary" actions like undo/delete buttons in lists.
 **Action:** When using `opacity-0 group-hover:opacity-100` to hide secondary actions, always pair it with `focus-visible:opacity-100`, `focus-visible:ring-2`, and `focus-visible:outline-none` to ensure the action becomes visible and clearly highlighted when focused via keyboard navigation.
+## 2024-04-02 - Keyboard Accessible Tooltips
+**Learning:** Tooltips that are only visible on hover using `group-hover:visible` and lack a focusable trigger completely exclude keyboard and screen reader users from accessing important contextual information.
+**Action:** When implementing Tailwind tooltips, wrap the icon in a focusable `<button type="button" className="peer focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none">` with an `aria-label`, use `aria-hidden="true"` on the icon, and apply `peer-hover:visible peer-focus:visible` on the tooltip container along with `role="tooltip"`.

frontend_v2/src/components/dashboard/DiskSpaceWidget.tsx

@@ -102,9 +102,15 @@ export default function DiskSpaceWidget() {
       <div className="flex items-center gap-2 mb-4">
         <HardDrive size={20} className="text-purple-400" />
         <h2 className="text-xl font-semibold text-white">Disk Space Protection</h2>
-        <div className="group relative ml-auto">
-          <Info size={16} className="text-white/40 hover:text-white/60 cursor-help transition-colors" />
-          <div className="invisible group-hover:visible absolute right-0 top-6 w-72 p-3 bg-black/90 backdrop-blur-xl border border-white/20 rounded-lg text-xs text-white/80 z-10 shadow-xl">
+        <div className="relative ml-auto flex items-center">
+          <button
+            type="button"
+            className="peer text-white/40 hover:text-white/60 transition-colors focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none rounded-full cursor-help"
+            aria-label="Disk space protection info"
+          >
+            <Info size={16} aria-hidden="true" />
+          </button>
+          <div role="tooltip" className="invisible peer-hover:visible peer-focus:visible absolute right-0 top-6 w-72 p-3 bg-black/90 backdrop-blur-xl border border-white/20 rounded-lg text-xs text-white/80 z-10 shadow-xl">
             Monitors disk space and prevents "disk full" crises. Automatically protects against space issues before they happen. ADHD-friendly: eliminates panic moments from sudden space issues.
           </div>
         </div>

frontend_v2/src/components/dashboard/MonitorStatusWidget.tsx

@@ -80,9 +80,15 @@ export default function MonitorStatusWidget() {
       <div className="flex items-center gap-2 mb-4">
         <Activity size={20} className={isActive ? 'text-success' : 'text-white/40'} />
         <h2 className="text-xl font-semibold text-white">Background Monitor</h2>
-        <div className="group relative ml-auto">
-          <Info size={16} className="text-white/40 hover:text-white/60 cursor-help transition-colors" />
-          <div className="invisible group-hover:visible absolute right-0 top-6 w-72 p-3 bg-black/90 backdrop-blur-xl border border-white/20 rounded-lg text-xs text-white/80 z-10 shadow-xl">
+        <div className="relative ml-auto flex items-center">
+          <button
+            type="button"
+            className="peer text-white/40 hover:text-white/60 transition-colors focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none rounded-full cursor-help"
+            aria-label="Background monitor info"
+          >
+            <Info size={16} aria-hidden="true" />
+          </button>
+          <div role="tooltip" className="invisible peer-hover:visible peer-focus:visible absolute right-0 top-6 w-72 p-3 bg-black/90 backdrop-blur-xl border border-white/20 rounded-lg text-xs text-white/80 z-10 shadow-xl">
             Watches your Downloads and Desktop folders for new files. Learns from your manual file movements (7-day cooldown rule applies). ADHD-friendly: works silently in the background without interruptions.
           </div>
         </div>

frontend_v2/src/components/settings/ConfidenceModeSwitcher.tsx

@@ -118,9 +118,15 @@ export default function ConfidenceModeSwitcher() {
       <div className="flex items-center gap-2 mb-4">
         <Sliders size={20} className="text-primary" />
         <h2 className="text-xl font-semibold text-white">Confidence Mode</h2>
-        <div className="group relative ml-auto">
-          <Info size={16} className="text-white/40 hover:text-white/60 cursor-help transition-colors" />
-          <div className="invisible group-hover:visible absolute right-0 top-6 w-72 p-3 bg-black/90 backdrop-blur-xl border border-white/20 rounded-lg text-xs text-white/80 z-10 shadow-xl">
+        <div className="relative ml-auto flex items-center">
+          <button
+            type="button"
+            className="peer text-white/40 hover:text-white/60 transition-colors focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none rounded-full cursor-help"
+            aria-label="Confidence mode info"
+          >
+            <Info size={16} aria-hidden="true" />
+          </button>
+          <div role="tooltip" className="invisible peer-hover:visible peer-focus:visible absolute right-0 top-6 w-72 p-3 bg-black/90 backdrop-blur-xl border border-white/20 rounded-lg text-xs text-white/80 z-10 shadow-xl">
             Controls how often the AI asks for your input during file organization. ADHD-friendly modes help reduce decision fatigue while maintaining accuracy.
           </div>
         </div>

frontend_v2/src/components/settings/RollbackPanel.tsx

@@ -143,9 +143,15 @@ export default function RollbackPanel() {
       <div className="flex items-center gap-2 mb-4">
         <RotateCcw size={20} className="text-warning" />
         <h2 className="text-xl font-semibold text-white">Rollback History</h2>
-        <div className="group relative ml-auto">
-          <Info size={16} className="text-white/40 hover:text-white/60 cursor-help transition-colors" />
-          <div className="invisible group-hover:visible absolute right-0 top-6 w-72 p-3 bg-black/90 backdrop-blur-xl border border-white/20 rounded-lg text-xs text-white/80 z-10 shadow-xl">
+        <div className="relative ml-auto flex items-center">
+          <button
+            type="button"
+            className="peer text-white/40 hover:text-white/60 transition-colors focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none rounded-full cursor-help"
+            aria-label="Rollback history info"
+          >
+            <Info size={16} aria-hidden="true" />
+          </button>
+          <div role="tooltip" className="invisible peer-hover:visible peer-focus:visible absolute right-0 top-6 w-72 p-3 bg-black/90 backdrop-blur-xl border border-white/20 rounded-lg text-xs text-white/80 z-10 shadow-xl">
             Complete safety net for all file operations. Every move, rename, or deletion can be undone. ADHD-friendly: eliminates anxiety about making mistakes.
           </div>
         </div>