Make WordPress Core

Opened 4 weeks ago

Last modified 4 weeks ago

#65633 new enhancement

Toggle tips should also display tooltips

Reported by: joedolson Owned by:
Priority: normal Milestone: Awaiting Review
Component: General Version: trunk
Severity: normal Keywords: has-patch has-unit-tests
Cc: Focuses: ui, accessibility, javascript

Description

With no visible text label, a toggle tip needs to also display a tooltip to expose its accessible name.

This was deemed a nice to have in #51006, but not critical for initial implementation, as it adds significant complexity.

Change History (3)

#1 @joedolson
4 weeks ago

  • Focuses ui javascript added

#2 @iamchitti
4 weeks ago

A toggle tip (as returned by wp_get_toggletip()) renders an icon-only toggle button with no visible text label. Its accessible name comes solely from aria-label, so it is exposed to assistive technologies but not to sighted mouse or keyboard users, who get no on-hover or on-focus indication of what the button does.

By contrast, a tooltip already shows a hover/focus popover that surfaces its accessible name. This ticket brings the same affordance to toggle tips, which was deemed a "nice to have" and deferred in #51006.

Proposed fix

Give the toggle button its own hover/focus hint that visually exposes the same accessible name, reusing the existing tooltip presentation. The hint is aria-hidden, since the button already announces its name via aria-label, so it stays purely visual and avoids a duplicate announcement. It is suppressed while the toggle tip dialog itself is open, so the two never overlap.

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

I'll open a PR shortly.

This ticket was mentioned in PR #12532 on WordPress/wordpress-develop by @iamchitti.


4 weeks ago
#3

  • Keywords has-patch has-unit-tests added

## 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: `html <span popover="hint" id="{id}-hint" class="wp-tooltipbubble wp-tooltiphint" aria-hidden="true">

<span class="wp-tooltiptext">{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

https://github.com/user-attachments/assets/39d440c4-8f9c-40f4-9536-1324dbd656bd

https://github.com/user-attachments/assets/14fef6b7-b185-4415-a14c-216cf94ff929

Related

Note: See TracTickets for help on using tickets.