🎨 Palette: 악보 뷰어 접근성 및 툴팁 개선

[seonghobae]

💡 What

악보 뷰어 화면의 아이콘 버튼(확대/축소, 페이지 이동, 악보 삭제 등)에 title 속성을 추가하고 네이티브 disabled 속성을 aria-disabled="true"로 변경했습니다.

🎯 Why

• 아이콘 전용 버튼은 시각적인 힌트 외에 설명을 제공하지 않으므로, 마우스 사용자를 위해 title 툴팁을 제공하여 직관성을 높였습니다.
• HTML disabled 속성은 스크린 리더에서 요소를 완전히 숨기고 마우스 이벤트(호버 툴팁 등)를 차단하므로, aria-disabled와 e.preventDefault()를 사용하여 키보드 및 스크린 리더 접근성을 유지하면서 툴팁이 작동하도록 개선했습니다.

♿ Accessibility

• 아이콘 버튼에 title 및 aria-label 일치
• disabled 속성 제거 및 aria-disabled 도입으로 접근성 향상
• React Testing Library 테스트 코드를 aria-disabled 검증 방식으로 업데이트하고 이벤트 차단 테스트 추가

---

PR created automatically by Jules for task 7377617624541599206 started by @seonghobae

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[Copilot]

Pull request overview

This PR improves the score viewer’s icon-button accessibility and usability by adding localized tooltips (title) and replacing native disabled with aria-disabled + click prevention so tooltips and assistive tech behaviors remain available.

Changes:

• Added title attributes to icon-only controls in ScoreViewer (zoom, fit-to-width, prev/next page) and the “remove score” action in ScoreView.
• Replaced native disabled usage with aria-disabled and guarded onClick handlers to prevent actions when “disabled”.
• Updated React Testing Library assertions to validate aria-disabled and verify click default-prevention at bounds.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
apps/desktop/src/features/score/ScoreViewer.tsx	Adds tooltips and converts page navigation buttons from disabled to aria-disabled with guarded click handling.
apps/desktop/src/features/score/ScoreViewer.test.tsx	Updates tests to assert aria-disabled and verify default-prevented clicks at page bounds.
apps/desktop/src/features/score/ScoreView.tsx	Converts “Add/Open/Remove” score actions to aria-disabled with guarded click handling; adds tooltip for remove action.
apps/desktop/src/features/score/ScoreView.test.tsx	Updates tests to assert aria-disabled instead of native disabled state.

Comments suppressed due to low confidence (1)

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

• Because this button no longer uses the native disabled attribute, the hover:bg-rose-400/10 class will still trigger when aria-disabled="true", which can make a disabled destructive action look clickable. Add an aria-disabled:hover:* override to neutralize hover styling in the disabled state.

                      className="size-10 border-rose-300/25 text-rose-200 hover:bg-rose-400/10"

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 6 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

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

• aria-disabled is used to simulate a disabled state, but this button still applies the active hover background (hover:bg-cyan-300/20) even when aria-disabled="true". That gives a misleading “interactive” affordance in the disabled state and undermines the accessibility intent of the change. Consider overriding hover styles when aria-disabled is true.

              aria-disabled={!projectId || isAttaching}
              variant="secondary"
              className="min-h-11 border border-cyan-300/20 bg-cyan-300/10 font-semibold text-cyan-50 hover:bg-cyan-300/20 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"

[Copilot]

Pull request overview

Copilot reviewed 5 out of 7 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (2)

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

• Same as the previous button: prefer omitting aria-disabled when enabled (undefined) to match existing patterns (and avoid emitting aria-disabled="false").

            className="size-14"
            aria-label={t("scoreViewerNextPage")}
            title={t("scoreViewerNextPage")}
            aria-disabled={pageNumber >= pageCount}
            onClick={(e) => {
              if (pageNumber >= pageCount) {
                e.preventDefault();
                return;

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

• This button no longer uses the native disabled attribute, so the disabled:* Tailwind variants in this className will never apply (and can be misleading). Consider removing the disabled:* variants now that aria-disabled is the mechanism in use.

                      aria-disabled={!projectId}
                      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 aria-disabled:cursor-not-allowed aria-disabled:opacity-60"
                    >

[seonghobae]

Closing as closed-obsolete (palette a11y micro-PR storm) by autonomous product-completion loop.

Winner / disposition target: #727

Unique value from this cluster is consolidated there (projectId path guard + npm HIGH CVE pins + Foote novelty kernel sign). Remaining micro-duplicates do not land additional commercial readiness.

[seonghobae]

closed-closed-obsolete (palette a11y micro-PR storm) → #727

[google-labs-jules]

Closing as closed-obsolete (palette a11y micro-PR storm) by autonomous product-completion loop.

Winner / disposition target: #727

Unique value from this cluster is consolidated there (projectId path guard + npm HIGH CVE pins + Foote novelty kernel sign). Remaining micro-duplicates do not land additional commercial readiness.

Understood. Acknowledging that this work is now obsolete and stopping work on this task.

[google-labs-jules]

closed-closed-obsolete (palette a11y micro-PR storm) → #727

Understood. Acknowledging that this work is now obsolete and stopping work on this task.