[wp-meta] [Making WordPress.org] #2549: Pagination may not be conveyed correctly

[Making WordPress.org]

#2549: Pagination may not be conveyed correctly
----------------------------+------------------
 Reporter:  anevins         |       Owner:
     Type:  defect          |      Status:  new
 Priority:  normal          |   Milestone:
Component:  Support Forums  |  Resolution:
 Keywords:                  |
----------------------------+------------------

Comment (by netweb):

 Replying to [ticket:2549 anevins]:
 > '''Current structure:'''
 >
 > {{{
 > <div class="bbp-pagination-links">
 >     <span class="page-numbers current">1</span>
 >     <a class="page-numbers" href="...">2</a>
 >     <span class="page-numbers dots">…</span>
 >     <a class="page-numbers" href="...">38,513</a>
 >     <a class="next page-numbers" href="...">→</a>
 > </div>
 > }}}

 Adding bbPress' "out of the box" format for reference::
 {{{
 #!text/html
 <div class="bbp-pagination">
     <div class="bbp-pagination-count">Viewing 1 topics - 1 through 1 (of 5
 total)</div>
     <div class="bbp-pagination-links"><span class="page-numbers
 current">1</span>
         <a class="page-numbers" href="http://example.com/forums/forum
 /category-forum/forum-forum/page/2/">2</a>
         <span class="page-numbers dots">…</span>
         <a class="page-numbers" href="http://example.com/forums/forum
 /category-forum/forum-forum/page/5/">5</a>
         <a class="next page-numbers" href="http://example.com/forums/forum
 /category-forum/forum-forum/page/2/">→</a>
     </div>
 </div>
 }}}


 The `Viewing 1 topics - 1 through 1 (of 5 total)` was removed from the
 wporg-support theme for performance reasons as part of r3895 and r3898

 ----

 Replying to [ticket:2549 anevins]:
 > '''Issues with current structure:'''
 > - The links are missing context. The numbered link text ("1" and "2") is
 not enough to easily identify where the links will lead to.
 > - I don't think the arrow character will be conveyed as the next
 paginated item to assistive technologies.
 >
 >
 > '''Suggested solution:'''
 > The pagination component could be restructured to use a navigation
 element. This should convey to people that links within this component are
 navigational links and represent pages in the website.
 >
 > '''Suggested structure:'''
 > HTML:
 >
 > {{{
 > <nav class="bbp-pagination-links" aria-label="Pages of topics">
 >   <ul>
 >     <li><span class="page-numbers current">1</span></li>
 >     <li><a class="page-numbers" href="...">2</a></li>
 >     <li><span class="page-numbers dots">…</span></li>
 >     <li><a class="page-numbers" href="...">38,513</a></li>
 >     <li>
 >       <a class="next page-numbers" href="...">
 >         →
 >         <span class="hidden">next</span>
 >       </a>
 >     </li>
 >   </ul>
 > </nav>
 > }}}
 > CSS:
 > {{{
 > .bbp-pagination-links li {
 >     display: block;
 >     float: left;
 > }
 >
 > .bbp-pagination-links .hidden {
 >     left: -999em;
 >     position: absolute;
 > }
 > }}}
 >
 > The value inside the 'aria-label' attribute could be changed to reflect
 something more accurate, but if this component is used in many places
 maybe it's good to keep it generic.

 Sounds good, we can achieve this using
 [https://codex.wordpress.org/Function_Reference/paginate_links
 paginate_links ] and adding `pagination-*.php` customised templates
 *
 https://bbpress.trac.wordpress.org/browser/trunk/src/templates/default/bbpress
 /pagination-replies.php
 *
 https://bbpress.trac.wordpress.org/browser/trunk/src/templates/default/bbpress
 /pagination-search.php
 *
 https://bbpress.trac.wordpress.org/browser/trunk/src/templates/default/bbpress
 /pagination-topics.php

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/2549#comment:1>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org