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" >