Skip to content

🎨 Palette: Add visual tooltips and accessible disabled states to ScoreViewer buttons - #1044

Closed
seonghobae wants to merge 1 commit into
developfrom
feat/scoreviewer-a11y-tooltips-15769188240691854333
Closed

🎨 Palette: Add visual tooltips and accessible disabled states to ScoreViewer buttons#1044
seonghobae wants to merge 1 commit into
developfrom
feat/scoreviewer-a11y-tooltips-15769188240691854333

Conversation

@seonghobae

@seonghobae seonghobae commented Aug 28, 2026

Copy link
Copy Markdown
Collaborator

πŸ’‘ What: Added title tooltips to icon-only buttons in ScoreViewer and ScoreView. Replaced the native disabled attribute with aria-disabled="true" on these components.

🎯 Why: Icon-only buttons lacking visual tooltips fail to convey their purpose to sighted mouse users (especially when disabled with generic icons like "coming soon"). Using the native disabled attribute removes interactive elements from the tab order, making it impossible for screen reader and keyboard-only users to discover the button or understand why it's unavailable (e.g., "Score requires an active project").

πŸ“Έ Before/After: Visual tooltips now appear on hover for Zoom In/Out, Previous/Next page, Attach, Open, and Remove buttons. Disabled buttons remain keyboard-focusable and announce their disabled state correctly.

β™Ώ Accessibility:

  • Sighted users receive hover context via title.
  • Keyboard users can focus disabled controls to discover their existence and state.
  • Screen readers announce the disabled state (aria-disabled="true") and read the explanatory tooltip (title).
  • Click events are explicitly intercepted via e.preventDefault() to mirror native disabled behavior securely.
  • Tests updated to verify e.defaultPrevented and 100% test coverage maintained.

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


Devin Review

@google-labs-jules

Copy link
Copy Markdown

πŸ‘‹ 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.

@coderabbitai

coderabbitai Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

Next included review available in 52 minutes.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

βš™οΈ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 460e1302-b042-4ae3-aeb2-713aaa31bddd

πŸ“₯ Commits

Reviewing files that changed from the base of the PR and between 749511c and 43cc678.

πŸ“’ Files selected for processing (6)
  • .Jules/palette.md
  • .jules/palette.md
  • apps/desktop/src/features/score/ScoreView.test.tsx
  • apps/desktop/src/features/score/ScoreView.tsx
  • apps/desktop/src/features/score/ScoreViewer.test.tsx
  • apps/desktop/src/features/score/ScoreViewer.tsx

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❀️ Share

Comment @coderabbitai help to get the list of available commands.

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 1 potential issue.

Devin Review

Comment on lines +144 to +145
aria-disabled={!projectId || isAttaching ? "true" : undefined}
title={!projectId ? t("scoreRequiresProject") : undefined}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ“ Info: Attach button has no tooltip while attaching

The attach Button sets title only when !projectId; when it is dimmed because isAttaching is true, no tooltip explains why it is unavailable. The label does change to "Attaching...", so impact is small.

Devin Review

Was this helpful? React with πŸ‘ or πŸ‘Ž to provide feedback.

Copy link
Copy Markdown
Collaborator Author

Closing this competing same-scope lane in favor of the existing canonical owner #1041 after a fresh exact-head comparison.

Evidence at close decision:

#1041 already owns the requested icon-only tooltip surface: localized title text for ScoreViewer zoom/fit controls and previous/next controls, plus the icon-only ScoreView remove action, while retaining native disabled semantics. Its focused regressions also preserve tooltip availability for disabled previous/remove controls via non-disabled hover wrappers.

#1044 does not contain unique required tooltip work that needs to be preserved before closure. Its additional changes broaden the task into a different disabled-control interaction contract (disabled β†’ aria-disabled + manual click cancellation) for attach/open/remove/pagination, and it also rewrites/deletes unrelated .Jules/.jules agent-learning history. That broadened behavior is not required to preserve #1041's buyer-visible tooltip outcome and should not become a competing owner lane.

The current Devin note on #1044 about the attaching-state tooltip therefore does not need a repair on this branch; any future disabled-state explanation change belongs on #1041 (or a separately accepted accessibility issue) after current-source verification and TDD.

No #1044 check or review result is transferred to #1041.

@seonghobae seonghobae closed this Aug 28, 2026
@google-labs-jules

Copy link
Copy Markdown

Closing this competing same-scope lane in favor of the existing canonical owner #1041 after a fresh exact-head comparison.

Evidence at close decision:

#1041 already owns the requested icon-only tooltip surface: localized title text for ScoreViewer zoom/fit controls and previous/next controls, plus the icon-only ScoreView remove action, while retaining native disabled semantics. Its focused regressions also preserve tooltip availability for disabled previous/remove controls via non-disabled hover wrappers.

#1044 does not contain unique required tooltip work that needs to be preserved before closure. Its additional changes broaden the task into a different disabled-control interaction contract (disabled β†’ aria-disabled + manual click cancellation) for attach/open/remove/pagination, and it also rewrites/deletes unrelated .Jules/.jules agent-learning history. That broadened behavior is not required to preserve #1041's buyer-visible tooltip outcome and should not become a competing owner lane.

The current Devin note on #1044 about the attaching-state tooltip therefore does not need a repair on this branch; any future disabled-state explanation change belongs on #1041 (or a separately accepted accessibility issue) after current-source verification and TDD.

No #1044 check or review result is transferred to #1041.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant