Allow addition of aria-current="page" to current page element in paginate_links()

[GrahamArmfield]

Ticket #40359 aims to allow attributes to be added to links in navigation menus - including aria-current="page".

This ticket concerns the output created by paginate_links(). It would be useful to add the aria-current="page" attribute to the element representing the current page in the pagination list.

The aria-current attribute is a new ARIA attribute being introduced in ARIA 1.1 and its aim is to help assistive technology users (often screen readers) orientate themselves within a list of items. There are many possible values for this attribute, but the most appropriate here would be 'page'.

Further information on aria-current can be found at: ​https://www.w3.org/TR/wai-aria-1.1/#aria-current

Examples

Example output from current paginate_links:

<ul class='page-numbers'>
   <li><span class='page-numbers current'>1</span></li>
   <li><a class='page-numbers' href='http://blah.com/blog/page/2/'>2</a></li>
   <li><a class='page-numbers' href='http://blah.com/blog/page/3/'>3</a></li>
   <li><a class="next page-numbers" href="http://blah.com/blog/page/2/">Older &raquo;</a></li>
</ul>

Example enhanced with aria-current attribute:

<ul class='page-numbers'>
   <li><span class='page-numbers current' aria-current="page">1</span></li>
   <li><a class='page-numbers' href='http://blah.com/blog/page/2/'>2</a></li>
   <li><a class='page-numbers' href='http://blah.com/blog/page/3/'>3</a></li>
   <li><a class="next page-numbers" href="http://blah.com/blog/page/2/">Older &raquo;</a></li>
</ul>

[afercia]

+1

Related: #30421

aria-current support as of January 2017
​https://ljwatson.github.io/design-patterns/aria-current/

aria-current support landing in NVDA 2017.2
​https://www.nvaccess.org/post/nvda-2017-2rc1-released/

[afercia]

Moving to 4.8.1 as per today's accessibility bug-scrub.

[palmiak]

Added patch. As you said - aria-current="page" is the best choice.

#wcpl2017

[afercia]

Thanks @palmiak and #wcpl2017! Screenshots of a quick test with VoiceOver, using Twenty Seventeen:

posts pagination:

comments pagination:

Maybe just a couple concerns worth some consideration:

• the ARIA 1.1 spec seems to recommend to use aria-current on links within a set of pagination links, while here the element is a <span>; I guess it's okay since basically any element can indicate the "current thing" in a set of items
• an interesting consideration is if a theme is already using some visually hidden text with the word "Current", it should preferably be removed to avoid duplicated information, see this comment: ​https://tink.uk/using-the-aria-current-attribute#comment-6674 so I guess this change should be well communicated to theme authors

Any thoughts more than welcome.

Here'e a non-exhaustive list of places where paginate_links() is used in core that should be checked:

• posts pagination
• comments pagination
• old media upload modal pagination
• menus screen: list of "View all" posts, pages, etc. (displayed only when there are more than 50 items)

Worth noting there are several other places in core where the addition of aria-current would benefit users, it would be great to open separate tickets to cover all of these cases.

[afercia]

Plugins and themes might use paginate_links() to build custom paginations, for example in a checkout process or a wizard, so it should be possible to set the aria-current attribute to a value other than page. For example: step would be appropriate for a wizard. 40833.2.diff​ adds an aria_attribute argument that defaults to page and updates the tests.

[afercia]

Worth noting when themes use markup like the following (example from Twenty Fifteen):

<span aria-current="page" class="page-numbers current">
    <span class="meta-nav screen-reader-text">Page </span>2
</span>

there's a bit of repetition because aria-current="page" makes screen readers announce "Current page" and then they will read out also the markup "Page 2". A very minor issue, considering the important feedback given by aria-current.

[SergeyBiryukov]

40833.2.diff​ looks good to me.

[afercia]

40833.3.diff​ adds missing esc_attr().

[afercia]

In 41371:

Allow usage of aria-current in paginate_links().

The aria-current attribute is a simple, effective way to help assistive
technology users orientate themselves within a list of items.

Props GrahamArmfield, palmiak.
Fixes #40833.