Revisions: Add tooltip to diff marker buttons by himanshupathak95 · Pull Request #77690 · WordPress/gutenberg

himanshupathak95 · 2026-04-27T12:21:17Z

What?

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

Create a post with multiple revisions and enter the visual revisions view.
Enable Show changes (eye icon). Coloured bars appear in the right-hand minimap.
Hover any bar, and a tooltip should appear with the text "Go to added block", "Go to removed block", or "Go to modified block".
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 · 2026-04-28T05:30:59Z

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 <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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

t-hamano

Thanks for the PR!

Using the Button component creates an unnatural outline when the button is focused.

It should be possible to do it like this.

<Tooltip text={ STATUS_LABELS[ status ] }>
	<button />
</Tooltip>

Co-authored-by: Copilot <[email protected]>

t-hamano

LGTM!

* Replace button element with component * Add tooltip and default size Co-authored-by: Copilot <[email protected]> * Use component button label for tooltips Co-authored-by: Copilot <[email protected]> * Use tooltip component instead of <Button/> --------- Co-authored-by: himanshupathak95 <[email protected]> Co-authored-by: t-hamano <[email protected]>

github-actions · 2026-05-11T13:28:59Z

I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 0a6bb13

This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/branches/7.0@62360 602fd350-edb4-49c9-b593-d223f7449a82

This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/branches/7.0@62360 git-svn-id: http://core.svn.wordpress.org/branches/7.0@61641 1a063a9b-81f0-0310-95a4-ce76da25c4cd

This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: `git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy` Reviewed by desrosj. Merges [62360] to `trunk`. See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@62361 602fd350-edb4-49c9-b593-d223f7449a82

This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: `git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy` Reviewed by desrosj. Merges [62360] to `trunk`. See #64595. Built from https://develop.svn.wordpress.org/trunk@62361 git-svn-id: http://core.svn.wordpress.org/trunk@61642 1a063a9b-81f0-0310-95a4-ce76da25c4cd

github-actions Bot added the [Package] Editor /packages/editor label Apr 27, 2026

himanshupathak95 force-pushed the fix/77530-diff-marker-tooltip branch from 0c6c548 to 5a2f60d Compare April 28, 2026 05:25

himanshupathak95 marked this pull request as ready for review April 28, 2026 05:30

t-hamano added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] History History, undo, redo, revisions, autosave. labels May 11, 2026

t-hamano mentioned this pull request May 11, 2026

Visual Revisions: Accessibility #77530

Open

19 tasks

t-hamano force-pushed the fix/77530-diff-marker-tooltip branch from 5a2f60d to 91cd6fc Compare May 11, 2026 02:22

t-hamano reviewed May 11, 2026

View reviewed changes

t-hamano added the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label May 11, 2026

himanshupathak95 and others added 4 commits May 11, 2026 14:00

Replace button element with component

67b7d32

Add tooltip and default size

25b74ef

Co-authored-by: Copilot <[email protected]>

Use component button label for tooltips

b441933

Co-authored-by: Copilot <[email protected]>

Use tooltip component instead of <Button/>

f86bb4a

himanshupathak95 force-pushed the fix/77530-diff-marker-tooltip branch from 91cd6fc to f86bb4a Compare May 11, 2026 08:31

himanshupathak95 requested a review from t-hamano May 11, 2026 09:10

t-hamano approved these changes May 11, 2026

View reviewed changes

t-hamano merged commit 43901a2 into WordPress:trunk May 11, 2026
41 of 43 checks passed

github-actions Bot added this to the Gutenberg 23.2 milestone May 11, 2026

github-actions Bot removed the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label May 11, 2026

github-actions Bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label May 11, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revisions: Add tooltip to diff marker buttons #77690

Revisions: Add tooltip to diff marker buttons #77690
t-hamano merged 4 commits into
WordPress:trunkfrom
himanshupathak95:fix/77530-diff-marker-tooltip

himanshupathak95 commented Apr 27, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 28, 2026 •

edited

Loading

Uh oh!

t-hamano left a comment

Uh oh!

t-hamano left a comment

Uh oh!

Uh oh!

github-actions Bot commented May 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

himanshupathak95 commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Screenshots or screencast

Before

After

Uh oh!

github-actions Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented May 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

himanshupathak95 commented Apr 27, 2026 •

edited

Loading

github-actions Bot commented Apr 28, 2026 •

edited

Loading