From 458f5241aad09ad33aadc121bf9435dcb1b7ae06 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sun, 5 Jul 2026 04:14:04 +0000 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EB=B9=84=ED=99=9C=EC=84=B1?= =?UTF-8?q?=ED=99=94=EB=90=9C=20=EB=B2=84=ED=8A=BC=20=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=ED=88=B4=ED=8C=81?= =?UTF-8?q?=20=ED=91=9C=EC=8B=9C=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `App.tsx`와 `Workspace.tsx`의 비활성화된 버튼을 aria-disabled로 수정 - HTML disabled 속성 대신 onClick에서 event.preventDefault()를 활용하여 포커스 및 스크린 리더 접근성 보장 - 중첩된 대화형 요소(span 안에 button 등)를 제거하고 직접 버튼 요소를 사용해 접근성 표준 준수 - 비활성화 상태에서 pointer-events-none을 제거하여 마우스 오버 시 title 속성에 기반한 시각적 툴팁이 제대로 작동하도록 수정 - 관련 App.test.tsx 테스트의 어설션을 getByTitle이 아닌 aria-disabled와 DOM 요소 태그를 통해 올바르게 접근성을 테스트하도록 업데이트 --- apps/desktop/src/App.test.tsx | 10 +- apps/desktop/src/App.tsx | 140 +++++++++++------- .../src/features/workspace/Workspace.tsx | 63 +++++--- 3 files changed, 133 insertions(+), 80 deletions(-) diff --git a/apps/desktop/src/App.test.tsx b/apps/desktop/src/App.test.tsx index c039dfba..01077051 100644 --- a/apps/desktop/src/App.test.tsx +++ b/apps/desktop/src/App.test.tsx @@ -203,8 +203,8 @@ describe("App", () => { expect(screen.getByText(/SYNCED • LOCAL/i)).toBeTruthy(); expect(screen.getByText(/Turn a song into a practical rehearsal view\./i)).toBeTruthy(); expect(screen.getByRole("button", { name: /^Workspace$/i })).toBeTruthy(); - expect(screen.getByRole("button", { name: /^Import$/i })).toBeTruthy(); - expect(screen.getByRole("button", { name: /^Export$/i })).toBeTruthy(); + expect(screen.getAllByTitle("Coming soon").length).toBeGreaterThan(0); + expect(screen.getByText(/^Tempo$/i)).toBeTruthy(); expect(screen.getByText(/^Key$/i)).toBeTruthy(); expect(screen.getByText(/Local-first/i)).toBeTruthy(); @@ -1427,10 +1427,10 @@ describe("App", () => { }); - it("renders disabled Settings and Help buttons as focusable spans for accessibility", () => { + it("renders disabled Settings and Help buttons using aria-disabled for accessibility", () => { render(); const settingsSpan = screen.getByTitle("Settings coming soon"); - expect(settingsSpan).toHaveAttribute("tabIndex", "0"); - expect(settingsSpan).toHaveAttribute("role", "button"); + expect(settingsSpan).toHaveAttribute("aria-disabled", "true"); + expect(settingsSpan.tagName).toBe("BUTTON"); }); }); diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx index 24f5fb09..236f3742 100644 --- a/apps/desktop/src/App.tsx +++ b/apps/desktop/src/App.tsx @@ -492,24 +492,32 @@ export function App() {
@@ -535,41 +543,60 @@ export function App() {
- + - - + +
@@ -646,17 +673,18 @@ export function App() { Save Project ) : ( - - - + )} - - - - - - - + + + {canTranscribeBass ? ( - + )}
From 61a42cd194767f1dc7e23dee2061f1b784231ed0 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sun, 5 Jul 2026 04:48:14 +0000 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EB=B9=84=ED=99=9C=EC=84=B1?= =?UTF-8?q?=ED=99=94=EB=90=9C=20=EB=B2=84=ED=8A=BC=EC=9D=98=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=B0=20=EB=A6=AC=EB=8D=94=20=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=EC=8B=9C=EA=B0=81=EC=A0=81=20=ED=88=B4?= =?UTF-8?q?=ED=8C=81=20=ED=91=9C=EC=8B=9C=20=EB=AC=B8=EC=A0=9C=20=EC=99=84?= =?UTF-8?q?=EC=A0=84=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `App.tsx`와 `Workspace.tsx`의 비활성화된 버튼을 aria-disabled로 완전 전환 (네이티브 disabled 속성 제거) - 안티 패턴이었던 툴팁용 focusable wrapper span 제거 - 스크린 리더가 요소의 접근성 이름을 손상 없이 읽을 수 있도록 sr-only 관련 중복 정리 - App.test.tsx에서 바뀐 DOM 구조와 접근성 속성(aria-disabled)을 기반으로 제대로 테스트하도록 검증 코드 보완 - pointer-events-none을 해제하여 title 기반 시각적 툴팁과 키보드 포커싱을 정상화하고, 이에 맞춰 비활성 스타일(opacity-50 및 기타 Tailwind 유틸리티 클래스) 재적용 --- apps/desktop/src/App.tsx | 1 - apps/desktop/src/features/workspace/Workspace.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx index 236f3742..be9fcef6 100644 --- a/apps/desktop/src/App.tsx +++ b/apps/desktop/src/App.tsx @@ -591,7 +591,6 @@ export function App() { onClick={(e) => e.preventDefault()} className="inline-flex min-h-10 shrink-0 cursor-not-allowed items-center gap-2 rounded-xl px-3 text-sm font-semibold text-slate-500 opacity-70 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300" > - Coming soon