Forums

Pagelist Pagination controls need to be ADA compliant

Permalink
I am completing a fully ADA Compliant site. However, there is one issue I cannot figure out. I have a pagelist in the blog area of the site with Pagination at the bottom. There are arrows next to the "Previous" and "Next" buttons. I need to isolate those areas into an aria-hidden="true" span. I cannot for the life of me find the correct file. In the view I see 
<div  role="region" aria-label="pagination links" >
   <?php echo $pagination;?>
</div>


But, I cannot find the actual controls code to modify that.
 
mnakalay replied on at Permalink Reply
mnakalay
This tutorial should help you do that:https://documentation.concrete5.org/tutorials/styling-the-pagination...

Make sure you also read the comments as they provide additional info and pointers.
primead replied on at Permalink Reply
I came across that a while ago but it didn't lead me to the right spot. Here is what I am trying to accomplish....

Current rendered code...
<div class="ccm-pagination-wrapper">
   <ul class="pagination">
      <li class="prev disabled"><span>← Previous</span></li>
      <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
      <li><a href="/blog?ccm_paging_p=2">2</a></li>
      <li><a href="/blog?ccm_paging_p=3">3</a></li>
      <li><a href="/blog?ccm_paging_p=4">4</a></li>
      <li><a href="/blog?ccm_paging_p=5">5</a></li>
      <li><a href="/blog?ccm_paging_p=6">6</a></li>
      <li><a href="/blog?ccm_paging_p=7">7</a></li>
      <li><a href="/blog?ccm_paging_p=8">8</a></li>
      <li class="next"><a href="/blog?ccm_paging_p=2">Next →</a></li>
   </ul>
</div>


Needed...
<div class="ccm-pagination-wrapper">
   <ul class="pagination">
      <li class="prev disabled"><span><span aria-hidden="true">←</span> Previous</span></li>
      <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
      <li><a href="/blog?ccm_paging_p=2">2</a></li>
      <li><a href="/blog?ccm_paging_p=3">3</a></li>
      <li><a href="/blog?ccm_paging_p=4">4</a></li>
      <li><a href="/blog?ccm_paging_p=5">5</a></li>
      <li><a href="/blog?ccm_paging_p=6">6</a></li>
      <li><a href="/blog?ccm_paging_p=7">7</a></li>
      <li><a href="/blog?ccm_paging_p=8">8</a></li>
      <li class="next"><a href="/blog?ccm_paging_p=2">Next <span aria-hidden="true">→</span></a></li>
   </ul>
</div>


Basically, just pulling the arrows into their own <span> and hiding them to screen readers.