diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..3bba281 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-05-18 - Missing ARIA Labels on Icon-Only Buttons +**Learning:** Found a recurring accessibility pattern in the app's components, particularly in `ChatInterface` and potentially other room/dashboard components, where `Button` elements with `size="icon"` lack `aria-label` attributes. This makes them invisible or confusing to screen reader users. +**Action:** When creating or reviewing icon-only buttons (especially those used for actions like edit, delete, attach, emoji, gift, go back), always ensure a descriptive `aria-label` is included. This pattern should be checked across the entire app, especially in action-heavy interfaces like chat and room settings. \ No newline at end of file diff --git a/src/app/dashboard/messages/chat-interface.tsx b/src/app/dashboard/messages/chat-interface.tsx index 9e0dca8..eea0650 100644 --- a/src/app/dashboard/messages/chat-interface.tsx +++ b/src/app/dashboard/messages/chat-interface.tsx @@ -232,6 +232,7 @@ export function ChatInterface({ - @@ -400,7 +401,7 @@ export function ChatInterface({
-
@@ -415,10 +416,10 @@ export function ChatInterface({
- -