Add an accessible tooltip mechanism, and use it for the "Remember Me" login tooltip ( #55343 & #51006 )#12212
Conversation
Add a reusable, accessible tooltip mechanism built on the native Popover API and CSS anchor positioning. wp_get_tooltip() returns a help toggle and an associated popover; the content is linked to the toggle with aria-describedby and is dismissable via Escape, a click outside, or a visible close button. Includes the wp-tooltip stylesheet and unit tests. See #51006.
Add a help tooltip next to the "Remember Me" checkbox on the login form, explaining the option and its security implications. The text is filterable via the login_remember_me_help_text filter. Built using wp_get_tooltip(). See #55343.
|
Hi there! 👋 Thank you for your contribution to WordPress! 💖 It looks like this is your first pull request to No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description. Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making. More information about how GitHub pull requests can be used to contribute to WordPress can be found in the Core Handbook. Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook. If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook. The Developer Hub also documents the various coding standards that are followed:
Thank you, |
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @AliMahmoudDev. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe 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
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
joedolson
left a comment
joedolson
left a comment
There was a problem hiding this comment.
As implemented, this is sort of halfway between being a tooltip and being a dialog. A tooltip shouldn't contain any interactive elements, but a dialog should automatically receive focus.
I think we need some clarity on what we're actually creating here.
If we're going to create a tooltip, then the popover should become visible on focus or hover, be dismissable using esc, space, or enter, and should not contain any interactive content (no links, no close button).
A screen reader user will have no reason to enter the popover; the feedback will be delivered on focus from the aria-describedby value; but keyboard users will have control over whether it's visible.
|
We discussed this in the accessibility bug scrub, and what we really have a need for is both a disclosure widget helper function and a tooltip helper function. A lot of the code would be common between them, so it makes sense to implement them together. The disclosure widget should require triggering to display the message, and the tooltip should appear on focus/hover. It should also be possible to use them both on the same control, as an icon to trigger a help disclosure may need to have a tooltip that indicates its accessible name. |
- Splits markup path to generate either a non-modal dialog or a tooltip - Adds JS to handle tooltips on focus/hover - Updates an out of date color - Changes outer element to a `div`, so `dialog` can be nested - Adds demos for both versions on login page, for testing
|
Regarding the 'tooltip' to visually expose the accessible name, I would consider to style it like the ones used in Gutenberg: black background and |
afercia
left a comment
afercia
left a comment
There was a problem hiding this comment.
LGTM for Beta 1.
I left two minor comments that can be addressed later.
|
|
||
| // Bind Hover and Focus Events. | ||
| trigger.addEventListener( 'mouseenter', showTooltip ); | ||
| trigger.addEventListener( 'focus', showTooltip ); |
There was a problem hiding this comment.
When it's a 'tooltip' it is still clickable, as in: hover and focus will reveal the tooltip. Pressing Enter / Spacebar or clicking it will toggle the tooltip. Maybe we should consider to prevent the click when it's a tooltip but this can be refined later after considering the desired behavior.
There was a problem hiding this comment.
Agree that this is best resolved later. I can see an argument for the click action still being supported. E.g., tab to focus, then hit esc to hide the popup, then want to see what the accessible name of the control is, because you've forgotten.
Add functions `wp_get_tooltip()` and `wp_get_toggletip()` to support adding these popover interfaces in the core admin. `wp_get_tooltip()` is used as mechanism to expose accessible names when a control has focus or hover, and `wp_get_toggletip()` implements a popover disclosure dialog to provide extended help information. Functions generate accessible markup, written to avoid excess verbosity for screen readers and apply best practices for voice command users as much as possible for icon-only controls. Add an initial implementation of a toggle tip to explain the 'remember me' option on the login screen. Developed in #12212 Props joedolson, oglekler, afercia, davidbaumwald, rajinsharwar, mukesh27, swissspidy, sirlouen, rutviksavsani, wildworks, ayazahmed12, generosus, sergeybiryukov. Fixes #51006, #55343. git-svn-id: https://develop.svn.wordpress.org/trunk@62741 602fd350-edb4-49c9-b593-d223f7449a82
Add functions `wp_get_tooltip()` and `wp_get_toggletip()` to support adding these popover interfaces in the core admin. `wp_get_tooltip()` is used as mechanism to expose accessible names when a control has focus or hover, and `wp_get_toggletip()` implements a popover disclosure dialog to provide extended help information. Functions generate accessible markup, written to avoid excess verbosity for screen readers and apply best practices for voice command users as much as possible for icon-only controls. Add an initial implementation of a toggle tip to explain the 'remember me' option on the login screen. Developed in WordPress/wordpress-develop#12212 Props joedolson, oglekler, afercia, davidbaumwald, rajinsharwar, mukesh27, swissspidy, sirlouen, rutviksavsani, wildworks, ayazahmed12, generosus, sergeybiryukov. Fixes #51006, #55343. Built from https://develop.svn.wordpress.org/trunk@62741 git-svn-id: http://core.svn.wordpress.org/trunk@62025 1a063a9b-81f0-0310-95a4-ce76da25c4cd
4 participants
Trac tickets:
Summary
#55343 needs a tooltip next to the Remember Me checkbox on
wp-login.php, and theticket history makes it dependent on #51006 (a reusable accessible-tooltip
mechanism). This PR resolves both together:
wp_get_tooltip()plus a
wp-tooltipstylesheet — built on the native Popover API + CSS anchorpositioning, matching the final direction agreed in #51006.
filterable copy.
Approach
Esc, light-dismiss, focusreturn — so there is no JavaScript to ship or maintain.
position-area: top) places the bubble above its toggle using thepopover's implicit anchor, so multiple tooltips on one page each anchor to their own toggle
with no per-instance IDs. Gated behind
@supports (anchor-name: --a).pointer (
wp-pointer.css).wp_get_tooltip( $content, $args )returns the markup (content-first signature, mirroringwp_get_admin_notice()); the login template echoes it. Single function, return-only — thesame shape as
wp_required_field_indicator().login_remember_me_help_text(return''to remove).Accessibility
Implements the accessible-tooltip specification from #51006 (comment #15) in full, and
targets WCAG 2.2:
role="tooltip",aria-haspopup, oraria-live.aria-describedbypointing to atext-only element, so the description is the help sentence and nothing else.
Esc, click-outside, and a visible close button that returns focus to thetrigger without re-opening it.
Escworks in every engine.outlineso focus staysvisible in Windows High Contrast / forced-colors mode (2.4.7).
titleattribute.Files changed
src/wp-includes/general-template.phpwp_get_tooltip()— returns accessible tooltip markup.src/wp-admin/css/wp-tooltip.csswp-tooltipcomponent stylesheet.src/wp-includes/script-loader.phpwp-tooltipstyle and makes theloginstyles depend on it.src/wp-login.phpwp_get_tooltip().tests/phpunit/tests/general/wpGetTooltip.phpwp_get_tooltip().Testing instructions
/wp-login.php.?help icon appears after "Remember Me". Click it (or focus + Enter) → tooltip opens withthe security copy.
×button,Esc, or clicking outside.Esccloses and focus returns to the icon.(not the word "Close"), and the bubble is not announced as a "tooltip".
npm run test:php -- --filter Tests_General_wpGetTooltip(7 tests).Screenshots
Tooltip open, captured on each real engine:
Chromium:
Safari / W
ebKit :
Firefox :
Use of AI Tools
AI assistance: Yes
Tool: Claude Code
Model: Opus 4.8 with 1M context
Used for: Initial code skeleton and unit tests; final implementation and tests were reviewed and edited by me.
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.