More accessible pagination/navigation controls (#1609)

- Incorporates improvements from #1586 and #1587.
- Moves next/prev navigation to a shared template to reduce redundancy.

themes/bootstrap3/templates/alphabrowse/home.phtml

@@ -19,15 +19,25 @@
 <?php ob_start(); ?>
   <ul class="pager">
     <?php if (isset($this->prevpage)): ?>
-      <li><a href="<?=$this->escapeHtmlAttr($this->url('alphabrowse-home', [], ['query' => $baseQuery + ['page' => $this->prevpage]]))?>"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('Prev')?></a></li>
+      <li>
+        <a href="<?=$this->escapeHtmlAttr($this->url('alphabrowse-home', [], ['query' => $baseQuery + ['page' => $this->prevpage]]))?>" aria-label="<?=$this->transEsc('page_prev')?>">
+          <i class="fa fa-angle-left" aria-hidden="true"></i>
+          <?=$this->transEsc('Prev')?>
+        </a>
+      </li>
     <?php else: ?>
-      <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('Prev')?></a></li>
+      <li class="disabled" aria-hidden="true"><i class="fa fa-angle-left"></i> <?=$this->transEsc('Prev')?></li>
     <?php endif; ?>
 
     <?php if (isset($this->nextpage)): ?>
-      <li><a href="<?=$this->escapeHtmlAttr($this->url('alphabrowse-home', [], ['query' => $baseQuery + ['page' => $this->nextpage]]))?>"><?=$this->transEsc('Next')?> <span aria-hidden="true">&raquo;</span></a></li>
+      <li>
+        <a href="<?=$this->escapeHtmlAttr($this->url('alphabrowse-home', [], ['query' => $baseQuery + ['page' => $this->nextpage]]))?>" aria-label="<?=$this->transEsc('page_next')?>">
+          <?=$this->transEsc('Next')?>
+          <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </a>
+      </li>
     <?php else: ?>
-      <li class="disabled"><a href="#"><?=$this->transEsc('Next')?> <span aria-hidden="true">&raquo;</span></a></li>
+      <li class="disabled" aria-hidden="true"><?=$this->transEsc('Next')?> <i class="fa fa-angle-right"></i></li>
     <?php endif; ?>
   </ul>
 <?php $pageLinks = ob_get_contents(); ?>

themes/bootstrap3/templates/collection/view.phtml

@@ -25,42 +25,7 @@
 ?>
 
 <?php if (isset($this->scrollData) && ($this->scrollData['previousRecord'] || $this->scrollData['nextRecord'])): ?>
-  <ul class="pager">
-    <?php if ($this->scrollData['previousRecord']): ?>
-      <?php if ($this->scrollData['firstRecord']): ?>
-        <li>
-          <a href="<?=$this->recordLink()->getUrl($this->scrollData['firstRecord'])?>" title="<?=$this->transEsc('First Search Result')?>" rel="nofollow"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('First')?></a>
-        </li>
-      <?php endif; ?>
-      <li>
-        <a href="<?=$this->recordLink()->getUrl($this->scrollData['previousRecord'])?>" title="<?=$this->transEsc('Previous Search Result')?>" rel="nofollow"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('Prev')?></a>
-      </li>
-    <?php else: ?>
-      <?php if ($this->scrollData['firstRecord']): ?>
-        <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('First')?></a></li>
-      <?php endif; ?>
-      <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('Prev')?></a></li>
-    <?php endif; ?>
-    <?=$this->transEsc('of_num_results', [
-      '%%position%%' => $this->localizedNumber($this->scrollData['currentPosition']),
-      '%%total%%' => $this->localizedNumber($this->scrollData['resultTotal'])
-    ]) ?>
-    <?php if ($this->scrollData['nextRecord']): ?>
-      <li>
-        <a href="<?=$this->recordLink()->getUrl($this->scrollData['nextRecord'])?>" title="<?=$this->transEsc('Next Search Result')?>" rel="nofollow"><?=$this->transEsc('Next')?> <span aria-hidden="true">&raquo;</span></a>
-      </li>
-      <?php if ($this->scrollData['lastRecord']): ?>
-        <li>
-          <a href="<?=$this->recordLink()->getUrl($this->scrollData['lastRecord'])?>" title="<?=$this->transEsc('Last Search Result')?>" rel="nofollow"><?=$this->transEsc('Last')?> <span aria-hidden="true">&raquo;</span></a>
-        </li>
-      <?php endif; ?>
-     <?php else: ?>
-      <li class="disabled"><a href="#"><?=$this->transEsc('Next')?> <span aria-hidden="true">&raquo;</span></a></li>
-      <?php if ($this->scrollData['lastRecord']): ?>
-        <li class="disabled"><a href="#"><?=$this->transEsc('Last')?> <span aria-hidden="true">&raquo;</span></a></li>
-      <?php endif; ?>
-    <?php endif; ?>
-  </ul>
+  <?=$this->render('record/prev-next.phtml'); ?>
 <?php endif; ?>
 
 <?=$this->record($this->driver)->getToolbar()?>

themes/bootstrap3/templates/collections/home.phtml

@@ -15,14 +15,14 @@
   <form class="form-inline" method="GET" action="<?=$this->url('collections-home')?>">
     <ul class="pager">
       <?php if (isset($prevpage)): ?>
-        <li><a href="<?=$this->url('collections-home')?>?from=<?=urlencode($from)?>&amp;page=<?=urlencode($prevpage)?><?=$this->escapeHtmlAttr($filterString)?>"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('Prev')?></a></li>
+        <li><a href="<?=$this->url('collections-home')?>?from=<?=urlencode($from)?>&amp;page=<?=urlencode($prevpage)?><?=$this->escapeHtmlAttr($filterString)?>" aria-label="<?=$this->transEsc('page_prev')?>"><i class="fa fa-angle-left" aria-hidden="true"></i> <?=$this->transEsc('Prev')?></a></li>
       <?php else: ?>
-        <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('Prev')?></a></li>
+        <li class="disabled" aria-hidden="true"><a href="#"><i class="fa fa-angle-left"></i> <?=$this->transEsc('Prev')?></a></li>
       <?php endif; ?>
       <?php if (isset($nextpage)): ?>
-        <li><a href="<?=$this->url('collections-home')?>?from=<?=urlencode($from)?>&amp;page=<?=urlencode($nextpage)?><?=$this->escapeHtmlAttr($filterString)?>"><?=$this->transEsc('Next')?> <span aria-hidden="true">&raquo;</span></a></li>
+        <li><a href="<?=$this->url('collections-home')?>?from=<?=urlencode($from)?>&amp;page=<?=urlencode($nextpage)?><?=$this->escapeHtmlAttr($filterString)?>" aria-label="<?=$this->transEsc('page_next')?>"><?=$this->transEsc('Next')?> <i class="fa fa-angle-right" aria-hidden="true"></i></a></li>
       <?php else: ?>
-        <li class="disabled"><a href="#"><?=$this->transEsc('Next')?> <span aria-hidden="true">&raquo;</span></a></li>
+        <li class="disabled"><a href="#"><?=$this->transEsc('Next')?> <i class="fa fa-angle-right"></i></a></li>
       <?php endif; ?>
       <input type="submit" class="btn btn-default" value="<?=$this->transEsc('Jump to')?>" />
       <input type="text" name="from" value="<?=$this->escapeHtmlAttr($from)?>" class="form-control" />
@@ -46,8 +46,10 @@
           }
         }
       ?>
-      <a href="<?=$this->escapeHtmlAttr($removalUrl)?>"><img src="<?=$this->imageLink('silk/delete.png')?>" alt="Delete"/></a>
-      <a href="<?=$this->escapeHtmlAttr($removalUrl)?>"><?=$this->escapeHtml($filter['displayText'])?></a>
+      <a href="<?=$this->escapeHtmlAttr($removalUrl)?>">
+        <i class="fa fa-trash" title="<?=$this->transEsc('Delete') ?>"></i>
+        <?=$this->escapeHtml($filter['displayText'])?>
+      </a>
     </li>
   <?php endforeach; ?>
   </ul>
@@ -55,7 +57,12 @@
 
 <ul class="pagination">
   <?php foreach ($letters as $letter): ?>
-    <li<?php if (strcasecmp($letter, $from) == 0): ?> class="active"<?php endif; ?>><a href="<?=$this->url('collections-home')?>?from=<?=urlencode($letter)?><?=$this->escapeHtmlAttr($filterString)?>"><?=$this->escapeHtml($letter)?></a></li>
+    <li<?php if (strcasecmp($letter, $from) == 0): ?> class="active" aria-current="page"<?php endif; ?>>
+      <a href="<?=$this->url('collections-home')?>?from=<?=urlencode($letter)?><?=$this->escapeHtmlAttr($filterString)?>"
+         aria-label="<?=$this->transEsc('page_num', ['%%page%%' => $letter]); ?>">
+        <?=$this->escapeHtml($letter)?>
+      </a>
+    </li>
   <?php endforeach; ?>
 </ul>
 <?=$pageLinks ?>

themes/bootstrap3/templates/record/prev-next.phtml

+<nav aria-label="<?=$this->transEsc('Search Results')?>">
+  <ul class="pager hidden-print">
+    <?php if ($this->scrollData['previousRecord']): ?>
+      <?php if ($this->scrollData['firstRecord']): ?>
+        <li role="none">
+          <a href="<?=$this->recordLink()->getUrl($this->scrollData['firstRecord'])?>" aria-label="<?=$this->transEsc('First Search Result')?>" rel="nofollow">
+            <i class="fa fa-angle-double-left" aria-hidden="true"></i>
+            <?=$this->transEsc('First')?>
+          </a>
+        </li>
+      <?php endif; ?>
+      <li role="none">
+        <a href="<?=$this->recordLink()->getUrl($this->scrollData['previousRecord'])?>" aria-label="<?=$this->transEsc('Previous Search Result')?>" rel="nofollow">
+          <i class="fa fa-angle-left" aria-hidden="true"></i>
+          <?=$this->transEsc('Prev')?>
+        </a>
+      </li>
+    <?php else: ?>
+      <?php if ($this->scrollData['firstRecord']): ?>
+        <li class="disabled" aria-hidden="true" role="none"><a href="#"><i class="fa fa-angle-double-left"></i> <?=$this->transEsc('First')?></a></li>
+      <?php endif; ?>
+      <li class="disabled" aria-hidden="true" role="none"><a href="#"><i class="fa fa-angle-left"></i> <?=$this->transEsc('Prev')?></a></li>
+    <?php endif; ?>
+
+    <?=$this->transEsc('of_num_results', [
+      '%%position%%' => $this->localizedNumber($this->scrollData['currentPosition']),
+      '%%total%%' => $this->localizedNumber($this->scrollData['resultTotal'])
+    ]) ?>
+
+    <?php if ($this->scrollData['nextRecord']): ?>
+      <li role="none">
+        <a href="<?=$this->recordLink()->getUrl($this->scrollData['nextRecord'])?>" aria-label="<?=$this->transEsc('Next Search Result')?>" rel="nofollow">
+          <?=$this->transEsc('Next')?>
+          <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </a>
+      </li>
+      <?php if ($this->scrollData['lastRecord']): ?>
+        <li role="none">
+          <a href="<?=$this->recordLink()->getUrl($this->scrollData['lastRecord'])?>" aria-label="<?=$this->transEsc('Last Search Result')?>" rel="nofollow">
+            <?=$this->transEsc('Last')?>
+            <i class="fa fa-angle-double-right" aria-hidden="true"></i>
+          </a>
+        </li>
+      <?php endif; ?>
+    <?php else: ?>
+      <li class="disabled" aria-hidden="true" role="none"><a href="#"><?=$this->transEsc('Next')?> <i class="fa fa-angle-right"></i></a></li>
+      <?php if ($this->scrollData['lastRecord']): ?>
+        <li class="disabled" aria-hidden="true" role="none"><a href="#"><?=$this->transEsc('Last')?> <i class="fa fa-angle-double-right"></i></a></li>
+      <?php endif; ?>
+    <?php endif; ?>
+  </ul>
+</nav>

themes/bootstrap3/templates/record/view.phtml

@@ -14,47 +14,12 @@
 
   // Set up breadcrumbs:
   $this->layout()->breadcrumbs = '<li>' . $this->searchMemory()->getLastSearchLink($this->transEsc('Search'), '', '</li> ') .
-    '<li class="active">' . $this->recordLink()->getBreadcrumb($this->driver) . '</li> ';
+    '<li class="active" aria-current="page">' . $this->recordLink()->getBreadcrumb($this->driver) . '</li> ';
   $this->layout()->title = $this->driver->getShortTitle();
 ?>
 
 <?php if (isset($this->scrollData) && ($this->scrollData['previousRecord'] || $this->scrollData['nextRecord'])): ?>
-  <ul class="pager hidden-print">
-    <?php if ($this->scrollData['previousRecord']): ?>
-      <?php if ($this->scrollData['firstRecord']): ?>
-        <li>
-          <a href="<?=$this->recordLink()->getUrl($this->scrollData['firstRecord'])?>" title="<?=$this->transEsc('First Search Result')?>" rel="nofollow"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('First')?></a>
-        </li>
-      <?php endif; ?>
-      <li>
-        <a href="<?=$this->recordLink()->getUrl($this->scrollData['previousRecord'])?>" title="<?=$this->transEsc('Previous Search Result')?>" rel="nofollow"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('Prev')?></a>
-      </li>
-    <?php else: ?>
-      <?php if ($this->scrollData['firstRecord']): ?>
-        <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('First')?></a></li>
-      <?php endif; ?>
-      <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('Prev')?></a></li>
-    <?php endif; ?>
-    <?=$this->transEsc('of_num_results', [
-      '%%position%%' => $this->localizedNumber($this->scrollData['currentPosition']),
-      '%%total%%' => $this->localizedNumber($this->scrollData['resultTotal'])
-    ]) ?>
-    <?php if ($this->scrollData['nextRecord']): ?>
-      <li>
-        <a href="<?=$this->recordLink()->getUrl($this->scrollData['nextRecord'])?>" title="<?=$this->transEsc('Next Search Result')?>" rel="nofollow"><?=$this->transEsc('Next')?> <span aria-hidden="true">&raquo;</span></a>
-      </li>
-      <?php if ($this->scrollData['lastRecord']): ?>
-        <li>
-          <a href="<?=$this->recordLink()->getUrl($this->scrollData['lastRecord'])?>" title="<?=$this->transEsc('Last Search Result')?>" rel="nofollow"><?=$this->transEsc('Last')?> <span aria-hidden="true">&raquo;</span></a>
-        </li>
-      <?php endif; ?>
-     <?php else: ?>
-      <li class="disabled"><a href="#"><?=$this->transEsc('Next')?> <span aria-hidden="true">&raquo;</span></a></li>
-      <?php if ($this->scrollData['lastRecord']): ?>
-        <li class="disabled"><a href="#"><?=$this->transEsc('Last')?> <span aria-hidden="true">&raquo;</span></a></li>
-      <?php endif; ?>
-    <?php endif; ?>
-  </ul>
+  <?=$this->render('record/prev-next.phtml'); ?>
 <?php endif; ?>
 
 <?=$this->record($this->driver)->getToolbar()?>

themes/bootstrap3/templates/search/pagination.phtml

 <?php if ($this->pageCount): ?>
-  <ul class="pagination">
+  <ul class="pagination" aria-label="<?=$this->transEsc('pagination_label')?>">
     <?php if (isset($this->previous)): ?>
       <?php if (!isset($this->options['disableFirst']) || !$this->options['disableFirst']): ?>
-        <li><a href="<?=$this->currentPath() . $this->results->getUrlQuery()->setPage(1)?>">[1]</a></li>
+        <li role="none">
+          <a href="<?=$this->currentPath() . $this->results->getUrlQuery()->setPage(1)?>" aria-label="<?=$this->transEsc('page_first')?>">[1]</a>
+        </li>
       <?php endif; ?>
-      <li><a class="page-prev" href="<?=$this->currentPath() . $this->results->getUrlQuery()->setPage($this->previous)?>"><span aria-hidden="true">&laquo;</span> <?=$this->transEsc('Prev')?></a></li>
+      <li role="none">
+        <a class="page-prev" href="<?=$this->currentPath() . $this->results->getUrlQuery()->setPage($this->previous)?>" aria-label="<?=$this->transEsc('page_prev')?>">
+          <i class="fa fa-angle-left" aria-hidden="true"></i>
+          <?=$this->transEsc('Prev')?>
+        </a>
+      </li>
     <?php endif; ?>
 
     <?php if (count($this->pagesInRange) > 1): ?>
       <?php foreach ($this->pagesInRange as $page): ?>
         <?php if ($page != $this->current): ?>
-          <li><a href="<?=$this->currentPath() . $this->results->getUrlQuery()->setPage($page)?>"><?=$page?></a></li>
+          <li role="none">
+            <a href="<?=$this->currentPath() . $this->results->getUrlQuery()->setPage($page)?>" aria-label="<?=$this->transEsc('page_no', ['%%page%%' => $page])?>"><?=$page?></a>
+          </li>
         <?php else: ?>
-          <li class="active" aria-current="page"><span><?=$page?></span></li>
+          <li role="none" class="active" aria-current="page"><span><?=$page?></span></li>
         <?php endif; ?>
       <?php endforeach; ?>
     <?php endif; ?>
 
     <?php if (isset($this->next)): ?>
-      <li><a class="page-next" href="<?=$this->currentPath() . $this->results->getUrlQuery()->setPage($this->next)?>"><?=$this->transEsc('Next');?> <span aria-hidden="true">&raquo;</span></a></li>
+      <li role="none">
+        <a class="page-next" href="<?=$this->currentPath() . $this->results->getUrlQuery()->setPage($this->next)?>" aria-label="<?=$this->transEsc('page_next')?>">
+          <?=$this->transEsc('Next');?>
+          <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </a>
+      </li>
       <?php if (!isset($this->options['disableLast']) || !$this->options['disableLast']): ?>
-        <li><a href="<?=$this->currentPath() . $this->results->getUrlQuery()->setPage($this->pageCount)?>">[<?=$this->pageCount?>]</a></li>
+        <li role="none">
+          <a href="<?=$this->currentPath() . $this->results->getUrlQuery()->setPage($this->pageCount)?>" aria-label="<?=$this->transEsc('page_last')?>">[<?=$this->pageCount?>]</a>
+        </li>
       <?php endif; ?>
     <?php endif; ?>
   </ul>