Accessibility: Display a tooltip on toggle tip buttons to expose their accessible name

[i-am-chitti]

Trac ticket

https://core.trac.wordpress.org/ticket/65633

Summary

With no visible text label, a toggle tip's toggle button (from wp_get_toggletip()) exposes its accessible name only through aria-label. That name reaches assistive technologies but is invisible to sighted mouse and keyboard users, who get no on-hover or on-focus indication of what the button does.

A tooltip already shows a hover/focus popover surfacing its accessible name. This PR brings the same affordance to toggle tips, which was deferred as a "nice to have" in #51006.

Changes

• wp-includes/general-template.php — the toggle tip markup now also outputs a hint popover carrying the button's label:

  <span popover="hint" id="{id}-hint" class="wp-tooltip__bubble wp-tooltip__hint" aria-hidden="true">
      <span class="wp-tooltip__text">{label}</span>
  </span>
  It is aria-hidden on purpose — the button already announces its name via
  aria-label, so the hint stays purely visual and avoids a duplicate announcement.

• js/_enqueues/wp/wp-tooltip.js — shows the hint on mouseenter/focus and hides it on mouseleave/blur, mirroring the tooltip behaviour. The hint is suppressed while the toggle tip dialog is open, so the two never overlap.
• wp-admin/css/wp-tooltip.css — .wp-tooltip__hint reuses the tooltip bubble styling.
• tests/phpunit/tests/general/wpGetTooltip.php — added coverage for the hint markup, label duplication, and escaping.

Behaviour is unchanged for the tooltip type and for assistive technologies.

Testing instructions

1. Run npm run dev so the JS/CSS rebuild.
2. Open wp-login.php and locate the ? help icon next to the "Remember Me" checkbox.
3. Hover or Tab to the icon → a small "Help" tooltip appears after ~300ms; it hides on mouse-leave/blur.
4. Click the icon → the help dialog opens and the hint disappears (no overlap). Hovering the icon while the dialog is open does not re-show the hint.
5. Inspect the toggle button: it still has aria-label="Help", and the hint is aria-hidden="true" (a screen reader announces the name once, not twice).
6. Run the tests: npm run test:php -- --filter Tests_General_wpGetTooltip.

Screenshots

Related

• Follow-up to https://core.trac.wordpress.org/ticket/51006

[github-actions]

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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props iamchitti.

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

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.