diff --git a/.jules/palette.md b/.jules/palette.md new file mode 100644 index 00000000..6969f290 --- /dev/null +++ b/.jules/palette.md @@ -0,0 +1,3 @@ +## 2023-10-24 - Added aria-hidden="true" to decorative icons +**Learning:** Decorative icons from libraries like lucide-react (such as `ChevronRight`, `ChevronLeft`, `ChevronUp`, `ChevronDown`, `X`, etc) used within focusable or interactive elements that already have text or an `aria-label` attribute can cause redundancy or confusion for screen readers if not explicitly hidden. +**Action:** When adding or auditing decorative icons in interactive components (especially `button` or `Link` elements), always ensure they are marked with `aria-hidden="true"` to prevent redundant screen reader announcements. diff --git a/packages/web/src/components/dashboard/event-detail.tsx b/packages/web/src/components/dashboard/event-detail.tsx index c6cc5cdf..0aebb7f8 100644 --- a/packages/web/src/components/dashboard/event-detail.tsx +++ b/packages/web/src/components/dashboard/event-detail.tsx @@ -121,7 +121,7 @@ export function EventDetail({ event, onClose }: EventDetailProps) { - +
{label}
@@ -141,7 +141,7 @@ export function EventDetail({ event, onClose }: EventDetailProps) { aria-label="Close event details" className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring" > - +
diff --git a/packages/web/src/components/dashboard/event-list.tsx b/packages/web/src/components/dashboard/event-list.tsx index a09d971a..7401d2dd 100644 --- a/packages/web/src/components/dashboard/event-list.tsx +++ b/packages/web/src/components/dashboard/event-list.tsx @@ -171,7 +171,7 @@ function RowView({ bg, )} > - +