Use <nav> with aria-label for Comments Pagination block to improve ac…

…cessibility
dhananjaykuber · Jul 10, 2024 · c67fdb8 · c67fdb8
1 parent ac01698
commit c67fdb8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js
@@ -83,7 +83,12 @@ export default function QueryPaginationEdit( {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			<div { ...innerBlocksProps } />
+			<nav { ...innerBlocksProps } aria-label={ __( 'Comments' ) }>
+				<span className="screen-reader-text">
+					{ __( 'Comments navigation' ) }
+				</span>
+				{ innerBlocksProps.children }
+			</nav>
 		</>
 	);
 }
diff --git a/packages/block-library/src/comments-pagination/index.php b/packages/block-library/src/comments-pagination/index.php
@@ -28,8 +28,10 @@ function render_block_core_comments_pagination( $attributes, $content ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
 	return sprintf(
-		'<div %1$s>%2$s</div>',
+		'<nav %1$s aria-label="%2$s"><span class="screen-reader-text">%3$s</span>%4$s</nav>',
 		$wrapper_attributes,
+		__( 'Comments' ),
+		__( 'Comments navigation' ),
 		$content
 	);
 }