🎨 Palette: 장식용 아이콘에 aria-hidden 추가

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

packages/web/src/components/dashboard/event-detail.tsx

@@ -121,7 +121,7 @@ export function EventDetail({ event, onClose }: EventDetailProps) {
           <span
             className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full ${bg}`}
           >
-            <Icon className="h-3.5 w-3.5 text-background" />
+            <Icon className="h-3.5 w-3.5 text-background" aria-hidden="true" />
           </span>
           <div className="min-w-0">
             <div className="text-sm font-medium truncate">{label}</div>
@@ -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"
             >
-              <X className="h-4 w-4" />
+              <X className="h-4 w-4" aria-hidden="true" />
             </button>
           )}
         </div>

packages/web/src/components/dashboard/event-list.tsx

@@ -171,7 +171,7 @@ function RowView({
           bg,
         )}
       >
-        <Icon className="h-3 w-3 text-background" />
+        <Icon className="h-3 w-3 text-background" aria-hidden="true" />
       </span>
       <span className="w-20 shrink-0 text-sm font-medium truncate">
         {label}
@@ -183,6 +183,7 @@ function RowView({
               "h-3 w-3 shrink-0 transition-transform",
               chevron === "expanded" && "rotate-90",
             )}
+            aria-hidden="true"
           />
         )}
         <span className="truncate">{preview}</span>

packages/web/src/components/dashboard/reports/context-section.tsx

@@ -31,9 +31,9 @@ export function ContextSection({ title, children, defaultOpen = false }: Context
       >
         <h2 className="text-base font-medium">{title}</h2>
         {open ? (
-          <ChevronUp className="h-4 w-4 text-muted-foreground" />
+          <ChevronUp className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
         ) : (
-          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+          <ChevronDown className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
         )}
       </button>
       {open && (

packages/web/src/components/dashboard/reports/week-navigator.tsx

@@ -54,7 +54,7 @@ export function WeekNavigator({ currentIsoKey, label, isCurrent }: WeekNavigator
         aria-label="이전 주"
         className={cn(buttonVariants({ variant: 'outline', size: 'icon-sm' }))}
       >
-        <ChevronLeft className="h-4 w-4" />
+        <ChevronLeft className="h-4 w-4" aria-hidden="true" />
       </Link>
       <div className="flex items-center gap-2 px-3 py-1.5 rounded-md bg-muted">
         <span className="text-sm font-medium tabular-nums">{label}</span>
@@ -69,7 +69,7 @@ export function WeekNavigator({ currentIsoKey, label, isCurrent }: WeekNavigator
         aria-label="다음 주"
         className={cn(buttonVariants({ variant: 'outline', size: 'icon-sm' }))}
       >
-        <ChevronRight className="h-4 w-4" />
+        <ChevronRight className="h-4 w-4" aria-hidden="true" />
       </Link>
     </div>
   )

packages/web/src/components/ui/pagination.tsx

@@ -116,7 +116,7 @@ export function Pagination({
               disabled={safePage <= 1}
               aria-label="이전 페이지"
             >
-              <ChevronLeftIcon />
+              <ChevronLeftIcon aria-hidden="true" />
             </Button>
 
             {/* 모바일: 현재 페이지 / 전체만 표시 */}
@@ -156,7 +156,7 @@ export function Pagination({
               disabled={safePage >= totalPages}
               aria-label="다음 페이지"
             >
-              <ChevronRightIcon />
+              <ChevronRightIcon aria-hidden="true" />
             </Button>
           </div>
         )}