From ad7d160a0ac1cce7485218f30155d3c75cd8b0f3 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 29 Jun 2026 03:58:59 +0000
Subject: [PATCH] =?UTF-8?q?feat(ui):=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=ED=88=B4?=
 =?UTF-8?q?=ED=8C=81=20=EC=A0=91=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

- CSS pointer-events-none 속성으로 인해 비활성화된 버튼에서 네이티브 툴팁이 표시되지 않는 문제를 해결했습니다.
- Workspace 컴포넌트의 비활성화된 버튼들을 접근성 있는 span 요소로 감싸 툴팁이 올바르게 표시되도록 수정했습니다.
- 관련 테스트를 추가하여 테스트 커버리지 100%를 유지했습니다.
---
 .jules/palette.md                             |  3 +++
 .../src/features/workspace/Workspace.test.tsx | 26 +++++++++++++++++++
 .../src/features/workspace/Workspace.tsx      | 12 ++++++---
 3 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 00000000..d840f0ad
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-06-29 - Accessible Tooltips for Disabled Elements
+**Learning:** Native `title` attributes on `<button>` elements disabled via CSS `pointer-events: none` do not trigger tooltips because pointer events are ignored. Removing `pointer-events: none` breaks modern UI library components.
+**Action:** When adding tooltips to disabled buttons, wrap the `<Button>` component in a `<span>` or `<div>` with `tabIndex={0}`, `className="cursor-not-allowed"`, and the `title` attribute.
diff --git a/apps/desktop/src/features/workspace/Workspace.test.tsx b/apps/desktop/src/features/workspace/Workspace.test.tsx
index 39ffa05d..65fa7f65 100644
--- a/apps/desktop/src/features/workspace/Workspace.test.tsx
+++ b/apps/desktop/src/features/workspace/Workspace.test.tsx
@@ -71,6 +71,32 @@ describe("Workspace", () => {
     expect(transcribeButton.title).toBe("Transcribe part");
   });
 
+  it("wraps disabled stem player buttons with an accessible tooltip container", () => {
+    const song = createDemoRehearsalSong();
+    song.sections[0]!.roles[0] = {
+      ...song.sections[0]!.roles[0]!,
+      name: "Bass Guitar"
+    };
+
+    render(<Workspace song={song} />);
+    fireEvent.click(screen.getByRole("tab", { name: "Bass Guitar" }));
+
+    // Buttons should not have the title directly (or it would be inaccessible when disabled with pointer-events-none)
+    const playStemBtn = screen.getByRole("button", { name: /Play stem/i });
+    expect(playStemBtn.hasAttribute("title")).toBe(false);
+
+    // Instead, the accessible titles should be on wrappers
+    const wrappers = screen.getAllByTitle("Coming soon");
+    expect(wrappers.length).toBeGreaterThanOrEqual(3);
+
+    // Verify one of the wrappers is indeed the container with tabIndex for keyboard accessibility
+    const wrapper = playStemBtn.closest("span");
+    expect(wrapper).not.toBeNull();
+    expect(wrapper?.getAttribute("title")).toBe("Coming soon");
+    expect(wrapper?.getAttribute("tabIndex")).toBe("0");
+    expect(wrapper?.className).toContain("cursor-not-allowed");
+  });
+
   it("renders bass transcription in the dark rehearsal cockpit system", () => {
     const song = createDemoRehearsalSong();
     song.sections[0]!.roles[0] = {
diff --git a/apps/desktop/src/features/workspace/Workspace.tsx b/apps/desktop/src/features/workspace/Workspace.tsx
index b4a98a06..e0cf0748 100644
--- a/apps/desktop/src/features/workspace/Workspace.tsx
+++ b/apps/desktop/src/features/workspace/Workspace.tsx
@@ -311,9 +311,15 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp
                 <p className="text-xs font-black uppercase tracking-[0.24em] text-emerald-200">Stem Player</p>
                 <p className="mt-1 text-sm font-semibold text-slate-100">{activeRoleDetails?.name ?? activeRole}</p>
                 <div className="mt-3 flex flex-wrap gap-2">
-                  <Button type="button" disabled title="Coming soon" variant="outline" className="min-h-11 cursor-not-allowed border-white/10 bg-white/5 text-slate-400">Play stem</Button>
-                  <Button type="button" disabled title="Coming soon" variant="outline" className="min-h-11 cursor-not-allowed border-white/10 bg-white/5 text-slate-400">Loop section</Button>
-                  <Button type="button" disabled title="Coming soon" variant="outline" className="min-h-11 cursor-not-allowed border-white/10 bg-white/5 text-slate-400">Solo / mute others</Button>
+                  <span className="inline-block cursor-not-allowed" tabIndex={0} title="Coming soon">
+                    <Button type="button" disabled variant="outline" className="min-h-11 border-white/10 bg-white/5 text-slate-400">Play stem</Button>
+                  </span>
+                  <span className="inline-block cursor-not-allowed" tabIndex={0} title="Coming soon">
+                    <Button type="button" disabled variant="outline" className="min-h-11 border-white/10 bg-white/5 text-slate-400">Loop section</Button>
+                  </span>
+                  <span className="inline-block cursor-not-allowed" tabIndex={0} title="Coming soon">
+                    <Button type="button" disabled variant="outline" className="min-h-11 border-white/10 bg-white/5 text-slate-400">Solo / mute others</Button>
+                  </span>
                   <Button
                     type="button"
                     disabled={!canTranscribeBass}