From 581a20b37e14bc17cc5848dc645d93d147df969a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 17 May 2026 16:51:59 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[a11y]=20Use=20aria-d?=
 =?UTF-8?q?isabled=20for=20Watchlist=20Add=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced native `disabled` attribute with `aria-disabled` on the Add button in `WatchlistManager` to maintain keyboard focus and swallow pointer events less often.
- Updated styling to use `aria-disabled:` Tailwind variants.
- Added dynamic `title` and `aria-label` attributes to explicitly inform screen-reader and visual hover users why the button might be unavailable (e.g. requires a 6-character hex code).
- Re-routed action checks to the `onClick` handler.

Co-authored-by: d3mocide <136547209+d3mocide@users.noreply.github.com>
---
 .jules/palette.md                                    |  4 ++++
 frontend/src/components/widgets/WatchlistManager.tsx | 11 +++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 3dce5527..7c02b817 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -105,3 +105,7 @@
 ## 2025-04-24 - Interactive Element Keyboard Accessibility
 **Learning:** Found multiple interactive `<button>` elements in user-facing components (`UserManagementPanel`, `UserMenuWidget`) that lacked keyboard focus indicators. This makes navigation via keyboard difficult for users relying on alternative inputs.
 **Action:** When creating or maintaining new buttons, always append `focus-visible:ring-1 focus-visible:ring-[color] outline-none` to ensure standard keyboard accessibility across the UI.
+
+## 2026-05-17 - Accessible Disabled Buttons
+**Learning:** Using the native HTML `disabled` attribute on buttons (e.g. 'Add to Watchlist') often causes them to be removed from the tab order and swallow pointer events in certain browsers. This prevents keyboard users from focusing them and prevents visual users from seeing dynamic tooltips explaining *why* the button is disabled.
+**Action:** For complex UI actions where the user needs to know why an action is unavailable, use `aria-disabled="true"` combined with visual styling (e.g. Tailwind's `aria-disabled:opacity-30`) and ensure dynamic `title` and `aria-label` attributes explain the missing requirements.
diff --git a/frontend/src/components/widgets/WatchlistManager.tsx b/frontend/src/components/widgets/WatchlistManager.tsx
index 7ab4434a..a6972407 100644
--- a/frontend/src/components/widgets/WatchlistManager.tsx
+++ b/frontend/src/components/widgets/WatchlistManager.tsx
@@ -64,10 +64,13 @@ export const WatchlistManager: React.FC<WatchlistManagerProps> = ({
             className="flex-1 bg-black/50 border border-white/10 rounded px-2 py-1 text-[10px] font-mono text-white placeholder-white/20 focus:outline-none focus:border-hud-green/50 focus:ring-1 focus:ring-hud-green/50 uppercase"
           />
           <button
-            onClick={addEntry}
-            disabled={newIcao24.length !== 6 || addLoading}
-            className="flex items-center gap-1 px-2.5 py-1 rounded bg-hud-green/10 border border-hud-green/30 text-hud-green hover:bg-hud-green/20 disabled:opacity-30 disabled:hover:bg-hud-green/10 transition-colors focus-visible:ring-1 focus-visible:ring-hud-green outline-none"
-            title="Add to watchlist (permanent)"
+            onClick={() => {
+              if (newIcao24.length === 6 && !addLoading) addEntry();
+            }}
+            aria-disabled={newIcao24.length !== 6 || addLoading}
+            className="flex items-center gap-1 px-2.5 py-1 rounded bg-hud-green/10 border border-hud-green/30 text-hud-green hover:bg-hud-green/20 aria-disabled:opacity-30 aria-disabled:hover:bg-hud-green/10 aria-disabled:cursor-not-allowed transition-colors focus-visible:ring-1 focus-visible:ring-hud-green outline-none"
+            title={addLoading ? "Adding to watchlist..." : newIcao24.length !== 6 ? "Requires 6-character hex code" : "Add to watchlist (permanent)"}
+            aria-label={addLoading ? "Adding to watchlist" : newIcao24.length !== 6 ? "Requires 6-character hex code to add" : "Add to watchlist"}
           >
             {addLoading ? (
               <Loader2 size={11} className="animate-spin" />