[wp-trac] [WordPress Trac] #56067: Hide query loop pagination link arrows from assistive technology

[WordPress Trac]

#56067: Hide query loop pagination link arrows from assistive technology
---------------------------+-----------------------------
 Reporter:  afercia        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Editor         |    Version:  5.9
 Severity:  normal         |   Keywords:  good-first-bug
  Focuses:  accessibility  |
---------------------------+-----------------------------
 The Query Loop block and the Comments Query Loop block include pagination
 links. The 'next' and 'previous' links within the pagination can
 optionally display arrows or chevron characters.

 These characters are just text. As such, they're read out by assistive
 technologies. For better accessibility, it's best to reduce noise for
 screen reader users and hide the arrows/chevrons by the means of an `aria-
 hidden="true"` attribute.

 Right now, these links are read out this way:

 {{{
 Next Page right arrow
 left arrow Previous Page
 }}}

 For the Comments pagination, that would be:

 {{{
 Newer Comments right arrow
 left arrow Older Comments
 }}}

 The HTML output can be inspected on the Twenty Twenty-Two theme. Example:

 {{{
 <span class="wp-block-query-pagination-next-arrow is-arrow-arrow">→</span>
 }}}

 Worth nothing that in the previous bundled themes, care has been taken to
 make sure these arrows are hidden from assistive technologies. For
 example:

 In Twenty Twenty, it's hidden by the means of an aria-hidden attribute:

 {{{
 <span aria-hidden="true">→</span>
 }}}

 In Twenty Twenty-One, the arrow is an SVG icon with an aria-hidden
 attribute:

 {{{
 <svg ... aria-hidden="true" role="img" focusable="false" ...
 }}}

 The functions that need to be changed are now in core in the file `src/wp-
 includes/blocks.php`. See:
 - `get_query_pagination_arrow()`
 - `get_comments_pagination_arrow()`

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56067>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform