Query Loop - Add accesibility markup at the end of the loop in all ca…

…ses. (#55890) * Use tagName if exists * Added a test using string positions, we could refactor * Refactor to use Tag Processor
WordPress · Nov 7, 2023 · 478ea73 · 478ea73
1 parent a3f6e95
commit 478ea73
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
@@ -44,7 +44,11 @@ function render_block_core_query( $attributes, $content, $block ) {
 			$block->block_type->supports['interactivity'] = true;
 
 			// Add a div to announce messages using `aria-live`.
-			$last_div_position = strripos( $content, '</div>' );
+			$html_tag = 'div';
+			if ( ! empty( $attributes['tagName'] ) ) {
+				$html_tag = esc_attr( $attributes['tagName'] );
+			}
+			$last_tag_position = strripos( $content, '</' . $html_tag . '>' );
 			$content           = substr_replace(
 				$content,
 				'<div
@@ -57,7 +61,7 @@ class="wp-block-query__enhanced-pagination-animation"
 					data-wp-class--start-animation="selectors.core.query.startAnimation"
 					data-wp-class--finish-animation="selectors.core.query.finishAnimation"
 				></div>',
-				$last_div_position,
+				$last_tag_position,
 				0
 			);
 		}

diff --git a/phpunit/blocks/render-query-test.php b/phpunit/blocks/render-query-test.php
@@ -131,6 +131,49 @@ public function test_rendering_query_with_enhanced_pagination_auto_disabled_when
 		$this->assertSame( 'true', $p->get_attribute( 'data-wp-navigation-disabled' ) );
 	}
 
+
+	/**
+	 * Tests that the `core/query` last tag is rendered with the tagName attribute
+	 * if is defined, having a div as default.
+	 */
+	public function test_enhanced_query_markup_rendering_at_bottom_on_custom_html_element_tags() {
+		global $wp_query, $wp_the_query;
+
+		$content = <<<HTML
+		<!-- wp:query {"queryId":0,"query":{"inherit":true},"tagName":"aside","enhancedPagination":true} -->
+		<aside class="wp-block-query">
+			<!-- wp:post-template {"align":"wide"} -->
+				<!-- wp:test/plugin-block /-->
+			<!-- /wp:post-template -->
+			<span>Helper to get last HTML Tag</span>
+		</aside>
+		<!-- /wp:query -->
+
+HTML;
+
+		// Set main query to single post.
+		$wp_query = new WP_Query(
+			array(
+				'posts_per_page' => 1,
+			)
+		);
+
+		$wp_the_query = $wp_query;
+
+		$output = do_blocks( $content );
+
+		$p = new WP_HTML_Tag_Processor( $output );
+
+		$p->next_tag( 'span' );
+
+		// Test that there is a div added just after the last tag inside the aside.
+		$this->assertSame( $p->next_tag(), true );
+		// Test that that div is the accesibility one.
+		$this->assertSame( 'screen-reader-text', $p->get_attribute( 'class' ) );
+		$this->assertSame( 'context.core.query.message', $p->get_attribute( 'data-wp-text' ) );
+		$this->assertSame( 'polite', $p->get_attribute( 'aria-live' ) );
+	}
+
 	/**
 	 * Tests that the `core/query` block adds an extra attribute to disable the
 	 * enhanced pagination in the browser when a post content block is found inside.