From 3bea83d5ea8b95da64710cc6cbbede0f4b3cb41c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 17 Dec 2025 09:10:25 +0000
Subject: [PATCH] feat: add aria-labels to hangar list buttons

- Adds descriptive `aria-label` attributes to Edit, Delete, and Add buttons in `HangarList.tsx`.
- Creates `.Jules/palette.md` to track accessibility patterns.
- Ensures icon-only buttons are accessible to screen readers.
---
 .Jules/palette.md         |  3 +++
 components/HangarList.tsx | 17 +++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..c559009
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-22 - Accessibility Pattern: Icon Buttons
+**Learning:** This application uses emojis and SVGs as icon-only buttons (e.g., in HangarList). These were previously inaccessible to screen readers as they lacked `aria-label` or accessible names.
+**Action:** When working on UI components, specifically check for emoji-based or SVG-based buttons and ensure they have descriptive `aria-label` attributes.
diff --git a/components/HangarList.tsx b/components/HangarList.tsx
index 14c9dc0..0d12393 100644
--- a/components/HangarList.tsx
+++ b/components/HangarList.tsx
@@ -62,8 +62,20 @@ export default function HangarList({
                       {plane.model}
                     </span>
                     <div className="flex gap-1">
-                      <button onClick={(e) => { e.stopPropagation(); onEdit(e, plane); }} className="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors">✏️</button>
-                      <button onClick={(e) => { e.stopPropagation(); onDelete(e, plane.id); }} className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors">🗑️</button>
+                      <button
+                        onClick={(e) => { e.stopPropagation(); onEdit(e, plane); }}
+                        className="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
+                        aria-label={`Edit ${plane.registration}`}
+                      >
+                        ✏️
+                      </button>
+                      <button
+                        onClick={(e) => { e.stopPropagation(); onDelete(e, plane.id); }}
+                        className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
+                        aria-label={`Delete ${plane.registration}`}
+                      >
+                        🗑️
+                      </button>
                     </div>
                   </div>
                   <h3 className="text-2xl font-black text-slate-900 dark:text-white tracking-tight">{plane.registration}</h3>
@@ -119,6 +131,7 @@ export default function HangarList({
                     onAddToFleet(template);
                   }}
                   title="Add to My Hangar"
+                  aria-label={`Add ${template.model} to My Hangar`}
                   className="w-8 h-8 flex items-center justify-center rounded-full bg-slate-50 dark:bg-slate-700 text-slate-400 hover:text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-all active:scale-95"
                 >
                   <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">