🎨 Palette: 비활성화된 액션 버튼 툴팁 접근성 개선

.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.

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] = {

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}