What problem does this address?
The core the_comments_pagination() function displays a link to the previous comment, pagination, and a link to the next comment, wrapped in a nav element nav element with an aria-label attribute:
<nav class="navigation comments-pagination" aria-label="Comments pagination">
<h2 class="screen-reader-text">Comments pagination</h2>
<div class="nav-links">
<a class="prev page-numbers" href="http://localhost:8888/post-1/comment-page-1/#comments">« Previous</a>
<a class="page-numbers" href="http://localhost:8888/post-1/comment-page-1/#comments">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="http://localhost:8888/post-1/comment-page-3/#comments">3</a>
<a class="page-numbers" href="http://localhost:8888/post-1/comment-page-4/#comments">4</a>
<a class="next page-numbers" href="http://localhost:8888/post-1/comment-page-3/#comments">Next »</a>
</div>
</nav>On the other hand, the Comments Pagination block displays child blocks wrapped in a div element with no aria-label attribute:
<div class="wp-block-comments-pagination is-layout-flex wp-block-comments-pagination-is-layout-flex">
<a href="http://localhost:8888/post-1/comment-page-1/#comments" class="wp-block-comments-pagination-previous">Older Comments</a>
<div class="wp-block-comments-pagination-numbers">
<a class="page-numbers" href="http://localhost:8888/post-1/comment-page-1/#comments">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="http://localhost:8888/post-1/comment-page-3/#comments">3</a>
<a class="page-numbers" href="http://localhost:8888/post-1/comment-page-4/#comments">4</a>
</div>
<a href="http://localhost:8888/post-1/comment-page-3/#comments" class="wp-block-comments-pagination-next">Newer Comments</a>
</div>What is your proposed solution?
- Change the wrapper element from
div to nav.
- Add
aria-label="Comments pagination" to the wrapper element.
This approach is already implemented in the Query Pagination block:
|
$wrapper_attributes = get_block_wrapper_attributes( |
|
array( |
|
'aria-label' => __( 'Pagination' ), |
|
'class' => $classes, |
|
) |
|
); |
|
|
|
return sprintf( |
|
'<nav %1$s>%2$s</nav>', |
|
$wrapper_attributes, |
|
$content |
|
); |
What problem does this address?
The core
the_comments_pagination()function displays a link to the previous comment, pagination, and a link to the next comment, wrapped in a nav elementnavelement with anaria-labelattribute:On the other hand, the Comments Pagination block displays child blocks wrapped in a
divelement with noaria-labelattribute:What is your proposed solution?
divtonav.aria-label="Comments pagination"to the wrapper element.This approach is already implemented in the Query Pagination block:
gutenberg/packages/block-library/src/query-pagination/index.php
Lines 24 to 35 in 795734c