Hide query loop pagination link arrows from assistive technology

[afercia]

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()

[kamig478]

I have fixed the issue and added those missing attributes

[kamig478]

Well, I have applied those missing attributes and patch is uploaded.

[kamig478]

Well, I have made changes to remove that extra white spaces ... Thanks

[zieladam]

@kamig478 Thank you for contributing! Your diff updates the function get_query_pagination_arrow three times, but other than that it looks good to me. I don't have any assistive software to test so I'm going to defer to @afercia and @joedolson 

[kamig478]

Well, I have uploaded the correct one this time ... Thank You

[sabernhardt]

Thanks for the update. Could you re-create attribute-added.56067-3.diff with tabs to indent the lines instead of spaces?

[kamig478]

Yes I have intended the file with tab and verified as well. Thank You

[kamig478]

@afercia @sabernhardt @zieladam @joedolson I have intended the code with tabs rather than spaces and here is the diff file URL https://core.trac.wordpress.org/attachment/ticket/56067/attribute-added.56067-4.diff
Thank You

[joedolson]

This is fine from the accessibility side. Would be good to get this fixed.

[costdev]

Refreshed to fix a "malformed" patch issue and to ensure indenting with tabs.

[costdev]

As mentioned in the bug scrub, the patch needed to be refreshed to ensure that tabs were used for indentation. While attempting to apply the patch to do this, I received "patch: malformed patch".

I've refreshed the patch to indent with tabs (Trac shows spaces, but you can apply the patch to see the tabs), and the refresh also resolves the malformed patch issue.

Marking for commit per the bug scrub discussion.

Additional props: @ryokuhi, @sabernhardt

[audrasjb]

Self assigning for final review.

Trac ticket: https://core.trac.wordpress.org/ticket/56067

[audrasjb]

The above PR refreshes the patch against trunk.

[audrasjb]

In 54138:

Editor: Hide query loop pagination link arrows from assistive technology.

This changeset adss an aria-hidden="true" attribute to the optional arrows/chevron characters to the Query Loop and to the Comments Query Loop blocks pagination links.

These characters are text, so they're read out by assistive technologies. For better accessibility, it's best to reduce noise for screen reader users and prevent them to be rendered, using the aria-hidden="true" attribute.

Follow-up to [52057].

Props afercia, sabernhardt, kamig478, zieladam, audrasjb, joedolson, costdev.
Fixes #56067.

Committed in https://core.trac.wordpress.org/changeset/54138

[milana_cap]

Can go into grouped dev note "Accessibility improvements"