Make WordPress Core

Opened 12 months ago

Closed 9 months ago

Last modified 9 months ago

#56067 closed defect (bug) (fixed)

Hide query loop pagination link arrows from assistive technology

Reported by: afercia's profile afercia Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version: 5.9
Component: Editor Keywords: has-patch commit needs-dev-note
Focuses: accessibility Cc:

Description

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

Attachments (5)

attribute-added.56067.diff (2.5 KB) - added by kamig478 11 months ago.
I have fixed the issue and added those missing attributes
attribute-added.56067-2.diff (3.6 KB) - added by kamig478 11 months ago.
Well, I have made changes to remove that extra white spaces ... Thanks
attribute-added.56067-3.diff (1.3 KB) - added by kamig478 11 months ago.
Well, I have uploaded the correct one this time ... Thank You
attribute-added.56067-4.diff (1.3 KB) - added by kamig478 11 months ago.
Yes I have intended the file with tab and verified as well. Thank You
attribute-added.56067.5.diff (1.2 KB) - added by costdev 9 months ago.
Refreshed to fix a "malformed" patch issue and to ensure indenting with tabs.

Download all attachments as: .zip

Change History (26)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


12 months ago

#2 @sabernhardt
12 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 6.1

@kamig478
11 months ago

I have fixed the issue and added those missing attributes

#3 @kamig478
11 months ago

  • Keywords has-patch added; good-first-bug needs-patch removed

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

This ticket was mentioned in Slack in #core by kamig478. View the logs.


11 months ago

@kamig478
11 months ago

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

#5 @zieladam
11 months ago

@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
11 months ago

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

#6 @sabernhardt
11 months ago

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

@kamig478
11 months ago

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

#7 @kamig478
11 months ago

@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

#8 @joedolson
11 months ago

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

This ticket was mentioned in Slack in #accessibility by kamig478. View the logs.


11 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


10 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


9 months ago

@costdev
9 months ago

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

#12 @costdev
9 months ago

  • Keywords commit added

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

This ticket was mentioned in Slack in #accessibility by kamig478. View the logs.


9 months ago

#14 @audrasjb
9 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Self assigning for final review.

#16 @audrasjb
9 months ago

The above PR refreshes the patch against trunk.

#17 @audrasjb
9 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#19 @milana_cap
9 months ago

  • Keywords needs-dev-note added

Can go into grouped dev note "Accessibility improvements"

This ticket was mentioned in Slack in #core by annezazu. View the logs.


9 months ago

This ticket was mentioned in Slack in #core by costdev. View the logs.


9 months ago

Note: See TracTickets for help on using tickets.