From 191e287de731a0e86d2cd9c7cd2e92855ed9f8b2 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 16 Jul 2026 20:19:57 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20aria-hidden=20t?=
 =?UTF-8?q?o=20decorative=20icons=20for=20screen=20readers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .Jules/palette.md                                             | 4 ++++
 packages/web/src/components/copy-prompt-button.tsx            | 2 +-
 packages/web/src/components/dashboard/event-list.tsx          | 3 ++-
 .../web/src/components/dashboard/no-organization-state.tsx    | 2 +-
 packages/web/src/components/layout/org-switcher.tsx           | 2 +-
 packages/web/src/components/ui/pagination.tsx                 | 4 ++--
 6 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 701f22eb..85e4679d 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -5,3 +5,7 @@
 ## 2024-07-10 - 접을 수 있는 영역(Collapsible Region) 접근성 개선
 **Learning:** `ContextSection` 컴포넌트와 같이 아코디언 형태의 접을 수 있는 영역은 스크린 리더가 컨텐츠의 상태를 올바르게 인식하고 읽어주기 위해 토글 버튼과 컨텐츠 컨테이너 간의 명확한 ARIA 연결이 필요합니다. React의 `useId()` 훅을 사용하여 `aria-controls`, `id`, `aria-labelledby`를 동적으로 생성해 서로 연결하면 안정적입니다. 또한, 컨텐츠 영역에는 `role="region"`이 반드시 필요하다는 점을 확인했습니다.
 **Action:** 향후 접을 수 있는 컴포넌트(Collapsible Region)를 만들거나 수정할 때는 항상 `useId()`를 사용하여 토글 버튼(`aria-controls`)과 컨텐츠 컨테이너(`id`, `role="region"`, `aria-labelledby`)를 동적으로 연결하도록 합니다. 추가로 키보드 네비게이션 사용자를 위한 명확한 포커스 링(`focus-visible` 관련 클래스 적용) 처리도 잊지 말아야 합니다.
+
+## 2025-03-08 - Add aria-hidden to decorative icons for screen readers
+**Learning:** Screen readers often announce the name of icons inside interactive elements like buttons, creating unnecessary noise when the button already has text or an aria-label. Adding `aria-hidden="true"` to Lucide icons (e.g., `Check`, `Copy`, `ChevronRight`, `ChevronLeftIcon`, `PlusIcon`) inside elements with text ensures a cleaner experience for users relying on assistive technologies.
+**Action:** Always add `aria-hidden="true"` to decorative icons inside interactive components.
diff --git a/packages/web/src/components/copy-prompt-button.tsx b/packages/web/src/components/copy-prompt-button.tsx
index 046e7fac..9f1893fa 100644
--- a/packages/web/src/components/copy-prompt-button.tsx
+++ b/packages/web/src/components/copy-prompt-button.tsx
@@ -39,7 +39,7 @@ export function CopyPromptButton({
       onClick={handleCopy}
       className={cn("gap-1.5", className)}
     >
-      {copied ? <Check /> : <Copy />}
+      {copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
       {copied ? copiedLabel : label}
     </Button>
   );
diff --git a/packages/web/src/components/dashboard/event-list.tsx b/packages/web/src/components/dashboard/event-list.tsx
index a3e4406c..3b3bac44 100644
--- a/packages/web/src/components/dashboard/event-list.tsx
+++ b/packages/web/src/components/dashboard/event-list.tsx
@@ -181,7 +181,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}
@@ -189,6 +189,7 @@ function RowView({
       <span className="flex-1 min-w-0 flex items-center gap-1 text-sm text-muted-foreground">
         {chevron !== undefined && (
           <ChevronRight
+            aria-hidden="true"
             className={cn(
               "h-3 w-3 shrink-0 transition-transform",
               chevron === "expanded" && "rotate-90",
diff --git a/packages/web/src/components/dashboard/no-organization-state.tsx b/packages/web/src/components/dashboard/no-organization-state.tsx
index 95cd41dd..8f4480cb 100644
--- a/packages/web/src/components/dashboard/no-organization-state.tsx
+++ b/packages/web/src/components/dashboard/no-organization-state.tsx
@@ -85,7 +85,7 @@ export function NoOrganizationState({
             CLI 없이 먼저 조직만 만들고 싶다면?
           </div>
           <Button size="sm" variant="outline" onClick={() => setCreateOpen(true)}>
-            <PlusIcon />
+            <PlusIcon aria-hidden="true" />
             조직 수동 생성
           </Button>
         </div>
diff --git a/packages/web/src/components/layout/org-switcher.tsx b/packages/web/src/components/layout/org-switcher.tsx
index 9f009abe..da2e99f6 100644
--- a/packages/web/src/components/layout/org-switcher.tsx
+++ b/packages/web/src/components/layout/org-switcher.tsx
@@ -128,7 +128,7 @@ export function OrgSwitcher({
             className="gap-2.5 rounded-md px-2 py-1.5 pr-8 text-muted-foreground"
           >
             <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
-              <PlusIcon className="size-3.5" />
+              <PlusIcon className="size-3.5" aria-hidden="true" />
             </span>
             <span className="truncate text-sm">Create organization</span>
           </SelectItem>
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>
         )}