From 29391d84faac4455a6f80f292b808b602f15bf09 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 12 May 2026 17:49:49 +0000
Subject: [PATCH] Palette: Fix NWSAlertsWidget dropdown accessibility

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

diff --git a/.jules/palette.md b/.jules/palette.md
index 3dce5527..31685ecf 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.
+
+## 2024-05-18 - Missing Focus States and ARIA Expansion Logic on NWS Alerts Dropdown
+**Learning:** The NWS Alerts Widget had a custom dropdown button that toggled the display of weather alerts. While it functioned correctly with mouse clicks, it missed two crucial accessibility features: `aria-expanded` was not bound to the `expanded` state, meaning screen readers couldn't announce its toggle state, and it lacked the standard `focus-visible` ring utility classes, rendering it invisible to keyboard navigators when tabbed to.
+**Action:** Always ensure custom dropdown or toggle buttons have `aria-expanded` and `aria-controls` explicitly set, and include keyboard focus indicators (`focus-visible:ring-1 focus-visible:ring-[color] outline-none`) that match the surrounding UI components.
diff --git a/frontend/src/components/widgets/NWSAlertsWidget.tsx b/frontend/src/components/widgets/NWSAlertsWidget.tsx
index fb20a34a..25a77e5f 100644
--- a/frontend/src/components/widgets/NWSAlertsWidget.tsx
+++ b/frontend/src/components/widgets/NWSAlertsWidget.tsx
@@ -158,7 +158,10 @@ export function NWSAlertsWidget({ nwsAlerts, mission, onEvent, visible = true }:
       {/* ── Header ── */}
       <button
         onClick={() => setExpanded((v) => !v)}
-        className={`flex items-center justify-between p-2.5 backdrop-blur-md text-left w-full border ${
+        aria-expanded={expanded}
+        aria-controls="nws-alerts-content"
+        aria-label="Toggle NWS Alerts"
+        className={`flex items-center justify-between p-2.5 backdrop-blur-md text-left w-full border focus-visible:ring-1 focus-visible:ring-amber-400 outline-none ${
           expanded ? "rounded-t-sm border-b-0" : "rounded-sm"
         }`}
         style={{
@@ -210,6 +213,7 @@ export function NWSAlertsWidget({ nwsAlerts, mission, onEvent, visible = true }:
       {/* ── Body ── */}
       {expanded && (
         <div
+          id="nws-alerts-content"
           className="border border-t-0 bg-black/50 backdrop-blur-md rounded-b-sm"
           style={{ borderColor: `${headerColor}25` }}
         >