🎨 Palette: 악보 뷰어의 비활성화된 버튼에 대한 접근성 및 툴팁 개선

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/ScoreViewer.test.tsx

@@ -16,7 +16,9 @@ vi.mock("../../i18n", () => ({
       scoreViewerFailedTitle: "Could not display the score",
       scoreViewerRetry: "Retry",
       scoreViewerPrevPage: "Previous page",
+      scoreViewerPrevPageDisabled: "Previous page (Unavailable)",
       scoreViewerNextPage: "Next page",
+      scoreViewerNextPageDisabled: "Next page (Unavailable)",
       scoreViewerPageIndicator: "Page {current} of {total}",
       scoreViewerZoomIn: "Zoom in",
       scoreViewerZoomOut: "Zoom out",
@@ -120,8 +122,8 @@ describe("ScoreViewer", () => {
       expect(page.render).toHaveBeenCalled();
     });
     expect(page.getViewport).toHaveBeenCalledWith({ scale: 1 });
-    expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "Next page" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "Previous page" })).toHaveAttribute("aria-disabled", "true");
+    expect(screen.getByRole("button", { name: "Next page" })).not.toHaveAttribute("aria-disabled", "true");
   });
 
   it("shows the file name when provided", async () => {
@@ -174,14 +176,22 @@ describe("ScoreViewer", () => {
     expect(await screen.findByText("Page 1 of 3")).toBeInTheDocument();
     const previousButton = screen.getByRole("button", { name: "Previous page" });
     const nextButton = screen.getByRole("button", { name: "Next page" });
-    expect(previousButton).toBeDisabled();
+    expect(previousButton).toHaveAttribute("aria-disabled", "true");
+    const preventDefaultSpyPrev = vi.spyOn(Event.prototype, "preventDefault");
+    fireEvent.click(previousButton);
+    expect(preventDefaultSpyPrev).toHaveBeenCalled();
+    preventDefaultSpyPrev.mockRestore();
 
     fireEvent.click(nextButton);
     expect(screen.getByText("Page 2 of 3")).toBeInTheDocument();
 
     fireEvent.click(nextButton);
     expect(screen.getByText("Page 3 of 3")).toBeInTheDocument();
-    expect(nextButton).toBeDisabled();
+    expect(nextButton).toHaveAttribute("aria-disabled", "true");
+    const preventDefaultSpyNext = vi.spyOn(Event.prototype, "preventDefault");
+    fireEvent.click(nextButton);
+    expect(preventDefaultSpyNext).toHaveBeenCalled();
+    preventDefaultSpyNext.mockRestore();
 
     await waitFor(() => {
       expect(doc.getPage).toHaveBeenCalledWith(3);

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

@@ -292,8 +292,9 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
             size="icon-lg"
             className="size-14"
             aria-label={t("scoreViewerPrevPage")}
-            disabled={pageNumber <= 1}
-            onClick={goToPreviousPage}
+            aria-disabled={pageNumber <= 1 ? "true" : undefined}
+            onClick={pageNumber <= 1 ? (e) => e.preventDefault() : goToPreviousPage}
+            title={pageNumber <= 1 ? t("scoreViewerPrevPageDisabled") : t("scoreViewerPrevPage")}
           >
             <ChevronLeft className="size-6" aria-hidden="true" />
           </Button>
@@ -305,8 +306,9 @@ export function ScoreViewer({ data, fileName, onStatusChange }: ScoreViewerProps
             size="icon-lg"
             className="size-14"
             aria-label={t("scoreViewerNextPage")}
-            disabled={pageNumber >= pageCount}
-            onClick={goToNextPage}
+            aria-disabled={pageNumber >= pageCount ? "true" : undefined}
+            onClick={pageNumber >= pageCount ? (e) => e.preventDefault() : goToNextPage}
+            title={pageNumber >= pageCount ? t("scoreViewerNextPageDisabled") : t("scoreViewerNextPage")}
           >
             <ChevronRight className="size-6" aria-hidden="true" />
           </Button>

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

@@ -148,5 +148,7 @@
   "practiceProgressRegionLabel": "Practice Progress",
   "practiceProgressLabel": "Practice Progress",
   "decreasePracticeProgressLabel": "Decrease progress",
-  "increasePracticeProgressLabel": "Increase progress"
+  "increasePracticeProgressLabel": "Increase progress",
+  "scoreViewerPrevPageDisabled": "Previous page (Unavailable)",
+  "scoreViewerNextPageDisabled": "Next page (Unavailable)"
 }

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

@@ -148,5 +148,7 @@
   "practiceProgressRegionLabel": "연습 진척도",
   "practiceProgressLabel": "연습 진척도",
   "decreasePracticeProgressLabel": "진척도 감소",
-  "increasePracticeProgressLabel": "진척도 증가"
+  "increasePracticeProgressLabel": "진척도 증가",
+  "scoreViewerPrevPageDisabled": "이전 페이지 (사용 불가)",
+  "scoreViewerNextPageDisabled": "다음 페이지 (사용 불가)"
 }

package.json

@@ -37,6 +37,7 @@
   },
   "overrides": {
     "brace-expansion": "5.0.9",
-    "postcss": "8.5.25"
+    "postcss": "8.5.25",
+    "pdfjs-dist": "6.2.108"
   }
 }