![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 29 hours ago
Last modified 19 hours 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)
This ticket was mentioned in PR #12532 on WordPress/wordpress-develop by @iamchitti.
19 hours 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__hintreuses 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
- Run npm run dev so the JS/CSS rebuild.
- Open wp-login.php and locate the ? help icon next to the "Remember Me" checkbox.
- Hover or Tab to the icon → a small "Help" tooltip appears after ~300ms; it hides on mouse-leave/blur.
- 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.
- 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).
- Run the tests: npm run test:php -- --filter Tests_General_wpGetTooltip.
## Screenshots
Related
- Follow-up to https://core.trac.wordpress.org/ticket/51006
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 fromaria-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
tooltipalready 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 viaaria-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
tooltiptype and for assistive technologies.I'll open a PR shortly.