From 4b3ea836bdf01c181183b19c591863ec017b6a7d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 6 Aug 2026 12:59:18 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20tooltips=20expl?=
 =?UTF-8?q?aining=20disabled=20button=20states?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wraps disabled primary action buttons in layout-preserving spans with `title` attributes to explain why they are disabled, improving accessibility and reducing user friction. Updates button classes to allow pointer events to pass through to the wrappers.

Co-authored-by: jspann21 <179991454+jspann21@users.noreply.github.com>
---
 .jules/palette.md                             |  3 ++
 .../library/components/MatchPreviewModal.tsx  | 39 +++++++++++--------
 .../components/UnresolvedFilesSection.tsx     | 19 +++++----
 verification/test.html                        | 19 +++++++++
 verification/verify.py                        | 20 ++++++++++
 5 files changed, 76 insertions(+), 24 deletions(-)
 create mode 100644 verification/test.html
 create mode 100644 verification/verify.py

diff --git a/.jules/palette.md b/.jules/palette.md
index e69de29..69ac6c5 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-24 - Safely Display Tooltips on Disabled Buttons
+**Learning:** Native HTML `title` tooltips and `cursor-not-allowed` styles are suppressed on `button` elements that have the native `disabled` attribute because disabled elements do not emit pointer events in most browsers.
+**Action:** When adding tooltips to disabled elements, wrap the element in a layout-preserving container (like `<span className="flex">` or `inline-flex`), apply the `title` and `cursor-not-allowed` logic to the wrapper, and use `disabled:pointer-events-none` on the inner button itself so pointer events pass through to the wrapper.
diff --git a/src/features/library/components/MatchPreviewModal.tsx b/src/features/library/components/MatchPreviewModal.tsx
index 78f0d0d..5f02bb4 100644
--- a/src/features/library/components/MatchPreviewModal.tsx
+++ b/src/features/library/components/MatchPreviewModal.tsx
@@ -246,24 +246,29 @@ export function MatchPreviewModal({ preview, onConfirm, onClose, onConfirmed }:
                         Cancel
                     </button>
                     {!noCandidates && (
-                        <button
-                            type="button"
-                            onClick={handleApprove}
-                            disabled={isApplying || !selected}
-                            className="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:opacity-50"
+                            <span
+                                className={cx('flex', (isApplying || !selected) && 'cursor-not-allowed')}
+                                title={!selected ? 'Select a candidate to approve' : isApplying ? 'Applying match...' : 'Approve Match'}
                         >
-                            {isApplying ? (
-                                <>
-                                    <Loader2 size={14} className="animate-spin" />
-                                    Applying...
-                                </>
-                            ) : (
-                                <>
-                                    <Check size={14} />
-                                    Approve Match
-                                </>
-                            )}
-                        </button>
+                                <button
+                                    type="button"
+                                    onClick={handleApprove}
+                                    disabled={isApplying || !selected}
+                                    className="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:pointer-events-none disabled:opacity-50"
+                                >
+                                    {isApplying ? (
+                                        <>
+                                            <Loader2 size={14} className="animate-spin" />
+                                            Applying...
+                                        </>
+                                    ) : (
+                                        <>
+                                            <Check size={14} />
+                                            Approve Match
+                                        </>
+                                    )}
+                                </button>
+                            </span>
                     )}
                 </div>
             </div>
diff --git a/src/features/library/components/UnresolvedFilesSection.tsx b/src/features/library/components/UnresolvedFilesSection.tsx
index 8f616e6..723a3ec 100644
--- a/src/features/library/components/UnresolvedFilesSection.tsx
+++ b/src/features/library/components/UnresolvedFilesSection.tsx
@@ -165,14 +165,19 @@ export function UnresolvedFilesSection({
                             </button>
                         ) : null}
                     </div>
-                    <button
-                        className="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:opacity-50"
-                        disabled={isAttemptMatchPending || isAttemptMatchAllPending || discoveredItems.length === 0}
-                        onClick={onAttemptMatchAll}
+                    <span
+                        className={cx('flex', (isAttemptMatchPending || isAttemptMatchAllPending || discoveredItems.length === 0) && 'cursor-not-allowed')}
+                        title={discoveredItems.length === 0 ? 'No unresolved files to match' : isAttemptMatchPending || isAttemptMatchAllPending ? 'Matching in progress...' : 'Match all unresolved files'}
                     >
-                        <RefreshCw size={14} className={cx(isAttemptMatchAllPending && 'animate-spin')} />
-                        {isAttemptMatchAllPending ? 'Matching All...' : 'Match All'}
-                    </button>
+                        <button
+                            className="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:pointer-events-none disabled:opacity-50"
+                            disabled={isAttemptMatchPending || isAttemptMatchAllPending || discoveredItems.length === 0}
+                            onClick={onAttemptMatchAll}
+                        >
+                            <RefreshCw size={14} className={cx(isAttemptMatchAllPending && 'animate-spin')} />
+                            {isAttemptMatchAllPending ? 'Matching All...' : 'Match All'}
+                        </button>
+                    </span>
                 </div>
             </div>
 
diff --git a/verification/test.html b/verification/test.html
new file mode 100644
index 0000000..a397ed3
--- /dev/null
+++ b/verification/test.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link href="http://localhost:1420/src/index.css" rel="stylesheet">
+</head>
+<body class="p-8 bg-slate-50 flex gap-4">
+    <span class="flex cursor-not-allowed" title="No unresolved files to match">
+        <button class="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:pointer-events-none disabled:opacity-50" disabled>
+            Match All
+        </button>
+    </span>
+    <span class="flex cursor-not-allowed" title="Select a candidate to approve">
+        <button class="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:pointer-events-none disabled:opacity-50" disabled>
+            Approve Match
+        </button>
+    </span>
+</body>
+</html>
diff --git a/verification/verify.py b/verification/verify.py
new file mode 100644
index 0000000..403a074
--- /dev/null
+++ b/verification/verify.py
@@ -0,0 +1,20 @@
+from playwright.sync_api import sync_playwright
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True)
+    page = browser.new_page()
+    page.goto("file:///app/verification/test.html")
+    page.wait_for_timeout(1000)
+    page.screenshot(path="/home/jules/verification/screenshot.png")
+
+    # Hover over Match All button wrapper
+    page.locator("span[title='No unresolved files to match']").hover(force=True)
+    page.wait_for_timeout(500)
+    page.screenshot(path="/home/jules/verification/match_all_hover.png")
+
+    # Hover over Approve Match button wrapper
+    page.locator("span[title='Select a candidate to approve']").hover(force=True)
+    page.wait_for_timeout(500)
+    page.screenshot(path="/home/jules/verification/approve_match_hover.png")
+
+    browser.close()