🎨 Palette: 접근성 개선을 위한 툴팁 표시

apps/desktop/src/features/workspace/SectionRoadmap.test.tsx

@@ -36,6 +36,24 @@ describe("SectionRoadmap", () => {
     expect(screen.getAllByText("verse 들어가기 전에 이 음역을 악기로 확인해 보세요.").length).toBeGreaterThan(0);
   });
 
+  it("keeps unavailable chord edits focusable, visibly described, semantically disabled, and inert", () => {
+    setNavigatorLanguage("ko-KR");
+    const song = createDemoRehearsalSong();
+    const promptSpy = vi.spyOn(window, "prompt");
+
+    render(<SectionRoadmap song={song} activeRole="bass-guitar" />);
+
+    const description = screen.getByText("이 화면에서는 코드를 수정할 수 없습니다.");
+    const button = screen.getByRole("button", { name: "Bass Guitar의 verse 코드 수정, 현재 C#m7" });
+    expect(button.getAttribute("aria-disabled")).toBe("true");
+    expect(button.hasAttribute("disabled")).toBe(false);
+    expect(button.tabIndex).toBe(0);
+    expect(button.getAttribute("aria-describedby")).toBe(description.id);
+
+    fireEvent.click(button);
+    expect(promptSpy).not.toHaveBeenCalled();
+  });
+
   it("omits the range row when both notes are unnamed", () => {
     setNavigatorLanguage("en-US");
     const song = createDemoRehearsalSong();
@@ -90,7 +108,6 @@ describe("SectionRoadmap", () => {
     fireEvent.click(screen.getByRole("button", { name: "Bass Guitar의 verse 코드 수정, 현재 C#m7" }));
 
     expect(promptSpy).toHaveBeenCalledWith("새 코드 입력:", "C#m7");
-    expect(screen.getAllByTitle("코드 수정").length).toBeGreaterThan(0);
     expect(onSongUpdate).toHaveBeenCalledTimes(1);
   });
 

apps/desktop/src/features/workspace/SectionRoadmap.tsx

@@ -6,6 +6,7 @@ import { fillRangeCopy, playableRange } from "./firstRangeSqueeze";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { AlertCircle, CheckCircle2, Music2, Wand2, Lightbulb, Info } from "lucide-react";
 
 interface SectionRoadmapProps {
@@ -17,6 +18,7 @@ interface SectionRoadmapProps {
 /** Documented. */
 export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadmapProps) {
   const sectionRoadmapTitleId = useId();
+  const chordEditDisabledDescriptionId = useId();
   const locale = useMemo(() => detectPreferredLocale(), []);
   const t = useMemo(() => createTranslator(locale), [locale]);
 
@@ -90,12 +92,19 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
 
   return (
     <div className="mt-6 space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 id={sectionRoadmapTitleId} className="flex items-center text-xl font-black tracking-tight text-white">
-          <Music2 className="mr-2 size-5 text-cyan-300" aria-hidden="true" />
-          {t("sectionRoadmapTitle")}
-        </h2>
-        <span className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">{t("sectionRoadmapScrollHint")}</span>
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <h2 id={sectionRoadmapTitleId} className="flex items-center text-xl font-black tracking-tight text-white">
+            <Music2 className="mr-2 size-5 text-cyan-300" aria-hidden="true" />
+            {t("sectionRoadmapTitle")}
+          </h2>
+          {!onSongUpdate && (
+            <p id={chordEditDisabledDescriptionId} className="mt-1 text-xs font-medium text-slate-400">
+              {t("chordEditDisabledExplanation")}
+            </p>
+          )}
+        </div>
+        <span className="shrink-0 text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">{t("sectionRoadmapScrollHint")}</span>
       </div>
 
       <div
@@ -152,24 +161,32 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
                     <div className="space-y-3">
                       <div className="flex items-center gap-2">
                         <span className="text-[0.7rem] font-bold uppercase tracking-wider text-slate-400">{t("sectionChordLabel")}</span>
-                        <button
-                          type="button"
-                          aria-label={editChordLabel(role, section.label)}
-                          className={`-ml-2 rounded px-2 py-0.5 text-lg font-black tracking-tight transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 ${
-                            onSongUpdate
-                              ? "cursor-pointer hover:bg-white/10"
-                              : "cursor-default"
-                          } ${
-                            role.harmony.source === "user"
-                              ? "bg-indigo-300/15 text-indigo-200"
-                              : "text-cyan-100"
-                          }`}
-                          onClick={() => handleChordEdit(section.id, role)}
-                          title={onSongUpdate ? t("chordEditTitle") : undefined}
-                          disabled={!onSongUpdate}
-                        >
-                          {role.harmony.chord}
-                        </button>
+                        <Tooltip>
+                          <TooltipTrigger
+                            type="button"
+                            aria-label={editChordLabel(role, section.label)}
+                            aria-describedby={!onSongUpdate ? chordEditDisabledDescriptionId : undefined}
+                            className={`-ml-2 rounded px-2 py-0.5 text-lg font-black tracking-tight transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 aria-disabled:opacity-50 ${
+                              onSongUpdate
+                                ? "cursor-pointer hover:bg-white/10"
+                                : "cursor-default"
+                            } ${
+                              role.harmony.source === "user"
+                                ? "bg-indigo-300/15 text-indigo-200"
+                                : "text-cyan-100"
+                            }`}
+                            onClick={() => {
+                              if (!onSongUpdate) return;
+                              handleChordEdit(section.id, role);
+                            }}
+                            aria-disabled={!onSongUpdate ? "true" : undefined}
+                          >
+                            {role.harmony.chord}
+                          </TooltipTrigger>
+                          <TooltipContent sideOffset={4}>
+                            {onSongUpdate ? t("chordEditTitle") : t("chordEditDisabledExplanation")}
+                          </TooltipContent>
+                        </Tooltip>
                         {role.harmony.source === "user" && (
                           <Badge variant="secondary" className="h-4 bg-indigo-300/20 px-1 text-[0.6rem] text-indigo-100 hover:bg-indigo-300/20">
                             {t("harmonySourceUserBadge")}

apps/desktop/src/locales/en/common.json

@@ -59,6 +59,7 @@
   "chordEditAriaLabel": "Edit chord for {roleName} in {sectionLabel}, current {chord}",
   "chordEditPrompt": "Enter new chord:",
   "chordEditTitle": "Click to edit chord",
+  "chordEditDisabledExplanation": "Chord editing is not available in this view.",
   "harmonySourceUserBadge": "User",
   "roleSwitcherTitle": "Role-specific View",
   "allRoles": "All Roles",

apps/desktop/src/locales/ko/common.json

@@ -59,6 +59,7 @@
   "chordEditAriaLabel": "{roleName}의 {sectionLabel} 코드 수정, 현재 {chord}",
   "chordEditPrompt": "새 코드 입력:",
   "chordEditTitle": "코드 수정",
+  "chordEditDisabledExplanation": "이 화면에서는 코드를 수정할 수 없습니다.",
   "harmonySourceUserBadge": "사용자",
   "roleSwitcherTitle": "악기/보컬 역할",
   "allRoles": "전체 보기",