Make WordPress Core

Opened 2 years ago

Closed 22 months ago

Last modified 21 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 2 years ago.
I have fixed the issue and added those missing attributes
attribute-added.56067-2.diff (3.6 KB) - added by kamig478 2 years ago.
Well, I have made changes to remove that extra white spaces ... Thanks
attribute-added.56067-3.diff (1.3 KB) - added by kamig478 2 years ago.
Well, I have uploaded the correct one this time ... Thank You
attribute-added.56067-4.diff (1.3 KB) - added by kamig478 2 years 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 22 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.


2 years ago

#2 @sabernhardt
2 years ago

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

@kamig478
2 years ago

I have fixed the issue and added those missing attributes

#3 @kamig478
2 years 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.


2 years ago

@kamig478
2 years ago

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

#5 @zieladam
2 years 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
2 years ago

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

#6 @sabernhardt
2 years ago

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

@kamig478
2 years ago

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

#7 @kamig478
2 years 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
2 years 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.


2 years ago

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


2 years ago

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


22 months ago

@costdev
22 months ago

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

#12 @costdev
22 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.


22 months ago

#14 @audrasjb
22 months ago

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

Self assigning for final review.

#16 @audrasjb
22 months ago

The above PR refreshes the patch against trunk.

#17 @audrasjb
22 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
21 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.


21 months ago

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


21 months ago

Note: See TracTickets for help on using tickets.