🎨 Palette: CopyPromptButton 접근성 개선

.Jules/palette.md

@@ -9,3 +9,8 @@
 ## 2024-11-20 - CopyPromptButton 접근성 향상 (동적 텍스트 및 상태)
 **Learning:** `CopyPromptButton`과 같이 버튼을 클릭했을 때 시각적으로만 상태가 변하고(예: 복사 아이콘이 체크 아이콘으로 변경), 텍스트가 동적으로 변경되는 컴포넌트에서는 스크린 리더 사용자가 상태 변화를 알아채기 어렵습니다. 또한 스크린 리더가 순수 장식용 아이콘까지 불필요하게 읽을 수 있습니다.
 **Action:** 동적으로 변경되는 텍스트를 `<span aria-live="polite">`로 감싸 스크린 리더가 즉시 변경 사항을 읽어주도록 해야 합니다. `<Button>` 컴포넌트에는 `aria-pressed={copied}`를 추가하여 토글 성격을 부여하고, 시각적인 아이콘 컴포넌트(예: `<Copy>`, `<Check>`)에는 `aria-hidden="true"`를 추가하여 스크린 리더에서 무시하도록 처리하는 패턴을 지속적으로 사용해야 합니다.
+
+
+## 2024-11-21 - 대화형 요소의 접근성 상태 변경 (Accessible State Changes on Interactive Elements)
+**Learning:** 상호작용 요소(예: 클릭 시 '복사'에서 '복사됨'으로 텍스트가 변경되는 버튼)에서 시각적 성공 피드백을 제공할 때, 현재 포커스된 버튼의 접근성 이름(accessible name)을 변경하는 것은 스크린 리더 사용자에게 신뢰할 수 없는 경험을 제공합니다. 상태 변경이 제대로 읽히지 않거나 전혀 읽히지 않을 수 있습니다.
+**Action:** 동작의 시각적 및 접근성 레이블을 안정적으로 유지해야 합니다(예: `aria-label`을 사용하거나 메인 텍스트를 동일하게 유지). 화면을 시각적으로 숨긴(`sr-only`) 별도의 형제 컨테이너에 `role="status"` 및 `aria-atomic="true"`를 사용하여 상태 업데이트를 스크린 리더에 명확하게 알리는 패턴을 적용해야 합니다.

.jules/sentinel.md

@@ -30,3 +30,8 @@
 **Vulnerability:** Known high-severity vulnerabilities discovered by the audit in `js-yaml` and `nanoid` packages.
 **Learning:** Deeply nested dependencies (`js-yaml` via `eslint`, `nanoid` via `vitest/vite`) may expose the application to DoS or logic loops.
 **Prevention:** Use `pnpm.overrides` in the root `package.json` to enforce patched versions across all transitive paths in a pnpm workspace.
+
+## 2024-11-21 - deepmerge-ts ReDoS Vulnerability
+**Vulnerability:** deepmerge-ts@7.1.5 was vulnerable to ReDoS (Regular Expression Denial of Service) through GHSA-ggr8-5vv4-36mx.
+**Learning:** This vulnerability existed in deeply nested dependency trees and was flagged by the strict OSV-Scanner checks in CI.
+**Prevention:** Always ensure vulnerabilities in deeply nested dependencies (like deepmerge-ts) are enforced to the patched versions using the `pnpm.overrides` block in the root `package.json` to safely patch them and pass CI checks.

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,15 @@ describe('CopyPromptButton', () => {
     const button = screen.getByRole('button');
     expect(button).toBeDefined();
     expect(button.getAttribute('aria-pressed')).toBe('false');
-    expect(screen.getByText('프롬프트 복사')).toBeDefined();
+    expect(button.getAttribute('aria-label')).toBe('프롬프트 복사');
+    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 +62,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 +72,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

@@ -38,12 +38,16 @@ export function CopyPromptButton({
       variant="outline"
       onClick={handleCopy}
       aria-pressed={copied}
+      aria-label={label}
       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 role="status" aria-atomic="true" className="sr-only">
+        {copied ? copiedLabel : ""}
+      </span>
     </Button>
   );
 }