🎨 Palette: Add aria-hidden to decorative icons for screen readers

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

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>
   );

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

@@ -181,14 +181,15 @@ 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}
       </span>
       <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",

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>

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>

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>
         )}