diff --git a/src/js/_enqueues/wp/wp-tooltip.js b/src/js/_enqueues/wp/wp-tooltip.js index 35a320183240d..1775469989e22 100644 --- a/src/js/_enqueues/wp/wp-tooltip.js +++ b/src/js/_enqueues/wp/wp-tooltip.js @@ -42,3 +42,60 @@ trigger.addEventListener( 'blur', hideTooltip ); }); })(); + +/** + * Add focus and hover support for the toggle tip's hint in `wp_get_toggletip()`. + * + * A toggle tip has no visible text label, so a hover/focus hint exposes the + * toggle button's accessible name to sighted users. The hint is suppressed while + * the toggle tip dialog itself is open, so the two never overlap. + * This script can be made obsolete when support is available for Interest Invokers. + */ +(() => { + + const toggletips = document.querySelectorAll( '.wp-is-toggletip' ); + let openTimeout; + + toggletips.forEach( function( toggletip ) { + let trigger = toggletip.querySelector( 'button.wp-tooltip__toggle' ); + let hint = toggletip.querySelector( '.wp-tooltip__hint' ); + let dialog = toggletip.querySelector( 'dialog.wp-tooltip__bubble' ); + + if ( ! trigger || ! hint ) { + return; + } + + // Show Hint Function (with delay to prevent flickering). + const showHint = () => { + clearTimeout( openTimeout ); + openTimeout = setTimeout( () => { + // Don't show the hint over an open toggle tip dialog. + if ( dialog && dialog.matches( ':popover-open' ) ) { + return; + } + // Only show if it's not already open. + if ( ! hint.matches( ':popover-open' ) ) { + // pass the triggering element so implicit position anchors work. + hint.showPopover( { source: trigger } ); + } + }, 300 ); + }; + // Hide Hint Function. + const hideHint = () => { + clearTimeout( openTimeout ); + if ( hint.matches( ':popover-open' ) ) { + hint.hidePopover(); + } + }; + + // Bind Hover and Focus Events. + trigger.addEventListener( 'mouseenter', showHint ); + trigger.addEventListener( 'focus', showHint ); + + trigger.addEventListener( 'mouseleave', hideHint ); + trigger.addEventListener( 'blur', hideHint ); + + // Hide the hint as soon as the toggle tip is opened. + trigger.addEventListener( 'click', hideHint ); + }); +})(); diff --git a/src/wp-admin/css/wp-tooltip.css b/src/wp-admin/css/wp-tooltip.css index 04ac5cd131ea9..efc6ef8e1d6cf 100644 --- a/src/wp-admin/css/wp-tooltip.css +++ b/src/wp-admin/css/wp-tooltip.css @@ -64,7 +64,8 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } -.wp-tooltip.wp-is-tooltip .wp-tooltip__bubble { +.wp-tooltip.wp-is-tooltip .wp-tooltip__bubble, +.wp-tooltip .wp-tooltip__hint { background: #000; color: #f0f0f0; text-align: center; @@ -72,7 +73,7 @@ line-height: 1.4; } -.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__text { +.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint) .wp-tooltip__text { display: block; padding-inline-end: 24px; } @@ -91,13 +92,14 @@ position-try-fallbacks: flip-block, flip-inline; } - .wp-tooltip.wp-is-tooltip .wp-tooltip__bubble { + .wp-tooltip.wp-is-tooltip .wp-tooltip__bubble, + .wp-tooltip .wp-tooltip__hint { margin: 0; } /* Arrow: gray border (::before) under a white fill (::after). */ - .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before, - .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after { + .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::before, + .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::after { content: ""; position: absolute; top: 100%; @@ -108,12 +110,12 @@ border-bottom: 0; } - .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before { + .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::before { margin-left: -8px; border-top-color: #c3c4c7; } - .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after { + .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::after { margin-left: -7px; border-width: 7px; border-bottom: 0; diff --git a/src/wp-includes/general-template.php b/src/wp-includes/general-template.php index 36f3db3beba10..ef374cb72e9e1 100644 --- a/src/wp-includes/general-template.php +++ b/src/wp-includes/general-template.php @@ -512,6 +512,9 @@ function wp_get_tooltip_helper( $content, $args = array() ) { '' . + '' . '' . '%5$s' . '