🎨 Palette: Score 컴포넌트 아이콘 버튼 툴팁 추가 및 접근성 개선

.jules/palette.md

@@ -1,3 +1,11 @@
 ## 2024-05-19 - Replace HTML disabled with aria-disabled="true" for Accessible Tooltips
 **Learning:** Native HTML `disabled` attributes completely hide elements from screen readers and block all pointer/hover events, preventing tooltips from functioning for disabled elements.
 **Action:** Replace `disabled` with `aria-disabled="true"`, enforce block click handlers via `e.preventDefault()`, and add a title tooltip directly to the element to maintain full tooltip accessibility and keyboard focus support for visually impaired and mouse users.
+
+## 2026-08-07 - Score 컴포넌트 버튼의 툴팁 및 접근성 강화
+**Learning:** 아이콘만 있는 기능성 버튼(ScoreViewer, ScoreView)들에 적절한 `title` 속성이 없으면 마우스 사용자 및 스크린 리더 사용자에게 기능이 명확히 전달되지 않습니다. 또한, HTML 기본 `disabled` 속성은 이벤트를 모두 차단해 비활성 상태에서의 툴팁 제공을 막습니다. (단, Base UI 같은 서드파티 라이브러리로 감싸진 커스텀 <Button>은 기존 `disabled` prop을 유지해야 합니다.)
+**Action:** 기본 HTML `<button>` 요소에는 `aria-disabled="true"`와 `title` 속성을 추가하고 를 활용하여 접근성을 높였으며, 커스텀 `<Button>` 요소들에는 `title` 속성만 추가해 툴팁을 제공했습니다.
+
+## 2026-08-07 - Score 컴포넌트 버튼의 툴팁 및 접근성 강화
+**Learning:** 아이콘만 있는 기능성 버튼(ScoreViewer, ScoreView)들에 적절한 `title` 속성이 없으면 마우스 사용자 및 스크린 리더 사용자에게 기능이 명확히 전달되지 않습니다. 또한, HTML 기본 `disabled` 속성은 이벤트를 모두 차단해 비활성 상태에서의 툴팁 제공을 막습니다. (단, Base UI 같은 서드파티 라이브러리로 감싸진 커스텀 <Button>은 기존 `disabled` prop을 유지해야 합니다.)
+**Action:** 기본 HTML `<button>` 요소에는 `aria-disabled="true"`와 `title` 속성을 추가하고 `e.preventDefault()`를 활용하여 접근성을 높였으며, 커스텀 `<Button>` 요소들에는 `title` 속성만 추가해 툴팁을 제공했습니다.

apps/desktop/package.json

@@ -20,7 +20,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.24.0",
-    "pdfjs-dist": "6.1.200",
+    "pdfjs-dist": "^6.2.108",
     "react": "^19.2.4",
     "react-dom": "^19.2.7",
     "sonner": "^2.0.7",

apps/desktop/src/features/score/ScoreView.test.tsx

@@ -96,7 +96,7 @@ describe("ScoreView", () => {
 
     expect(screen.getByText("Scores attach to the active analysis project.")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Add score" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "Open score: opener.pdf" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Open score: opener.pdf" })).toHaveAttribute("aria-disabled", "true");
     expect(screen.getByRole("button", { name: "Remove: opener.pdf" })).toBeDisabled();
 
     fireEvent.click(screen.getByRole("button", { name: "Open score: opener.pdf" }));

apps/desktop/src/features/score/ScoreView.tsx

@@ -183,11 +183,12 @@ export function ScoreView({ song, projectId, onSongUpdate }: ScoreViewProps) {
                   >
                     <button
                       type="button"
-                      onClick={projectId ? () => void openAttachment(projectId, attachment) : undefined}
-                      disabled={!projectId}
+                      onClick={!projectId ? (e) => e.preventDefault() : () => void openAttachment(projectId, attachment)}
+                      aria-disabled={!projectId ? "true" : undefined}
                       aria-current={selected?.id === attachment.id ? "true" : undefined}
                       aria-label={`${t("scoreOpen")}: ${attachment.fileName}`}
-                      className="flex min-h-10 min-w-0 flex-1 items-center gap-2 text-left text-sm font-semibold text-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 disabled:cursor-not-allowed disabled:opacity-60"
+                      title={`${t("scoreOpen")}: ${attachment.fileName}`}
+                      className="flex min-h-10 min-w-0 flex-1 items-center gap-2 text-left text-sm font-semibold text-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 aria-disabled:cursor-not-allowed aria-disabled:opacity-60"
                     >
                       <FileMusic className="size-4 shrink-0 text-cyan-300" aria-hidden="true" />
                       <span className="truncate">{attachment.fileName}</span>
@@ -198,6 +199,7 @@ export function ScoreView({ song, projectId, onSongUpdate }: ScoreViewProps) {
                       onClick={projectId ? () => void handleRemove(projectId, attachment) : undefined}
                       disabled={!projectId}
                       aria-label={`${t("scoreRemove")}: ${attachment.fileName}`}
+                      title={`${t("scoreRemove")}: ${attachment.fileName}`}
                       className="size-10 border-rose-300/25 text-rose-200 hover:bg-rose-400/10"
                     >
                       <Trash2 className="size-4" aria-hidden="true" />

apps/desktop/src/features/score/ScoreViewer.tsx

@@ -258,6 +258,7 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
               size="icon-lg"
               className="size-12"
               aria-label={t("scoreViewerZoomOut")}
+            title={t("scoreViewerZoomOut")}
               onClick={zoomOut}
             >
               <ZoomOut aria-hidden="true" />
@@ -267,6 +268,7 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
               size="icon-lg"
               className="size-12"
               aria-label={t("scoreViewerZoomIn")}
+            title={t("scoreViewerZoomIn")}
               onClick={zoomIn}
             >
               <ZoomIn aria-hidden="true" />
@@ -275,6 +277,7 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
               variant={fitWidth ? "secondary" : "outline"}
               className="h-12 px-4 text-base"
               aria-label={t("scoreViewerFitWidth")}
+            title={t("scoreViewerFitWidth")}
               aria-pressed={fitWidth}
               onClick={fitToWidth}
             >
@@ -292,6 +295,7 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
             size="icon-lg"
             className="size-14"
             aria-label={t("scoreViewerPrevPage")}
+            title={t("scoreViewerPrevPage")}
             disabled={pageNumber <= 1}
             onClick={goToPreviousPage}
           >
@@ -305,6 +309,7 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
             size="icon-lg"
             className="size-14"
             aria-label={t("scoreViewerNextPage")}
+            title={t("scoreViewerNextPage")}
             disabled={pageNumber >= pageCount}
             onClick={goToNextPage}
           >