From f5b4d05378033a2c8da306b4bcba9853c9842cee Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 2 Jul 2026 14:06:25 +0000 Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX/a11y=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0]=20=EB=B2=84=ED=8A=BC=20=EB=9E=98=ED=8D=BC?= =?UTF-8?q?=20=EB=B0=8F=20=EC=95=84=EC=9D=B4=EC=BD=98=20ARIA=20=EC=A0=91?= =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - App.tsx, Workspace.tsx 내의 비활성화된 버튼을 감싸는 span 태그에서 불필요하고 명세에 어긋나는 `role="button"` 및 `aria-disabled="true"` 제거 - Workspace.tsx, RoleSwitcher.tsx, SectionRoadmap.tsx 내의 텍스트와 함께 표시되는 꾸밈용(장식용) Lucide 아이콘들에 `aria-hidden="true"`를 추가하여 스크린 리더 중복 읽기 방지 - 이에 맞게 App.test.tsx 업데이트 --- .Jules/palette.md | 4 ++++ apps/desktop/src/App.test.tsx | 2 +- apps/desktop/src/App.tsx | 6 +++--- .../src/features/workspace/RoleSwitcher.tsx | 2 +- .../src/features/workspace/SectionRoadmap.tsx | 6 +++--- apps/desktop/src/features/workspace/Workspace.tsx | 14 +++++++------- 6 files changed, 19 insertions(+), 15 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index b6f5d5bf..c1582ffd 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -29,3 +29,7 @@ ## 2024-07-01 - Testing components with focusable disabled button wrappers **Learning:** When native disabled buttons are wrapped in a focusable `span` to provide accessible tooltips, tests that previously found and clicked the `button` (by temporarily removing the `disabled` attribute) may fail or become overly complex. It is cleaner and more accurate to query the wrapper element (e.g. via its `title`) and fire events on it, reflecting the actual accessible DOM structure. **Action:** When testing UI components that wrap disabled buttons in a focusable span for accessibility (e.g., using a tooltip/title), use `screen.getByTitle(...)` to query the wrapper element for interactions like `fireEvent.click` rather than `screen.getByRole('button')`. + +## 2024-05-24 - Avoid nesting native buttons with ARIA role button on wrappers +**Learning:** Adding `role="button"` to a `span` or `div` wrapper that contains a native ` - + Help coming soon ) : ( - + @@ -311,13 +311,13 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp

Stem Player

{activeRoleDetails?.name ?? activeRole}

- + - + - + {canTranscribeBass ? ( @@ -330,7 +330,7 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp Transcribe Bass ) : ( - +