diff --git a/src/js/_enqueues/wp/wp-tooltip.js b/src/js/_enqueues/wp/wp-tooltip.js index 5d9621c0a4e83..70fe2bfe7c1b2 100644 --- a/src/js/_enqueues/wp/wp-tooltip.js +++ b/src/js/_enqueues/wp/wp-tooltip.js @@ -14,8 +14,9 @@ let openTimeout; popovers.forEach( function( popover ) { - const trigger = /** @type {HTMLButtonElement|null} */ ( popover.querySelector( 'button.wp-tooltip__toggle' ) ); + const trigger = /** @type {HTMLButtonElement|HTMLAnchorElement|null} */ ( popover.querySelector( '.wp-tooltip__toggle' ) ); const panel = /** @type {HTMLSpanElement|null} */ ( popover.querySelector( 'span.wp-tooltip__bubble' ) ); + if ( ! trigger || ! panel ) { return; } diff --git a/src/wp-admin/css/wp-tooltip.css b/src/wp-admin/css/wp-tooltip.css index 04ac5cd131ea9..f09a1317cdea8 100644 --- a/src/wp-admin/css/wp-tooltip.css +++ b/src/wp-admin/css/wp-tooltip.css @@ -3,7 +3,6 @@ .wp-tooltip { display: inline-flex; align-items: center; - vertical-align: middle; } /* Toggle and close buttons. */ @@ -22,14 +21,14 @@ cursor: pointer; } -.wp-tooltip .wp-tooltip__toggle:hover, -.wp-tooltip .wp-tooltip__toggle:focus, +.wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled])) .wp-tooltip__toggle:hover, +.wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled])) .wp-tooltip__toggle:focus, .wp-tooltip .wp-tooltip__close:hover, .wp-tooltip .wp-tooltip__close:focus { color: var(--wp-admin-theme-color, #3858e9); } -.wp-tooltip .wp-tooltip__toggle:focus, +.wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled])) .wp-tooltip__toggle:focus, .wp-tooltip .wp-tooltip__close:focus { outline: 2px solid transparent; box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php index 764e904005fd4..bafd5f0904769 100644 --- a/src/wp-admin/includes/template.php +++ b/src/wp-admin/includes/template.php @@ -1372,10 +1372,10 @@ function do_meta_boxes( $screen, $context, $data_object ) { ++$i; // get_hidden_meta_boxes() doesn't apply in the block editor. $hidden_class = ( ! $screen->is_block_editor() && in_array( $box['id'], $hidden, true ) ) ? ' hide-if-js' : ''; - echo '
' . "\n"; + echo '
' . "\n"; echo '
'; - echo '

'; + echo '

'; if ( 'dashboard_php_nag' === $box['id'] ) { echo ''; echo '' . @@ -1397,40 +1397,35 @@ function do_meta_boxes( $screen, $context, $data_object ) { echo '
'; - echo ''; - echo ''; - - echo ''; - echo ''; - - echo ''; + $move_up_button = ''; + $move_up_args = array( + 'id' => $box['id'] . '-handle-order-higher-description', + 'button' => $move_up_button, + ); + echo wp_get_tooltip( __( 'Move up' ), $move_up_args ); + + $move_down_button = ''; + $move_down_args = array( + 'id' => $box['id'] . '-handle-order-lower-description', + 'button' => $move_down_button, + ); + echo wp_get_tooltip( __( 'Move down' ), $move_down_args ); + + $show_hide_button = ''; + $show_hide_args = array( + 'id' => $box['id'] . '-handlediv', + 'button' => $show_hide_button, + ); + echo wp_get_tooltip( __( 'Show or hide panel' ), $show_hide_args ); echo '
'; } diff --git a/src/wp-includes/general-template.php b/src/wp-includes/general-template.php index ab3977a496e82..29c30137e173d 100644 --- a/src/wp-includes/general-template.php +++ b/src/wp-includes/general-template.php @@ -373,7 +373,7 @@ function get_search_form( $args = array() ) { /** * Retrieves the markup for an accessible tooltip. * - * Returns a button with an accessible name popover. + * Returns a button with an accessible name popover hint. * * @since 7.1.0 * @@ -383,6 +383,8 @@ function get_search_form( $args = array() ) { * * @type string $id Unique ID for the popover element. Default is a * generated unique ID. + * @type string $button Existing `button` or `a` markup. Used instead of generated button. + * Default standard button HTML. * @type string $label Not used for tooltips. * @type string $close_label Not used for tooltips. * @type string $icon Dashicons icon class for the toggle button. @@ -399,12 +401,9 @@ function wp_get_tooltip( $content, $args = array() ) { } /** - * Retrieves the markup for an accessible tooltip or toggletip. + * Retrieves the markup for an accessible toggle tip. * - * Returns a button and either a hover/focus triggered tooltip popover or an action - * triggered toggle tip. Enqueue the `wp-tooltip` style and script where it is used. - * Tooltips are used to show the accessible name of a control. - * Toggletips are be used for longer supporting text explaining context. + * Returns a button and an action triggered toggle tip with `$content`. * * @since 7.1.0 * @@ -414,6 +413,8 @@ function wp_get_tooltip( $content, $args = array() ) { * * @type string $id Unique ID for the popover element. Default is a * generated unique ID. + * @type string $button Existing `button` markup. Used instead of generated button. + * Default standard button HTML. * @type string $label Accessible label for the toggle button. * Default 'Help', matching the default icon. * Ignored for tooltips. @@ -424,9 +425,9 @@ function wp_get_tooltip( $content, $args = array() ) { * @type string $class Additional class(es) for the wrapping element. * Default empty. * } - * @return string Tooltip HTML markup, or an empty string when no content is provided. + * @return string Toggletip HTML markup, or an empty string when no content is provided. */ -function wp_get_toggletip( $content, $args ) { +function wp_get_toggletip( $content, $args = array() ) { $args['type'] = 'toggletip'; return wp_get_tooltip_helper( $content, $args ); } @@ -447,6 +448,8 @@ function wp_get_toggletip( $content, $args ) { * * @type string $id Unique ID for the popover element. Default is a * generated unique ID. + * @type string $button Existing `button` or `a` markup. Used instead of generated button. + * Default standard button HTML. * @type string $label Accessible label for the toggle button. * Default 'Help', matching the default icon. * Ignored for tooltips. @@ -469,7 +472,8 @@ function wp_get_tooltip_helper( $content, $args = array() ) { } $defaults = array( - 'id' => '', + 'id' => wp_unique_id( 'wp-tooltip-' ), + 'button' => '', 'label' => __( 'Help' ), 'close_label' => __( 'Close' ), 'icon' => 'dashicons-editor-help', @@ -479,14 +483,43 @@ function wp_get_tooltip_helper( $content, $args = array() ) { $args = wp_parse_args( $args, $defaults ); - $id = '' !== $args['id'] ? $args['id'] : wp_unique_id( 'wp-tooltip-' ); - $classes = ( 'tooltip' === $args['type'] ) ? 'wp-tooltip wp-is-tooltip' : 'wp-tooltip wp-is-toggletip'; if ( '' !== $args['class'] ) { $classes .= ' ' . $args['class']; } - $icon = '' !== $args['icon'] ? ' ' . $args['icon'] : ''; + $icon = ( $args['icon'] ) ? trim( $args['icon'] ) : $defaults['icon']; + $id = ( $args['id'] ) ? $args['id'] : $defaults['id']; + $button = ( $args['button'] ) ? $args['button'] : $defaults['button']; + $processed = false; + $processor = new WP_HTML_Tag_Processor( $button ); + if ( true === $processor->next_tag( 'button' ) ) { + $processor->add_class( 'wp-tooltip__toggle' ); + if ( 'tooltip' !== $args['type'] ) { + $processor->set_attribute( 'popovertarget', '%2$s' ); + $processor->set_attribute( 'aria-haspopup', 'dialog' ); + } + $button = $processor->get_updated_html(); + $processed = true; + } else { + // Reset processor. + $processor = new WP_HTML_Tag_Processor( $button ); + if ( true === $processor->next_tag( 'a' ) && 'tooltip' === $args['type'] ) { + $processor->add_class( 'wp-tooltip__toggle' ); + $button = $processor->get_updated_html(); + $processed = true; + } + } + if ( ! $processed ) { + // Button HTML passed was not valid. + $processor = new WP_HTML_Tag_Processor( $defaults['button'] ); + $processor->add_class( 'wp-tooltip__toggle' ); + if ( 'tooltip' !== $args['type'] ) { + $processor->set_attribute( 'popovertarget', '%2$s' ); + $processor->set_attribute( 'aria-haspopup', 'dialog' ); + } + $button = $processor->get_updated_html(); + } /* * The markup only uses phrasing content so it is valid when nested @@ -498,11 +531,9 @@ function wp_get_tooltip_helper( $content, $args = array() ) { // Tooltips are only used to visually display labels. $label = wp_strip_all_tags( $content, true ); $markup = sprintf( - '' . - '' . - '' . + ' + ' . $button . ' + ' . '%5$s' . '' . '', @@ -519,11 +550,9 @@ function wp_get_tooltip_helper( $content, $args = array() ) { * attributes reproduce the accessible name and focus handling of the native element. */ $markup = sprintf( - '' . - '' . - '' . + ' + ' . $button . ' + ' . '%5$s' . '', + ) + ); + + $this->assertStringContainsString( 'aria-expanded="false"', $html, 'String contains attribute not supported in function.' ); + $this->assertStringNotContainsString( 'dashicons', $html, 'String does not contain content of default button.' ); + + $html2 = wp_get_tooltip( + 'Helpful text.', + array( + 'button' => 'Contains text', + ) + ); + + $this->assertStringContainsString( 'assertStringNotContainsString( ' 'About this field', + 'close_label' => 'Dismiss', + ); + $html = wp_get_toggletip( 'Helpful text.', $args ); $this->assertSame( 1, preg_match( '/id="(wp-tooltip-\d+)"/', $html, $matches ) );