🎨 Palette: [UX improvement] 스코어 뷰어 내 아이콘 버튼 및 비활성화 상태 툴팁 개선 by seonghobae · Pull Request #699 · ContextualWisdomLab/bandscope

seonghobae · 2026-07-25T14:32:55Z

💡 What:

ScoreView.tsx의 악보 첨부/열기 버튼에서 disabled 속성 대신 aria-disabled를 사용하여 스크린 리더 접근성을 개선하고, 비활성화 사유를 설명하는 title 툴팁을 추가했습니다.
ScoreView.tsx와 ScoreViewer.tsx에 있는 아이콘 전용 버튼(삭제, 확대/축소, 이전/다음 페이지)에 title 속성을 추가하여 마우스 사용자에게 브라우저 기본 툴팁이 제공되도록 했습니다.
단위 테스트 파일(ScoreView.test.tsx)에서 toBeDisabled로 작성되었던 코드를 toHaveAttribute("aria-disabled", "true")로 수정하여 테스트가 통과하도록 반영했습니다.

🎯 Why:

네이티브 disabled 속성은 요소를 스크린 리더에서 완전히 숨기고 포인터 이벤트를 차단하여 툴팁이 동작하지 않게 하는 문제가 있었습니다. 이를 aria-disabled로 변경하여 키보드 포커스와 툴팁 접근성을 보장합니다.
아이콘 전용 버튼에 title 속성이 누락되어 있어 시각 장애가 없는 마우스 사용자가 버튼의 기능을 명확히 인지하기 어려웠습니다.

📸 Before/After:

Before: 프로젝트가 활성화되지 않았을 때 비활성화된 악보 버튼에 마우스를 올려도 툴팁이 없어 사유를 알 수 없음. 확대/축소 및 페이지 이동 아이콘 버튼 호버 시 툴팁 표시 안 됨.
After: 비활성화된 악보 버튼 호버 시 "프로젝트가 필요합니다"라는 툴팁 표시. 모든 아이콘 버튼 호버 시 각 버튼의 기능을 알리는 직관적인 툴팁 표시.

♿ Accessibility:

비활성화된 버튼에 대한 스크린 리더 안내 및 키보드 탐색(Focus) 지원 개선.
아이콘 전용 버튼에 시각적 툴팁(title) 지원을 추가하여 마우스 사용자 경험 향상.

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

google-labs-jules · 2026-07-25T14:32:56Z

👋 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

이 PR은 데스크톱 앱의 악보(Score) UI에서 아이콘 버튼 툴팁(title) 제공과 비활성 상태 접근성(aria-disabled) 개선을 통해 마우스/스크린리더 사용성을 높이기 위한 변경입니다.

Changes:

ScoreViewer의 아이콘 버튼(확대/축소, 이전/다음 페이지)에 title을 추가해 브라우저 기본 툴팁이 표시되도록 개선
ScoreView의 “악보 열기” 버튼을 disabled 대신 aria-disabled로 전환하고 비활성 사유 title을 추가
ScoreView 단위 테스트에서 disabled 기반 검증을 aria-disabled 기반으로 수정

Reviewed changes

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

File	Description
apps/desktop/src/features/score/ScoreViewer.tsx	아이콘 버튼에 `title`을 추가해 마우스 호버 시 기능 툴팁 제공
apps/desktop/src/features/score/ScoreView.tsx	“열기” 버튼을 `aria-disabled`로 전환 + 비활성 사유 툴팁 추가(단, “삭제” 버튼은 여전히 `disabled` 사용)
apps/desktop/src/features/score/ScoreView.test.tsx	“열기” 버튼 검증을 `aria-disabled="true"` 기준으로 변경

Comments suppressed due to low confidence (1)

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

삭제 아이콘 버튼은 title을 추가했지만, disabled={!projectId} 때문에 브라우저 기본 툴팁이 표시되지 않습니다(네이티브 disabled는 포인터 이벤트를 차단). 위의 열기 버튼과 동일하게 aria-disabled로 표시하고, projectId가 없을 때는 클릭이 아무 동작도 하지 않도록 처리해야 비활성화 사유 툴팁이 실제로 동작합니다.

                      onClick={projectId ? () => void handleRemove(projectId, attachment) : undefined}
                      disabled={!projectId}
                      aria-label={`${t("scoreRemove")}: ${attachment.fileName}`}
                      title={!projectId ? t("scoreRequiresProject") : `${t("scoreRemove")}: ${attachment.fileName}`}

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

                      type="button"
-                      onClick={projectId ? () => void openAttachment(projectId, attachment) : undefined}
-                      disabled={!projectId}
+                      onClick={projectId ? () => void openAttachment(projectId, attachment) : (e) => e.preventDefault()}


- package-lock.json에서 brace-expansion, postcss 등의 취약점 패치 (npm audit fix) - services/analysis-engine/uv.lock에서 yt-dlp, setuptools 보안 업데이트 - ScoreView, ScoreViewer 버튼에 aria-disabled와 tooltip(title) 추가하여 접근성 향상 - 관련 테스트 코드(aria-disabled 속성 검증) 수정

Copilot

Pull request overview

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

Comments suppressed due to low confidence (1)

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

type="button" elements don’t have a meaningful default action to cancel, so e.preventDefault() is a no-op here. Keeping a dedicated handler for the disabled state makes the intent harder to read; you can omit the handler entirely and rely on aria-disabled + the absence of onClick to prevent activation.

                      onClick={projectId ? () => void openAttachment(projectId, attachment) : (e) => e.preventDefault()}

                      onClick={projectId ? () => void handleRemove(projectId, attachment) : undefined}
                      disabled={!projectId}
                      aria-label={`${t("scoreRemove")}: ${attachment.fileName}`}
+                      title={!projectId ? t("scoreRequiresProject") : `${t("scoreRemove")}: ${attachment.fileName}`}


- `services/analysis-engine/uv.lock`의 setuptools 패키지 업그레이드를 통해 CVE-2026-59890 대응 - lockfile 동기화를 통해 trivy-fs 스캔 통과 확보

- services/analysis-engine/pyproject.toml에 setuptools 버전을 >=75.0.0으로 고정하여 취약점 방지 - uv lock 갱신으로 CI 스캔 통과 확보

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 (2)

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

When projectId is missing, the onClick handler calls e.preventDefault(), but type="button" means there’s no default action to cancel. This adds an unnecessary handler and still leaves the control activatable (even though it does nothing). Prefer omitting onClick entirely when the action is disabled.

                      type="button"
                      onClick={projectId ? () => void openAttachment(projectId, attachment) : (e) => e.preventDefault()}
                      aria-disabled={!projectId ? true : undefined}
                      title={!projectId ? t("scoreRequiresProject") : undefined}

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

title tooltips won’t appear for a disabled <button> in most browsers because disabled controls don’t receive pointer events. Currently the remove icon button sets title to the disabled-reason string when disabled={!projectId}, but that tooltip won’t be shown when the button is actually disabled. If you want a hover tooltip in the disabled state, put the disabled-state title on a non-disabled wrapper element (or switch this control to the same aria-disabled pattern used above).

                      onClick={projectId ? () => void handleRemove(projectId, attachment) : undefined}
                      disabled={!projectId}
                      aria-label={`${t("scoreRemove")}: ${attachment.fileName}`}
                      title={!projectId ? t("scoreRequiresProject") : `${t("scoreRemove")}: ${attachment.fileName}`}
                      className="size-10 border-rose-300/25 text-rose-200 hover:bg-rose-400/10"

    "numpy>=1.26",
+    "setuptools>=75.0.0",
    "soundfile>=0.13.1",
-            "urllib3>=2.7.0",
+    "urllib3>=2.7.0",
    "yt-dlp>=2026.6.9",


seonghobae · 2026-07-31T12:52:32Z

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 · 2026-07-31T12:52:34Z

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

google-labs-jules · 2026-07-31T12:55:21Z

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 · 2026-07-31T12:55:22Z

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

Acknowledged.

🎨 Palette: 접근성 및 UX 개선 - 비활성화 버튼 및 아이콘 버튼 툴팁 추가

abb4aae

Copilot AI review requested due to automatic review settings July 25, 2026 14:32

Copilot started reviewing on behalf of seonghobae July 25, 2026 14:33 View session

Copilot AI reviewed Jul 25, 2026

View reviewed changes

Comment thread apps/desktop/src/features/score/ScoreView.tsx

type="button"

onClick={projectId ? () => void openAttachment(projectId, attachment) : undefined}

disabled={!projectId}

onClick={projectId ? () => void openAttachment(projectId, attachment) : (e) => e.preventDefault()}

Copilot AI review requested due to automatic review settings July 25, 2026 15:09

Copilot started reviewing on behalf of seonghobae July 25, 2026 15:09 View session

Copilot AI reviewed Jul 25, 2026

View reviewed changes

seonghobae added 2 commits July 25, 2026 15:20

chore: 의존성 업데이트 및 trivy secret 탐지 문제 해결

87869b5

- `services/analysis-engine/uv.lock`의 setuptools 패키지 업그레이드를 통해 CVE-2026-59890 대응 - lockfile 동기화를 통해 trivy-fs 스캔 통과 확보

chore: pyproject.toml 의존성 제약 업데이트 (setuptools>=75.0.0)

0c26272

- services/analysis-engine/pyproject.toml에 setuptools 버전을 >=75.0.0으로 고정하여 취약점 방지 - uv lock 갱신으로 CI 스캔 통과 확보

Copilot AI review requested due to automatic review settings July 25, 2026 15:36

Copilot started reviewing on behalf of seonghobae July 25, 2026 15:37 View session

Copilot AI reviewed Jul 25, 2026

View reviewed changes

Comment thread services/analysis-engine/pyproject.toml

Comment on lines 14 to 18

"numpy>=1.26",

"setuptools>=75.0.0",

"soundfile>=0.13.1",

"urllib3>=2.7.0",

"urllib3>=2.7.0",

"yt-dlp>=2026.6.9",

seonghobae closed this Jul 31, 2026

Navigation Menu

Uh oh!

🎨 Palette: [UX improvement] 스코어 뷰어 내 아이콘 버튼 및 비활성화 상태 툴팁 개선 - #699

🎨 Palette: [UX improvement] 스코어 뷰어 내 아이콘 버튼 및 비활성화 상태 툴팁 개선#699
seonghobae wants to merge 4 commits into
developfrom
palette-ux-accessibility-tooltips-4854348697760410680

seonghobae commented Jul 25, 2026

Uh oh!

google-labs-jules Bot commented Jul 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

seonghobae commented Jul 31, 2026

Uh oh!

seonghobae commented Jul 31, 2026

Uh oh!

google-labs-jules Bot commented Jul 31, 2026

Uh oh!

google-labs-jules Bot commented Jul 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

seonghobae commented Jul 25, 2026

Uh oh!

google-labs-jules Bot commented Jul 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

seonghobae commented Jul 31, 2026

Uh oh!

seonghobae commented Jul 31, 2026

Uh oh!

google-labs-jules Bot commented Jul 31, 2026

Uh oh!

google-labs-jules Bot commented Jul 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants