🎨 Palette: 아이콘 전용 버튼에 툴팁(title) 추가

.jules/palette.md

@@ -1,3 +1,6 @@
 ## 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-08 - Adding Tooltips to Icon-Only Buttons
+**Learning:** Icon-only buttons lacking `title` attributes may not provide sufficient visual cues on hover, making navigation less intuitive for mouse users. Relying purely on `aria-label` ensures screen reader accessibility but omits visual feedback.
+**Action:** When adding `aria-label` to icon-only buttons, always accompany it with a matching `title` attribute to show native browser tooltips on hover.

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

@@ -98,6 +98,7 @@ describe("ScoreView", () => {
     expect(screen.getByRole("button", { name: "Add score" })).toBeDisabled();
     expect(screen.getByRole("button", { name: "Open score: opener.pdf" })).toBeDisabled();
     expect(screen.getByRole("button", { name: "Remove: opener.pdf" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Remove: opener.pdf" })).toHaveAttribute("title", "Remove: opener.pdf");
 
     fireEvent.click(screen.getByRole("button", { name: "Open score: opener.pdf" }));
     expect(mockInvoke).not.toHaveBeenCalled();

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

@@ -198,6 +198,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.test.tsx

@@ -173,7 +173,9 @@ describe("ScoreViewer", () => {
 
     expect(await screen.findByText("Page 1 of 3")).toBeInTheDocument();
     const previousButton = screen.getByRole("button", { name: "Previous page" });
+    expect(previousButton).toHaveAttribute("title", "Previous page");
     const nextButton = screen.getByRole("button", { name: "Next page" });
+    expect(nextButton).toHaveAttribute("title", "Next page");
     expect(previousButton).toBeDisabled();
 
     fireEvent.click(nextButton);
@@ -202,7 +204,9 @@ describe("ScoreViewer", () => {
 
     expect(await screen.findByText("Page 1 of 1")).toBeInTheDocument();
     const zoomInButton = screen.getByRole("button", { name: "Zoom in" });
+    expect(zoomInButton).toHaveAttribute("title", "Zoom in");
     const zoomOutButton = screen.getByRole("button", { name: "Zoom out" });
+    expect(zoomOutButton).toHaveAttribute("title", "Zoom out");
     const fitWidthButton = screen.getByRole("button", { name: "Fit width" });
     expect(fitWidthButton).toHaveAttribute("aria-pressed", "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" />
@@ -292,6 +294,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 +308,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}
           >

package.json

@@ -38,5 +38,8 @@
   "overrides": {
     "brace-expansion": "5.0.9",
     "postcss": "8.5.25"
+  },
+  "dependencies": {
+    "@types/react-dom": "^19.2.4"
   }
 }