From d14915fa865137274d818fd2635b4c1e851e8128 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 21 Jul 2026 14:28:40 +0000
Subject: [PATCH 1/2] feat(ui): add tooltips to score viewer buttons for better
 accessibility

---
 .Jules/palette.md                               | 4 ++++
 apps/desktop/src/features/score/ScoreViewer.tsx | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 5c1c1698..8b4eca03 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -37,3 +37,7 @@
 ## 2026-07-02 - Inline clear buttons preserve focus
 **Learning:** Inline clear buttons often unmount immediately after clearing state, which can drop keyboard focus to the document body.
 **Action:** Move focus back to the owning input before clearing state, and cover the behavior with a DOM focus test.
+
+## 2024-07-21 - Visual Regression on Custom Buttons when migrating to aria-disabled
+**Learning:** When updating native `<button>` elements that use the central `<Button>` component to use `aria-disabled="true"` instead of the native `disabled` attribute, it can cause visual regressions if the central `<Button>` component styling relies on the `disabled` prop to apply styles like opacity and cursor changes.
+**Action:** Always verify that replacing `disabled` with `aria-disabled="true"` preserves the visual disabled states. If modifying a shared component (like the `<Button>` component mapping `disabled` prop to styles), ensure it properly maps `aria-disabled` styles or avoid using it for these cases to prevent blocking UI regressions.
diff --git a/apps/desktop/src/features/score/ScoreViewer.tsx b/apps/desktop/src/features/score/ScoreViewer.tsx
index 82692469..35819e41 100644
--- a/apps/desktop/src/features/score/ScoreViewer.tsx
+++ b/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}
           >

From fa2091a5a48865ed62b6ae43851513a75bfa4150 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 21 Jul 2026 14:52:43 +0000
Subject: [PATCH 2/2] feat(ui): add tooltips to score viewer buttons for better
 accessibility

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1bd6edd6..fd86f87f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4422,9 +4422,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
-      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
+      "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {