🎨 Palette: [UX improvement] 스코어 뷰어 버튼 접근성 및 툴팁 개선

[seonghobae]

💡 What:

• ScoreView의 네이티브 버튼에서 disabled 속성을 aria-disabled="true"로 변경하고 설명 title 툴팁 추가
• ScoreView 및 ScoreViewer의 아이콘 전용 버튼(삭제, 확대/축소, 이전/다음 페이지)에 title 속성을 추가하여 마우스 사용자용 툴팁 제공

🎯 Why:

• 네이티브 disabled 속성은 스크린 리더 포커스와 마우스 이벤트를 차단하여 툴팁(비활성화 사유)을 읽거나 볼 수 없게 만듦
• 아이콘 전용 버튼에 툴팁이 없어 마우스 사용자가 버튼의 기능을 명확히 인지하기 어려움

📸 Before/After:
(N/A - 툴팁 표시 및 스크린 리더 포커스 개선)

♿ Accessibility:

• 비활성화된 항목에 대해 스크린 리더 초점 유지 및 설명 제공 (aria-disabled)
• 아이콘 전용 버튼에 네이티브 툴팁(title)을 추가하여 접근성 향상

---

PR created automatically by Jules for task 6711654907972493799 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 ScoreView/ScoreViewer button accessibility and discoverability by adding native tooltips (title) to icon-only controls and using aria-disabled (instead of native disabled) in ScoreView to keep assistive-tech focus and allow hover tooltips for disabled states.

Changes:

• Added title tooltips to ScoreViewer zoom/fit/page navigation icon buttons.
• Switched the ScoreView “open score” native button from disabled to aria-disabled and added a disabled-reason tooltip.
• Updated ScoreView tests to assert aria-disabled instead of native disabled for the “open score” button.

Reviewed changes

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

File	Description
apps/desktop/src/features/score/ScoreViewer.tsx	Adds title tooltips to icon-only controls (zoom/fit/page navigation).
apps/desktop/src/features/score/ScoreView.tsx	Uses aria-disabled + tooltip for “open score” when no project is active; adds tooltip to remove action.
apps/desktop/src/features/score/ScoreView.test.tsx	Updates assertions to match the new aria-disabled behavior.

---

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

[Copilot]

Pull request overview

Copilot reviewed 3 out of 4 changed files in this pull request and generated no new comments.

[Copilot]

Pull request overview

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

Comments suppressed due to low confidence (3)

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

• disabled on a native <button> prevents the title tooltip from showing (and removes the control from focus), which undermines the tooltip improvement for the prev/next icon buttons when they are disabled. Consider switching to aria-disabled and removing the click handler when disabled (similar to ScoreView’s pattern).

            disabled={pageNumber <= 1}
            onClick={goToPreviousPage}

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

• Same issue as the previous-page control: when disabled is set, browsers won’t show the title tooltip. Using aria-disabled plus a conditional onClick keeps the tooltip behavior consistent.

            disabled={pageNumber >= pageCount}
            onClick={goToNextPage}

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

• The remove (trash) icon button now has a title, but it’s still rendered with disabled={!projectId}. Disabled buttons generally don’t show native title tooltips because pointer events are blocked, so the tooltip won’t appear in the exact state where the button is disabled. If you want a tooltip even while disabled, move the title to a non-disabled wrapper element.

                      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"