Skip to content

Revisions: Add tooltip to diff marker buttons #77690

Open
himanshupathak95 wants to merge 3 commits intoWordPress:trunkfrom
himanshupathak95:fix/77530-diff-marker-tooltip
Open

Revisions: Add tooltip to diff marker buttons #77690
himanshupathak95 wants to merge 3 commits intoWordPress:trunkfrom
himanshupathak95:fix/77530-diff-marker-tooltip

Conversation

@himanshupathak95
Copy link
Copy Markdown
Contributor

@himanshupathak95 himanshupathak95 commented Apr 27, 2026

What?

Part of #77530

Replaces the raw <button> elements in the diff markers minimap with the <Button> component, adding label and showTooltip props.

Why?

Diff marker buttons had no visible tooltip, and sighted users hovering the minimap received no textual information about what the coloured bar represents.

How?

label on <Button> sets aria-label and renders visible text when the user has "text only buttons" enabled. showTooltip ensures the Gutenberg <Tooltip> always appears on hover with the same label text ("Go to added block", "Go to removed block", "Go to modified block").

Testing Instructions

  1. Create a post with multiple revisions and enter the visual revisions view.
  2. Enable Show changes (eye icon). Coloured bars appear in the right-hand minimap.
  3. Hover any bar, and a tooltip should appear with the text "Go to added block", "Go to removed block", or "Go to modified block".
  4. Verfiy the aria-labels stay intact and as expected.

Screenshots or screencast

Before

Screen.Recording.2026-04-28.at.10.37.34.mov

After

Screen.Recording.2026-04-28.at.10.51.30.mov

@github-actions github-actions Bot added the [Package] Editor /packages/editor label Apr 27, 2026
himanshupathak95 and others added 3 commits April 28, 2026 10:38
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
@himanshupathak95 himanshupathak95 force-pushed the fix/77530-diff-marker-tooltip branch from 0c6c548 to 5a2f60d Compare April 28, 2026 05:25
@himanshupathak95 himanshupathak95 marked this pull request as ready for review April 28, 2026 05:30
@github-actions
Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: [Package] Editor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

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

Labels

[Package] Editor /packages/editor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant