🎨 Palette: [UX improvement] CopyPromptButton 접근성 개선

.Jules/palette.md

@@ -9,3 +9,7 @@
 ## 2024-11-20 - CopyPromptButton 접근성 향상 (동적 텍스트 및 상태)
 **Learning:** `CopyPromptButton`과 같이 버튼을 클릭했을 때 시각적으로만 상태가 변하고(예: 복사 아이콘이 체크 아이콘으로 변경), 텍스트가 동적으로 변경되는 컴포넌트에서는 스크린 리더 사용자가 상태 변화를 알아채기 어렵습니다. 또한 스크린 리더가 순수 장식용 아이콘까지 불필요하게 읽을 수 있습니다.
 **Action:** 동적으로 변경되는 텍스트를 `<span aria-live="polite">`로 감싸 스크린 리더가 즉시 변경 사항을 읽어주도록 해야 합니다. `<Button>` 컴포넌트에는 `aria-pressed={copied}`를 추가하여 토글 성격을 부여하고, 시각적인 아이콘 컴포넌트(예: `<Copy>`, `<Check>`)에는 `aria-hidden="true"`를 추가하여 스크린 리더에서 무시하도록 처리하는 패턴을 지속적으로 사용해야 합니다.
+
+## 2024-11-20 - CopyPromptButton 접근성 향상 (스크린 리더 상태 발표 최적화)
+**Learning:** 포커스된 버튼의 텍스트가 시각적으로 변경될 때, `aria-live` 속성을 직접 사용하여 접근성 이름을 변경하면 스크린 리더에서 이중으로 읽어주거나 일관성 없는 동작이 발생할 수 있습니다.
+**Action:** 시각적 텍스트와 스크린 리더용 텍스트를 분리해야 합니다. 시각적 텍스트는 `aria-hidden="true"`로 숨기고, 스크린 리더용 안내 텍스트는 별도의 형제 요소로 `role="status"` 와 `aria-atomic="true"`를 가지며 `sr-only` (시각적 숨김) 클래스를 적용하여 추가해야 합니다.

package.json

@@ -34,7 +34,8 @@
       "undici": "^7.29.0",
       "minimatch": "^10.0.0",
       "@hono/node-server": "^2.0.5",
-      "body-parser": "^2.3.0"
+      "body-parser": "^2.3.0",
+      "deepmerge-ts": "^8.0.0"
     }
   }
 }

packages/web/src/components/copy-prompt-button.test.tsx

@@ -38,14 +38,14 @@ describe('CopyPromptButton', () => {
     const button = screen.getByRole('button');
     expect(button).toBeDefined();
     expect(button.getAttribute('aria-pressed')).toBe('false');
-    expect(screen.getByText('프롬프트 복사')).toBeDefined();
+    expect(screen.getAllByText('프롬프트 복사')[0]).toBeDefined();
     expect(screen.getByTestId('copy-icon')).toBeDefined();
   });
 
   it('renders correctly with custom labels', () => {
     render(<CopyPromptButton text="test prompt" label="Copy" copiedLabel="Copied" />);
 
-    expect(screen.getByText('Copy')).toBeDefined();
+    expect(screen.getAllByText('Copy')[0]).toBeDefined();
   });
 
   it('copies text and shows copied state temporarily', async () => {
@@ -61,7 +61,7 @@ describe('CopyPromptButton', () => {
 
     // Check copied state
     expect(button.getAttribute('aria-pressed')).toBe('true');
-    expect(screen.getByText('Copied')).toBeDefined();
+    expect(screen.getAllByText('Copied')[0]).toBeDefined();
     expect(screen.getByTestId('check-icon')).toBeDefined();
 
     // Fast-forward timer
@@ -71,7 +71,7 @@ describe('CopyPromptButton', () => {
 
     // Check reverted state
     expect(button.getAttribute('aria-pressed')).toBe('false');
-    expect(screen.getByText('Copy')).toBeDefined();
+    expect(screen.getAllByText('Copy')[0]).toBeDefined();
     expect(screen.getByTestId('copy-icon')).toBeDefined();
   });
 

packages/web/src/components/copy-prompt-button.tsx

@@ -41,7 +41,10 @@ export function CopyPromptButton({
       className={cn("gap-1.5", className)}
     >
       {copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
-      <span aria-live="polite">
+      <span aria-hidden="true">
+        {copied ? copiedLabel : label}
+      </span>
+      <span className="sr-only" role="status" aria-atomic="true">
         {copied ? copiedLabel : label}
       </span>
     </Button>