From 86569b52302971dc0684acd2b0fefdd1d864f521 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 10 Oct 2026 20:57:46 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=EC=97=90=20aria-hidden=20=EC=86=8D=EC=84=B1=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 불필요한 스크린 리더 음성 출력을 방지하기 위해 장식용 아이콘에 `aria-hidden="true"` 속성을 추가함
- `packages/web/src/components/ui/pagination.tsx` (ChevronLeftIcon, ChevronRightIcon)
- `packages/web/src/components/dashboard/reports/week-navigator.tsx` (ChevronLeft, ChevronRight)
- `packages/web/src/components/dashboard/reports/context-section.tsx` (ChevronUp, ChevronDown)
- `packages/web/src/components/dashboard/event-detail.tsx` (X, Icon)
- `packages/web/src/components/dashboard/event-list.tsx` (Icon, ChevronRight)
---
 .jules/palette.md                                             | 3 +++
 packages/web/src/components/dashboard/event-detail.tsx        | 4 ++--
 packages/web/src/components/dashboard/event-list.tsx          | 3 ++-
 .../web/src/components/dashboard/reports/context-section.tsx  | 4 ++--
 .../web/src/components/dashboard/reports/week-navigator.tsx   | 4 ++--
 packages/web/src/components/ui/pagination.tsx                 | 4 ++--
 6 files changed, 13 insertions(+), 9 deletions(-)
 create mode 100644 .jules/palette.md

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) {
           <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>
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,
         )}
       >
-        <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>
diff --git a/packages/web/src/components/dashboard/reports/context-section.tsx b/packages/web/src/components/dashboard/reports/context-section.tsx
index 855345bd..e0341ac3 100644
--- a/packages/web/src/components/dashboard/reports/context-section.tsx
+++ b/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 && (
diff --git a/packages/web/src/components/dashboard/reports/week-navigator.tsx b/packages/web/src/components/dashboard/reports/week-navigator.tsx
index fcf398a6..5fa9e0ce 100644
--- a/packages/web/src/components/dashboard/reports/week-navigator.tsx
+++ b/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>
   )
diff --git a/packages/web/src/components/ui/pagination.tsx b/packages/web/src/components/ui/pagination.tsx
index e376f313..f46dac77 100644
--- a/packages/web/src/components/ui/pagination.tsx
+++ b/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>
         )}