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}
-
-
+
+
{plane.registration}
@@ -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"
>