Skip to content

UI: Add tooltips to Calendar and RangeCalendar navigation buttons - #81983

Merged
ciampo merged 5 commits into
trunkfrom
codex/calendar-navigation-tooltips
Aug 24, 2026
Merged

UI: Add tooltips to Calendar and RangeCalendar navigation buttons#81983
ciampo merged 5 commits into
trunkfrom
codex/calendar-navigation-tooltips

Conversation

@ciampo

@ciampo ciampo commented Aug 24, 2026

Copy link
Copy Markdown
Contributor

What?

Add visible tooltips to the previous and next month buttons in the Calendar and RangeCalendar components.

Why?

The icon-only navigation buttons have accessible labels, but sighted pointer and keyboard users cannot see those labels.

How?

Render the navigation controls with IconButton, using the existing localized navigation labels for both the accessible name and tooltip text. Use the compact button size with IconButton's default 24px chevron, and rotate the complete button in RTL layouts while preserving disabled behavior.

Testing Instructions

  1. Open the Design System/Components/Calendar/Calendar Default story in Storybook.
  2. Hover the previous and next month buttons. Confirm each button shows the matching tooltip and uses the default 24px chevron.
  3. Repeat these steps in the Design System/Components/Calendar/RangeCalendar Default story.
  4. Switch Storybook to an RTL locale. Confirm both chevrons point in the correct direction.

Testing Instructions for Keyboard

  1. In each story, press Tab until the previous month button receives focus. Confirm its tooltip appears.
  2. Press Tab again. Confirm the next month button receives focus and its tooltip appears.
  3. Press Enter on each button and confirm month navigation still works.

Screenshots or screencast

Screenshot 2026-08-24 at 16 05 01

Use of AI Tools

Codex was used to implement and test this change.

@github-actions github-actions Bot added the [Package] UI /packages/ui label Aug 24, 2026
@github-actions

github-actions Bot commented Aug 24, 2026

Copy link
Copy Markdown

Size Change: +151 B (0%)

Total Size: 7.9 MB

📦 View Changed
Filename Size Change
build/modules/boot/index.min.js 58.1 kB -5 B (-0.01%)
build/scripts/block-editor/index.min.js 475 kB +316 B (+0.07%)
build/scripts/block-library/index.min.js 359 kB +2 B (0%)
build/scripts/edit-post/index.min.js 52.7 kB +19 B (+0.04%)
build/scripts/edit-site/index.min.js 380 kB +8 B (0%)
build/scripts/editor/index.min.js 577 kB -319 B (-0.06%)
build/scripts/format-library/index.min.js 38.9 kB +10 B (+0.03%)
build/scripts/media-utils/index.min.js 198 kB +120 B (+0.06%)

compressed-size-action

@ciampo ciampo self-assigned this Aug 24, 2026
@ciampo ciampo added the [Type] Enhancement A suggestion for improvement. label Aug 24, 2026
@ciampo
ciampo marked this pull request as ready for review August 24, 2026 13:18
@ciampo
ciampo requested a review from a team as a code owner August 24, 2026 13:18
@github-actions

github-actions Bot commented Aug 24, 2026

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: ciampo <mciampini@git.wordpress.org>
Co-authored-by: simison <simison@git.wordpress.org>

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

@ciampo ciampo changed the title UI: Add tooltips to Calendar navigation buttons UI: Add tooltips to Calendar and RangeCalendar navigation buttons Aug 24, 2026
@simison

simison commented Aug 24, 2026

Copy link
Copy Markdown
Member
image

Copy feels a bit verbose for a tooltip — while it makes perfect sense for a11y text when you don't see the UI. What about "Next month"?

Longer a11y text I'd change to sentence case; "Go to the next month" as that I believe is the style we're moving towards in designs.

@ciampo

ciampo commented Aug 24, 2026

Copy link
Copy Markdown
Contributor Author

Copy feels a bit verbose for a tooltip — while it makes perfect sense for a11y text when you don't see the UI. What about "Next month"?

Longer a11y text I'd change to sentence case; "Go to the next month" as that I believe is the style we're moving towards in designs.

That label comes from default DayPicker, I'll look into passing a shorter one

@simison simison left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Sweet!

@ciampo

ciampo commented Aug 24, 2026

Copy link
Copy Markdown
Contributor Author

Well, it actually was already a first-party label 😅 In any case, I've shortened it as requested.

Thank you for the quick review!

@ciampo
ciampo force-pushed the codex/calendar-navigation-tooltips branch from ef7721e to c754587 Compare August 24, 2026 14:02
@ciampo
ciampo enabled auto-merge (squash) August 24, 2026 14:03
@ciampo
ciampo merged commit be1a0b5 into trunk Aug 24, 2026
60 checks passed
@ciampo
ciampo deleted the codex/calendar-navigation-tooltips branch August 24, 2026 14:40
@github-actions github-actions Bot added this to the Gutenberg 23.9 milestone Aug 24, 2026
@simison

simison commented Aug 24, 2026

Copy link
Copy Markdown
Member

I doubt we could rely only on 3rd party library strings anyway, since we need to get the strings into our (and consumers who bundle the UI library) translation pipelines. 🤔

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

Labels

[Package] UI /packages/ui [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants