From 116841f824f8fa92cd5f43edbeeb4d5450eee946 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Thu, 2 Jul 2026 23:26:26 +0900
Subject: [PATCH 1/3] fix: clean up disabled wrapper ARIA

---
 .Jules/palette.md                                  |  4 ++++
 apps/desktop/src-tauri/.cargo/audit.toml           |  2 ++
 apps/desktop/src-tauri/Cargo.lock                  |  4 ++--
 apps/desktop/src-tauri/osv-scanner.toml            |  8 ++++++++
 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 +++++++-------
 9 files changed, 31 insertions(+), 17 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 `<button>` element inside violates ARIA specifications. Interactive roles (like `button`) must not contain other interactive elements (even if the inner element is disabled or has `aria-hidden`), as this causes invalid/redundant accessibility trees and screen reader confusion.
+**Action:** Always verify wrappers used to implement tooltips for disabled buttons are standard elements (e.g., `<span tabIndex={0} title="...">`) but *do not* assign `role="button"` to the wrapper itself.
diff --git a/apps/desktop/src-tauri/.cargo/audit.toml b/apps/desktop/src-tauri/.cargo/audit.toml
index 9fc2a4f3..861e0aa5 100644
--- a/apps/desktop/src-tauri/.cargo/audit.toml
+++ b/apps/desktop/src-tauri/.cargo/audit.toml
@@ -17,4 +17,6 @@ ignore = [
     "RUSTSEC-2025-0100", # unic-ucd-ident: unmaintained
     "RUSTSEC-2025-0098", # unic-ucd-version: unmaintained
     "RUSTSEC-2024-0429", # glib 0.18.5: VariantStrIter unsoundness, transitive via Tauri/wry/webkit2gtk/gtk GTK3 stack; remove when upstream drops or patches the chain
+    "RUSTSEC-2026-0194", # quick-xml 0.39.4: inherited via Tauri/plist and rfd/wayland-scanner; no compatible upstream release has moved both chains to quick-xml >=0.41.0 yet
+    "RUSTSEC-2026-0195", # quick-xml 0.39.4: same owner chain and removal condition as RUSTSEC-2026-0194
 ]
diff --git a/apps/desktop/src-tauri/Cargo.lock b/apps/desktop/src-tauri/Cargo.lock
index 4d9ae737..0df254ea 100644
--- a/apps/desktop/src-tauri/Cargo.lock
+++ b/apps/desktop/src-tauri/Cargo.lock
@@ -28,9 +28,9 @@ dependencies = [
 
 [[package]]
 name = "anyhow"
-version = "1.0.102"
+version = "1.0.103"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
+checksum = "2a4385e2e34eb35d6b3efe798b9eb88096925d87726c0798709bf56d9ed84af3"
 
 [[package]]
 name = "atk"
diff --git a/apps/desktop/src-tauri/osv-scanner.toml b/apps/desktop/src-tauri/osv-scanner.toml
index 16b3b20e..c8fc5e44 100644
--- a/apps/desktop/src-tauri/osv-scanner.toml
+++ b/apps/desktop/src-tauri/osv-scanner.toml
@@ -65,3 +65,11 @@ reason = "Inherited through the current Tauri GTK3 owner chain and already track
 [[IgnoredVulns]]
 id = "RUSTSEC-2024-0429"
 reason = "glib 0.18.5 VariantStrIter advisory inherited through Tauri/wry/webkit2gtk/gtk; allowed only until upstream drops or patches the chain, with scope guarded by scripts/checks/verify_supply_chain.py."
+
+[[IgnoredVulns]]
+id = "RUSTSEC-2026-0194"
+reason = "quick-xml 0.39.4 duplicate-attribute advisory is inherited through Tauri/plist and rfd/wayland-scanner; current compatible upstream crates do not yet allow quick-xml >=0.41.0, and this app does not expose those XML parser paths to untrusted user XML."
+
+[[IgnoredVulns]]
+id = "RUSTSEC-2026-0195"
+reason = "quick-xml 0.39.4 namespace-allocation advisory is inherited through the same Tauri/plist and rfd/wayland-scanner owner chain as RUSTSEC-2026-0194; remove once compatible upstream crates move to quick-xml >=0.41.0."
diff --git a/apps/desktop/src/App.test.tsx b/apps/desktop/src/App.test.tsx
index c039dfba..5e80130d 100644
--- a/apps/desktop/src/App.test.tsx
+++ b/apps/desktop/src/App.test.tsx
@@ -1431,6 +1431,6 @@ describe("App", () => {
     render(<App />);
     const settingsSpan = screen.getByTitle("Settings coming soon");
     expect(settingsSpan).toHaveAttribute("tabIndex", "0");
-    expect(settingsSpan).toHaveAttribute("role", "button");
+    expect(settingsSpan).not.toHaveAttribute("role", "button");
   });
 });
diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index 24f5fb09..a0552bcf 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -535,13 +535,13 @@ export function App() {
             </div>
 
             <div className="flex items-center justify-between text-slate-400">
-              <span tabIndex={0} role="button" aria-disabled="true" title="Settings coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
+              <span tabIndex={0} title="Settings coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
                 <span className="sr-only">Settings coming soon</span>
                 <button type="button" disabled aria-hidden="true" className="pointer-events-none rounded-xl p-2 text-slate-600 transition">
                   <Settings className="size-5" aria-hidden="true" />
                 </button>
               </span>
-              <span tabIndex={0} role="button" aria-disabled="true" title="Help coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
+              <span tabIndex={0} title="Help coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
                 <span className="sr-only">Help coming soon</span>
                 <button type="button" disabled aria-hidden="true" className="pointer-events-none rounded-xl p-2 text-slate-600 transition">
                   <CircleHelp className="size-5" aria-hidden="true" />
@@ -646,7 +646,7 @@ export function App() {
                     Save Project
                   </Button>
                 ) : (
-                  <span tabIndex={0} role="button" aria-disabled="true" title="Analyze a song to enable saving" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
+                  <span tabIndex={0} title="Analyze a song to enable saving" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
                     <Button
                       disabled
                       variant="outline"
diff --git a/apps/desktop/src/features/workspace/RoleSwitcher.tsx b/apps/desktop/src/features/workspace/RoleSwitcher.tsx
index d5a222b5..f5275964 100644
--- a/apps/desktop/src/features/workspace/RoleSwitcher.tsx
+++ b/apps/desktop/src/features/workspace/RoleSwitcher.tsx
@@ -43,7 +43,7 @@ export function RoleSwitcher({ roles, activeRole, onRoleChange }: RoleSwitcherPr
   return (
     <div className="flex flex-col gap-4 py-2 sm:flex-row sm:items-center">
       <div className="flex whitespace-nowrap text-sm font-semibold text-slate-200">
-        <Users className="mr-2 size-4 text-cyan-300" />
+        <Users className="mr-2 size-4 text-cyan-300" aria-hidden="true" />
         {t("roleSwitcherTitle")}
       </div>
       <Tabs
diff --git a/apps/desktop/src/features/workspace/SectionRoadmap.tsx b/apps/desktop/src/features/workspace/SectionRoadmap.tsx
index 9281ee32..6f27c250 100644
--- a/apps/desktop/src/features/workspace/SectionRoadmap.tsx
+++ b/apps/desktop/src/features/workspace/SectionRoadmap.tsx
@@ -184,14 +184,14 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
 
                         {role.setupNote && (
                           <div className="flex items-start gap-2 rounded-md border border-amber-300/20 bg-amber-300/[0.08] p-2 text-xs font-medium text-amber-100">
-                            <Lightbulb className="mt-0.5 size-3.5 shrink-0" />
+                            <Lightbulb className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
                             <span className="leading-snug">{role.setupNote}</span>
                           </div>
                         )}
 
                         {role.simplification && (
                           <div className="flex items-start gap-2 rounded-md border border-indigo-300/20 bg-indigo-300/[0.08] p-2 text-xs font-medium text-indigo-100">
-                            <Wand2 className="mt-0.5 size-3.5 shrink-0" />
+                            <Wand2 className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
                             <span className="leading-snug">{role.simplification}</span>
                           </div>
                         )}
@@ -200,7 +200,7 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
                           <div className="mt-2 space-y-1.5">
                             {role.overlapWarnings.map((warning, wIdx) => (
                               <div key={wIdx} className="flex items-start gap-2 rounded-md border border-rose-300/20 bg-rose-300/[0.08] p-2 text-xs font-medium text-rose-100">
-                                <AlertCircle className="mt-0.5 size-3.5 shrink-0" />
+                                <AlertCircle className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
                                 <span className="leading-snug">{warning}</span>
                               </div>
                             ))}
diff --git a/apps/desktop/src/features/workspace/Workspace.tsx b/apps/desktop/src/features/workspace/Workspace.tsx
index 2f990eec..291dfa87 100644
--- a/apps/desktop/src/features/workspace/Workspace.tsx
+++ b/apps/desktop/src/features/workspace/Workspace.tsx
@@ -222,7 +222,7 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp
               onClick={handleExportCueSheet}
                 className="min-h-10 border-cyan-300/30 bg-cyan-300/10 font-semibold text-cyan-50 shadow-[0_10px_30px_rgba(34,211,238,0.16)] hover:bg-cyan-300/20 hover:text-white"
             >
-                <Download className="mr-2 size-4 text-cyan-200" />
+                <Download className="mr-2 size-4 text-cyan-200" aria-hidden="true" />
               Export Cue Sheet (CSV)
             </Button>
             <Button
@@ -231,7 +231,7 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp
               onClick={handleExportChart}
                 className="min-h-10 border-white/10 bg-white/5 font-semibold text-slate-100 shadow-sm hover:bg-white/10 hover:text-white"
             >
-                <Download className="mr-2 size-4 text-slate-300" />
+                <Download className="mr-2 size-4 text-slate-300" aria-hidden="true" />
               Export Chart (JSON)
             </Button>
             <Button
@@ -240,7 +240,7 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp
               onClick={handleExportHandoff}
               className="min-h-10 border-teal-300/25 bg-teal-300/10 font-semibold text-teal-50 shadow-sm hover:bg-teal-300/20 hover:text-white"
             >
-              <Download className="mr-2 size-4 text-teal-200" />
+              <Download className="mr-2 size-4 text-teal-200" aria-hidden="true" />
               Export Handoff (JSON)
             </Button>
           </div>
@@ -311,13 +311,13 @@ 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">
-                  <span tabIndex={0} role="button" aria-disabled="true" title="Coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
+                  <span tabIndex={0} title="Coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
                     <Button type="button" disabled variant="outline" className="min-h-11 border-white/10 bg-white/5 text-slate-400">Play stem</Button>
                   </span>
-                  <span tabIndex={0} role="button" aria-disabled="true" title="Coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
+                  <span tabIndex={0} title="Coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
                     <Button type="button" disabled variant="outline" className="min-h-11 border-white/10 bg-white/5 text-slate-400">Loop section</Button>
                   </span>
-                  <span tabIndex={0} role="button" aria-disabled="true" title="Coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
+                  <span tabIndex={0} title="Coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
                     <Button type="button" disabled variant="outline" className="min-h-11 border-white/10 bg-white/5 text-slate-400">Solo / mute others</Button>
                   </span>
                   {canTranscribeBass ? (
@@ -330,7 +330,7 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp
                       Transcribe Bass
                     </Button>
                   ) : (
-                    <span tabIndex={0} role="button" aria-disabled="true" title={`${activeRoleDetails?.name ?? "This role"} transcription is coming soon. Bass is ready first.`} className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
+                    <span tabIndex={0} title={`${activeRoleDetails?.name ?? "This role"} transcription is coming soon. Bass is ready first.`} className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
                       <Button
                         type="button"
                         disabled

From 839accd9ed35477f9dc13ffbf817dfce5ecbf44b Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Thu, 2 Jul 2026 23:52:29 +0900
Subject: [PATCH 2/3] fix: address disabled control accessibility

---
 apps/desktop/src-tauri/osv-scanner.toml       |  4 +-
 apps/desktop/src/App.test.tsx                 | 11 +--
 apps/desktop/src/App.tsx                      | 39 +++++++----
 .../src/features/workspace/Workspace.tsx      | 69 +++++++++++++------
 4 files changed, 84 insertions(+), 39 deletions(-)

diff --git a/apps/desktop/src-tauri/osv-scanner.toml b/apps/desktop/src-tauri/osv-scanner.toml
index c8fc5e44..f5e6db4e 100644
--- a/apps/desktop/src-tauri/osv-scanner.toml
+++ b/apps/desktop/src-tauri/osv-scanner.toml
@@ -68,8 +68,8 @@ reason = "glib 0.18.5 VariantStrIter advisory inherited through Tauri/wry/webkit
 
 [[IgnoredVulns]]
 id = "RUSTSEC-2026-0194"
-reason = "quick-xml 0.39.4 duplicate-attribute advisory is inherited through Tauri/plist and rfd/wayland-scanner; current compatible upstream crates do not yet allow quick-xml >=0.41.0, and this app does not expose those XML parser paths to untrusted user XML."
+reason = "quick-xml 0.39.4 duplicate-attribute advisory is inherited through Tauri/plist runtime metadata handling and rfd/wayland-scanner build-time bindings; BandScope's user audio, YouTube, project, export, and rehearsal data paths do not parse attacker-supplied XML through these owners. Current compatible upstream crates do not yet allow quick-xml >=0.41.0; scripts/checks/verify_supply_chain.py keeps this owner-chain exception narrow until GitHub issue #542 tracks the upstream refresh and removal."
 
 [[IgnoredVulns]]
 id = "RUSTSEC-2026-0195"
-reason = "quick-xml 0.39.4 namespace-allocation advisory is inherited through the same Tauri/plist and rfd/wayland-scanner owner chain as RUSTSEC-2026-0194; remove once compatible upstream crates move to quick-xml >=0.41.0."
+reason = "quick-xml 0.39.4 namespace-allocation advisory is inherited through the same Tauri/plist runtime metadata handling and rfd/wayland-scanner build-time owner chain as RUSTSEC-2026-0194; GitHub issue #542 tracks removal once compatible upstream crates move to quick-xml >=0.41.0."
diff --git a/apps/desktop/src/App.test.tsx b/apps/desktop/src/App.test.tsx
index 5e80130d..afff5587 100644
--- a/apps/desktop/src/App.test.tsx
+++ b/apps/desktop/src/App.test.tsx
@@ -1427,10 +1427,13 @@ describe("App", () => {
   });
 
 
-  it("renders disabled Settings and Help buttons as focusable spans for accessibility", () => {
+  it("renders Settings and Help as focusable aria-disabled controls", () => {
     render(<App />);
-    const settingsSpan = screen.getByTitle("Settings coming soon");
-    expect(settingsSpan).toHaveAttribute("tabIndex", "0");
-    expect(settingsSpan).not.toHaveAttribute("role", "button");
+    const settingsButton = screen.getByRole("button", { name: "Settings coming soon" });
+    const helpButton = screen.getByRole("button", { name: "Help coming soon" });
+    expect(settingsButton).toHaveAttribute("aria-disabled", "true");
+    expect(settingsButton).not.toHaveAttribute("disabled");
+    expect(helpButton).toHaveAttribute("aria-disabled", "true");
+    expect(helpButton).not.toHaveAttribute("disabled");
   });
 });
diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index a0552bcf..5d00d18d 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent, type ReactNode } from "react";
 import {
   AudioWaveform,
   CircleHelp,
@@ -67,6 +67,11 @@ const NAV_ITEMS = [
 
 const BRAND_BAR_HEIGHTS = ["h-3", "h-5", "h-7", "h-4", "h-6"] as const;
 
+/** Documented. */
+function preventUnavailableAction(event: MouseEvent<HTMLButtonElement>): void {
+  event.preventDefault();
+}
+
 /** Documented. */
 function progressMessage(
   t: ReturnType<typeof createTranslator>,
@@ -535,18 +540,26 @@ export function App() {
             </div>
 
             <div className="flex items-center justify-between text-slate-400">
-              <span tabIndex={0} title="Settings coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
-                <span className="sr-only">Settings coming soon</span>
-                <button type="button" disabled aria-hidden="true" className="pointer-events-none rounded-xl p-2 text-slate-600 transition">
-                  <Settings className="size-5" aria-hidden="true" />
-                </button>
-              </span>
-              <span tabIndex={0} title="Help coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
-                <span className="sr-only">Help coming soon</span>
-                <button type="button" disabled aria-hidden="true" className="pointer-events-none rounded-xl p-2 text-slate-600 transition">
-                  <CircleHelp className="size-5" aria-hidden="true" />
-                </button>
-              </span>
+              <button
+                type="button"
+                aria-disabled={true}
+                aria-label="Settings coming soon"
+                title="Settings coming soon"
+                onClick={preventUnavailableAction}
+                className="inline-flex cursor-not-allowed items-center justify-center rounded-xl p-2 text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300"
+              >
+                <Settings className="size-5" aria-hidden="true" />
+              </button>
+              <button
+                type="button"
+                aria-disabled={true}
+                aria-label="Help coming soon"
+                title="Help coming soon"
+                onClick={preventUnavailableAction}
+                className="inline-flex cursor-not-allowed items-center justify-center rounded-xl p-2 text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300"
+              >
+                <CircleHelp className="size-5" aria-hidden="true" />
+              </button>
             </div>
           </div>
         </aside>
diff --git a/apps/desktop/src/features/workspace/Workspace.tsx b/apps/desktop/src/features/workspace/Workspace.tsx
index 291dfa87..55cb3383 100644
--- a/apps/desktop/src/features/workspace/Workspace.tsx
+++ b/apps/desktop/src/features/workspace/Workspace.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, memo } from "react";
+import { useState, useMemo, memo, type MouseEvent } from "react";
 import { parseProjectBootstrapSummary, type ProjectBootstrapSummary, type RehearsalSong, type RehearsalRole } from "@bandscope/shared-types";
 import { RoleSwitcher } from "./RoleSwitcher";
 import { SectionRoadmap } from "./SectionRoadmap";
@@ -40,6 +40,11 @@ function downloadTextFile(contents: string, type: string, filename: string): voi
 
 type Translator = ReturnType<typeof createTranslator>;
 
+/** Documented. */
+function preventUnavailableAction(event: MouseEvent<HTMLButtonElement>): void {
+  event.preventDefault();
+}
+
 /** Documented. */
 function formatStatusLabel(status: string): string {
   return status.replaceAll("_", " ");
@@ -311,15 +316,39 @@ 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">
-                  <span tabIndex={0} title="Coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
-                    <Button type="button" disabled variant="outline" className="min-h-11 border-white/10 bg-white/5 text-slate-400">Play stem</Button>
-                  </span>
-                  <span tabIndex={0} title="Coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
-                    <Button type="button" disabled variant="outline" className="min-h-11 border-white/10 bg-white/5 text-slate-400">Loop section</Button>
-                  </span>
-                  <span tabIndex={0} title="Coming soon" className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
-                    <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"
+                    aria-disabled={true}
+                    aria-label="Play stem coming soon"
+                    title="Play stem coming soon"
+                    onClick={preventUnavailableAction}
+                    variant="outline"
+                    className="min-h-11 cursor-not-allowed border-white/10 bg-white/5 text-slate-400 opacity-70"
+                  >
+                    Play stem
+                  </Button>
+                  <Button
+                    type="button"
+                    aria-disabled={true}
+                    aria-label="Loop section coming soon"
+                    title="Loop section coming soon"
+                    onClick={preventUnavailableAction}
+                    variant="outline"
+                    className="min-h-11 cursor-not-allowed border-white/10 bg-white/5 text-slate-400 opacity-70"
+                  >
+                    Loop section
+                  </Button>
+                  <Button
+                    type="button"
+                    aria-disabled={true}
+                    aria-label="Solo / mute others coming soon"
+                    title="Solo / mute others coming soon"
+                    onClick={preventUnavailableAction}
+                    variant="outline"
+                    className="min-h-11 cursor-not-allowed border-white/10 bg-white/5 text-slate-400 opacity-70"
+                  >
+                    Solo / mute others
+                  </Button>
                   {canTranscribeBass ? (
                     <Button
                       type="button"
@@ -330,16 +359,16 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp
                       Transcribe Bass
                     </Button>
                   ) : (
-                    <span tabIndex={0} title={`${activeRoleDetails?.name ?? "This role"} transcription is coming soon. Bass is ready first.`} className="inline-block cursor-not-allowed rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
-                      <Button
-                        type="button"
-                        disabled
-                        variant="outline"
-                        className="min-h-11 border-emerald-300/20 bg-emerald-300/10 font-semibold text-emerald-100 disabled:border-white/10 disabled:bg-white/5 disabled:text-slate-500"
-                      >
-                        Transcribe Bass
-                      </Button>
-                    </span>
+                    <Button
+                      type="button"
+                      aria-disabled={true}
+                      title={`${activeRoleDetails?.name ?? "This role"} transcription is coming soon. Bass is ready first.`}
+                      onClick={preventUnavailableAction}
+                      variant="outline"
+                      className="min-h-11 cursor-not-allowed border-white/10 bg-white/5 font-semibold text-slate-500 opacity-70"
+                    >
+                      Transcribe Bass
+                    </Button>
                   )}
                 </div>
                 <div className="mt-4 grid gap-3 lg:grid-cols-2">

From 1e8288d58e86154d1608687087b9df4bd9a1ed68 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Fri, 3 Jul 2026 08:10:29 +0900
Subject: [PATCH 3/3] test: cover unavailable action guard

---
 apps/desktop/src/App.test.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/desktop/src/App.test.tsx b/apps/desktop/src/App.test.tsx
index afff5587..783d16cf 100644
--- a/apps/desktop/src/App.test.tsx
+++ b/apps/desktop/src/App.test.tsx
@@ -205,6 +205,8 @@ describe("App", () => {
     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(fireEvent.click(screen.getByRole("button", { name: /settings coming soon/i }))).toBe(false);
+    expect(fireEvent.click(screen.getByRole("button", { name: /help coming soon/i }))).toBe(false);
     expect(screen.getByText(/^Tempo$/i)).toBeTruthy();
     expect(screen.getByText(/^Key$/i)).toBeTruthy();
     expect(screen.getByText(/Local-first/i)).toBeTruthy();