Merge branch 'WordPress:trunk' into trunk

Author: dd32

src/js/_enqueues/wp/wp-tooltip.js

@@ -8,7 +8,7 @@
  */
 (() => {
 
-	const popovers = /** @type {NodeListOf<HTMLDivElement>} */ ( document.querySelectorAll( '.wp-is-tooltip' ) );
+	const popovers = /** @type {NodeListOf<HTMLSpanElement>} */ ( document.querySelectorAll( '.wp-is-tooltip' ) );
 
 	/** @type {ReturnType<typeof setTimeout>} */
 	let openTimeout;

src/wp-includes/general-template.php

@@ -430,13 +430,14 @@ function wp_get_toggletip( $content, $args ) {
 	$args['type'] = 'toggletip';
 	return wp_get_tooltip_helper( $content, $args );
 }
+
 /**
  * Retrieves the markup for an accessible tooltip or toggletip.
  *
  * 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.
+ * Toggletips are used for longer supporting text explaining context.
  *
  * @since 7.1.0
  *
@@ -474,7 +475,6 @@ function wp_get_tooltip_helper( $content, $args = array() ) {
 		'icon'        => 'dashicons-editor-help',
 		'class'       => '',
 		'type'        => 'tooltip',
-		'attributes'  => array(),
 	);
 
 	$args = wp_parse_args( $args, $defaults );
@@ -488,37 +488,48 @@ function wp_get_tooltip_helper( $content, $args = array() ) {
 
 	$icon = '' !== $args['icon'] ? ' ' . $args['icon'] : '';
 
+	/*
+	 * The markup only uses phrasing content so it is valid when nested
+	 * in a phrasing context. Sectioning content (e.g. `div`, `dialog`) will
+	 * cause the parser to close an open `p`, creating an empty and breaking
+	 * the layout. See #65660.
+	 */
 	if ( 'tooltip' === $args['type'] ) {
 		// Tooltips are only used to visually display labels.
 		$label  = wp_strip_all_tags( $content, true );
 		$markup = sprintf(
-			'<div class="%1$s">' .
+			'<span class="%1$s">' .
 				'<button type="button" class="wp-tooltip__toggle" popovertarget="%2$s" aria-label="%3$s">' .
 					'<span class="dashicons%4$s" aria-hidden="true"></span>' .
 				'</button>' .
 				'<span popover="hint" id="%2$s" class="wp-tooltip__bubble" role="tooltip">' .
 					'<span id="%2$s-text" class="wp-tooltip__text">%5$s</span>' .
 				'</span>' .
-			'</div>',
+			'</span>',
 			esc_attr( $classes ),
 			esc_attr( $id ),
 			esc_attr( $label ),
 			esc_attr( $icon ),
 			esc_html( $content ),
 		);
 	} else {
+		/*
+		 * A `span` with `role="dialog"` is used instead of a `dialog` element to keep the
+		 * markup as phrasing content. The `aria-label`, `tabindex`, and `autofocus`
+		 * attributes reproduce the accessible name and focus handling of the native element.
+		 */
 		$markup = sprintf(
-			'<div class="%1$s">' .
+			'<span class="%1$s">' .
 				'<button type="button" class="wp-tooltip__toggle" popovertarget="%2$s" aria-label="%3$s" aria-haspopup="dialog">' .
 					'<span class="dashicons%4$s" aria-hidden="true"></span>' .
 				'</button>' .
-				'<dialog popover="auto" id="%2$s" class="wp-tooltip__bubble" autofocus>' .
+				'<span popover="auto" id="%2$s" class="wp-tooltip__bubble" role="dialog" aria-label="%3$s" tabindex="-1" autofocus>' .
 					'<span id="%2$s-text" class="wp-tooltip__text">%5$s</span>' .
 					'<button type="button" class="wp-tooltip__close" popovertarget="%2$s" popovertargetaction="hide" aria-label="%6$s">' .
 						'<span class="dashicons dashicons-no-alt" aria-hidden="true"></span>' .
 					'</button>' .
-				'</dialog>' .
-			'</div>',
+				'</span>' .
+			'</span>',
 			esc_attr( $classes ),
 			esc_attr( $id ),
 			esc_attr( $args['label'] ),

src/wp-includes/post.php

@@ -7961,10 +7961,11 @@ function clean_post_cache( $post ) {
  *
  * @since 1.5.0
  *
- * @param WP_Post[] $posts             Array of post objects (passed by reference).
- * @param string    $post_type         Optional. Post type. Default 'post'.
- * @param bool      $update_term_cache Optional. Whether to update the term cache. Default true.
- * @param bool      $update_meta_cache Optional. Whether to update the meta cache. Default true.
+ * @param WP_Post[]       $posts             Array of post objects (passed by reference).
+ * @param string|string[] $post_type         Optional. Single post type, 'any', or an array of post types.
+ *                                           Default 'post'.
+ * @param bool            $update_term_cache Optional. Whether to update the term cache. Default true.
+ * @param bool            $update_meta_cache Optional. Whether to update the meta cache. Default true.
  */
 function update_post_caches( &$posts, $post_type = 'post', $update_term_cache = true, $update_meta_cache = true ) {
 	// No point in doing all this work if we didn't match any posts.

tests/phpunit/tests/general/wpGetTooltip.php

@@ -114,4 +114,56 @@ public function test_wp_get_tooltip_generates_unique_id() {
 		$this->assertStringContainsString( 'popovertarget="' . $id . '"', $html );
 		$this->assertStringContainsString( 'id="' . $id . '-text"', $html );
 	}
+
+	/**
+	 * Tests that the markup consists only of phrasing content so it can be nested
+	 * inside a paragraph (or other phrasing context) without the parser closing
+	 * the enclosing element and leaving a stray empty paragraph behind.
+	 *
+	 * @ticket 65660
+	 *
+	 * @dataProvider data_tooltip_types
+	 *
+	 * @param string $type The tooltip type, 'tooltip' or 'toggletip'.
+	 */
+	public function test_wp_get_tooltip_markup_is_phrasing_content( $type ) {
+		$html = ( 'toggletip' === $type )
+			? wp_get_toggletip( 'Helpful text.', array( 'id' => 'my-tip' ) )
+			: wp_get_tooltip( 'Helpful text.', array( 'id' => 'my-tip' ) );
+
+		// The wrapper and popover must not use flow-content elements.
+		$this->assertStringNotContainsString( '<div', $html, 'The markup should not contain a div element.' );
+		$this->assertStringNotContainsString( '<dialog', $html, 'The markup should not contain a dialog element.' );
+
+		// The wrapper is an inline span.
+		$this->assertStringContainsString( '<span class="wp-tooltip ', $html );
+	}
+
+	/**
+	 * Tests that the toggletip popover preserves dialog semantics and focus
+	 * handling after moving away from the native dialog element.
+	 *
+	 * @ticket 65660
+	 */
+	public function test_wp_get_toggletip_bubble_uses_dialog_role_and_autofocus() {
+		$html = wp_get_toggletip( 'Helpful text.', array( 'id' => 'my-tip' ) );
+
+		// The bubble is a span popover exposing a dialog role.
+		$this->assertStringContainsString( '<span popover="auto" id="my-tip" class="wp-tooltip__bubble" role="dialog"', $html );
+
+		// Focus is moved into the popover when opened, matching the native dialog behavior.
+		$this->assertStringContainsString( 'tabindex="-1" autofocus>', $html );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array[]
+	 */
+	public function data_tooltip_types() {
+		return array(
+			'tooltip'   => array( 'tooltip' ),
+			'toggletip' => array( 'toggletip' ),
+		);
+	}
 }