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

[seonghobae]

💡 What:

• ScoreViewer 및 ScoreView 내의 아이콘 전용 버튼(Zoom In/Out, Prev/Next Page, Remove 등)에 aria-label과 일치하는 title 속성을 추가했습니다.
• eslint.config.js 실행 시 발생하는 @eslint/js 모듈 참조 오류를 해결하기 위해 개발 의존성을 추가했습니다.

🎯 Why:

• 스크린 리더 사용자는 aria-label을 통해 버튼의 역할을 알 수 있지만, 시력이 있는 마우스 사용자는 아이콘만으로는 버튼의 기능을 정확히 유추하기 어려울 수 있습니다. title 속성을 추가하면 네이티브 브라우저 툴팁이 제공되어 사용성이 개선됩니다.

♿ Accessibility:

• 마우스 호버 시 버튼의 목적을 명확히 전달하여 시각적 인지 접근성을 향상시켰습니다.

📝 Note:

• .jules/palette.md에 관련된 UX/a11y 학습 기록을 추가했습니다.

---

PR created automatically by Jules for task 18216407672799755199 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-viewing UI’s usability by adding native hover tooltips (title) to icon-only controls, aligning the tooltip text with existing aria-label values.

Changes:

• Added title attributes to zoom and page navigation icon buttons in ScoreViewer.
• Added a title attribute to the icon-only “remove attachment” button in ScoreView.
• Documented the tooltip learning in .jules/palette.md.

Reviewed changes

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

File	Description
apps/desktop/src/features/score/ScoreViewer.tsx	Adds title tooltips to icon-only zoom and prev/next page buttons.
apps/desktop/src/features/score/ScoreView.tsx	Adds a title tooltip to the icon-only remove button in the attachment list.
.jules/palette.md	Adds a UX/a11y learning note about tooltips for icon-only buttons.

Comments suppressed due to low confidence (1)

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

• title tooltips do not display on natively disabled buttons, so the tooltip will be missing on the last page (when pageNumber >= pageCount). If you want the tooltip to be available even in the disabled state, prefer aria-disabled and guard the click handler instead of using the disabled attribute.

            className="size-14"
            aria-label={t("scoreViewerNextPage")}
            title={t("scoreViewerNextPage")}
            disabled={pageNumber >= pageCount}
            onClick={goToNextPage}

---

💡 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 2 comments.

Comments suppressed due to low confidence (2)

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

• disabled 버튼에서는 브라우저가 hover/tooltip 이벤트를 처리하지 않아 title 툴팁이 표시되지 않습니다. 페이지 경계에서 Prev 버튼이 disabled가 되므로, 현재 변경의 목적(마우스 사용자에게 툴팁 제공)이 달성되지 않습니다. disabled 상태에서도 툴팁이 보이도록 disabled 상태에서만 pointer-events를 부모로 넘기는 래퍼(span[title])를 추가하거나, aria-disabled 패턴으로 전환해 주세요.

            aria-label={t("scoreViewerPrevPage")}
            title={t("scoreViewerPrevPage")}
            disabled={pageNumber <= 1}
            onClick={goToPreviousPage}

.jules/palette.md:6

• 이 가이드는 title 추가만 강조하고 있는데, 같은 문서 상단의 학습처럼 disabled 상태에서는 툴팁이 표시되지 않을 수 있습니다. "아이콘 전용 버튼에 title" 원칙을 적용할 때, disabled 가능 버튼은 aria-disabled/래퍼(span[title]) 같은 예외 패턴이 필요하다는 점을 함께 명시하는 게 좋습니다.

## 2024-07-24 - Tooltips for icon-only buttons
**Learning:** Icon-only buttons (like those using `lucide-react` icons) with an `aria-label` are accessible to screen readers, but mouse/sighted users miss out on this context, reducing usability.
**Action:** Always add a `title` attribute matching the `aria-label` to icon-only buttons to provide native browser tooltips on hover.

[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

• These buttons set a title, but because they use the native disabled attribute, the element won’t receive hover events in most browsers—so the tooltip won’t appear exactly when the button is disabled (arguably the most important time to explain the control). Consider using aria-disabled plus a guarded/conditional onClick instead, so the tooltip still works while clicks remain blocked.

            aria-label={t("scoreViewerPrevPage")}
            title={t("scoreViewerPrevPage")}
            disabled={pageNumber <= 1}
            onClick={goToPreviousPage}
          >

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

• Same issue as the previous button: using the native disabled attribute prevents hover/pointer events, so the title tooltip won’t show while disabled. Using aria-disabled and guarding the click keeps the tooltip available without allowing interaction.

            aria-label={t("scoreViewerNextPage")}
            title={t("scoreViewerNextPage")}
            disabled={pageNumber >= pageCount}
            onClick={goToNextPage}
          >

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

• This remove button gets a title, but it is also disabled when !projectId, which will suppress hover events and prevent the tooltip from showing. Switching to aria-disabled (and relying on the already-conditional onClick) keeps the control non-functional while still allowing the tooltip to explain the icon.

                      size="icon"
                      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"