From 5e6c31e166eae652ef88031fc26754e5fb52500b Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 22 Aug 2026 21:45:53 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement?=
 =?UTF-8?q?]=20CopyPromptButton=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
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.test.tsx | 8 ++++----
 packages/web/src/components/copy-prompt-button.tsx      | 5 ++++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 104c1e4b..ab320e18 100644
--- a/.Jules/palette.md
+++ b/.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` (시각적 숨김) 클래스를 적용하여 추가해야 합니다.
diff --git a/packages/web/src/components/copy-prompt-button.test.tsx b/packages/web/src/components/copy-prompt-button.test.tsx
index 40b8559a..81cf8d5b 100644
--- a/packages/web/src/components/copy-prompt-button.test.tsx
+++ b/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();
   });
 
diff --git a/packages/web/src/components/copy-prompt-button.tsx b/packages/web/src/components/copy-prompt-button.tsx
index ea62c82d..b44eae8a 100644
--- a/packages/web/src/components/copy-prompt-button.tsx
+++ b/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>

From 69f557ef87bcd2e873b144a82cc853814430e3cf Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 22 Aug 2026 21:54:23 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement?=
 =?UTF-8?q?]=20CopyPromptButton=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=20=EB=B0=8F=20=EC=9D=98=EC=A1=B4=EC=84=B1=20=EB=B3=B4?=
 =?UTF-8?q?=EC=95=88=20=EC=B7=A8=EC=95=BD=EC=A0=90=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json   |  3 ++-
 pnpm-lock.yaml | 11 ++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index d085ba62..2b201548 100644
--- a/package.json
+++ b/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"
     }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6dfd315f..1a2a44b7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,7 @@ overrides:
   minimatch: ^10.0.0
   '@hono/node-server': ^2.0.5
   body-parser: ^2.3.0
+  deepmerge-ts: ^8.0.0
 
 pnpmfileChecksum: qsp27c6veblwg3gxusbbzrumtm
 
@@ -2278,9 +2279,9 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  deepmerge-ts@7.1.5:
-    resolution: {integrity: sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw==}
-    engines: {node: '>=16.0.0'}
+  deepmerge-ts@8.0.2:
+    resolution: {integrity: sha512-uqbvqLUMrc6p0MO+WBRtTxY55hmyh94WRwI5a++PZe54X+bfVh59FSN7uWCBCW1CCVjzjnrwzfI8zidE2obMMw==}
+    engines: {node: '>=16.9.0'}
 
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
@@ -5659,7 +5660,7 @@ snapshots:
   '@prisma/config@6.19.3(magicast@0.3.5)':
     dependencies:
       c12: 3.1.0(magicast@0.3.5)
-      deepmerge-ts: 7.1.5
+      deepmerge-ts: 8.0.2
       effect: 3.21.0
       empathic: 2.0.0
     transitivePeerDependencies:
@@ -6660,7 +6661,7 @@ snapshots:
 
   deep-is@0.1.4: {}
 
-  deepmerge-ts@7.1.5: {}
+  deepmerge-ts@8.0.2: {}
 
   deepmerge@4.3.1: {}