From 19cc602fa21f90af0d8fb7ba5756e1e5e9dc295e Mon Sep 17 00:00:00 2001
From: Chris Hallberg <crhallberg@gmail.com>
Date: Mon, 15 Jun 2020 10:33:51 -0400
Subject: [PATCH] More accessible pagination/navigation controls (#1609)
- Incorporates improvements from #1586 and #1587.
- Moves next/prev navigation to a shared template to reduce redundancy.
---
.../templates/alphabrowse/home.phtml | 18 +++++--
.../templates/collection/view.phtml | 37 +------------
.../templates/collections/home.phtml | 21 +++++---
.../templates/record/prev-next.phtml | 52 +++++++++++++++++++
themes/bootstrap3/templates/record/view.phtml | 39 +-------------
.../templates/search/pagination.phtml | 30 ++++++++---
6 files changed, 106 insertions(+), 91 deletions(-)
create mode 100644 themes/bootstrap3/templates/record/prev-next.phtml
diff --git a/themes/bootstrap3/templates/alphabrowse/home.phtml b/themes/bootstrap3/templates/alphabrowse/home.phtml
index 372cc8cb61c..9773cb8ec17 100644
--- a/themes/bootstrap3/templates/alphabrowse/home.phtml
+++ b/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">«</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">«</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">»</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">»</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(); ?>
diff --git a/themes/bootstrap3/templates/collection/view.phtml b/themes/bootstrap3/templates/collection/view.phtml
index c457658ed82..d4f9c63195a 100644
--- a/themes/bootstrap3/templates/collection/view.phtml
+++ b/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">«</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">«</span> <?=$this->transEsc('Prev')?></a>
- </li>
- <?php else: ?>
- <?php if ($this->scrollData['firstRecord']): ?>
- <li class="disabled"><a href="#"><span aria-hidden="true">«</span> <?=$this->transEsc('First')?></a></li>
- <?php endif; ?>
- <li class="disabled"><a href="#"><span aria-hidden="true">«</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">»</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">»</span></a>
- </li>
- <?php endif; ?>
- <?php else: ?>
- <li class="disabled"><a href="#"><?=$this->transEsc('Next')?> <span aria-hidden="true">»</span></a></li>
- <?php if ($this->scrollData['lastRecord']): ?>
- <li class="disabled"><a href="#"><?=$this->transEsc('Last')?> <span aria-hidden="true">»</span></a></li>
- <?php endif; ?>
- <?php endif; ?>
- </ul>
+ <?=$this->render('record/prev-next.phtml'); ?>
<?php endif; ?>
<?=$this->record($this->driver)->getToolbar()?>
diff --git a/themes/bootstrap3/templates/collections/home.phtml b/themes/bootstrap3/templates/collections/home.phtml
index f220b1e66a9..928ef481ee8 100644
--- a/themes/bootstrap3/templates/collections/home.phtml
+++ b/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)?>&page=<?=urlencode($prevpage)?><?=$this->escapeHtmlAttr($filterString)?>"><span aria-hidden="true">«</span> <?=$this->transEsc('Prev')?></a></li>
+ <li><a href="<?=$this->url('collections-home')?>?from=<?=urlencode($from)?>&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">«</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)?>&page=<?=urlencode($nextpage)?><?=$this->escapeHtmlAttr($filterString)?>"><?=$this->transEsc('Next')?> <span aria-hidden="true">»</span></a></li>
+ <li><a href="<?=$this->url('collections-home')?>?from=<?=urlencode($from)?>&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">»</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 ?>
diff --git a/themes/bootstrap3/templates/record/prev-next.phtml b/themes/bootstrap3/templates/record/prev-next.phtml
new file mode 100644
index 00000000000..f683bb6c76a
--- /dev/null
+++ b/themes/bootstrap3/templates/record/prev-next.phtml
@@ -0,0 +1,52 @@
+<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>
diff --git a/themes/bootstrap3/templates/record/view.phtml b/themes/bootstrap3/templates/record/view.phtml
index a35ff7909c6..9d23d1a282f 100644
--- a/themes/bootstrap3/templates/record/view.phtml
+++ b/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">«</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">«</span> <?=$this->transEsc('Prev')?></a>
- </li>
- <?php else: ?>
- <?php if ($this->scrollData['firstRecord']): ?>
- <li class="disabled"><a href="#"><span aria-hidden="true">«</span> <?=$this->transEsc('First')?></a></li>
- <?php endif; ?>
- <li class="disabled"><a href="#"><span aria-hidden="true">«</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">»</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">»</span></a>
- </li>
- <?php endif; ?>
- <?php else: ?>
- <li class="disabled"><a href="#"><?=$this->transEsc('Next')?> <span aria-hidden="true">»</span></a></li>
- <?php if ($this->scrollData['lastRecord']): ?>
- <li class="disabled"><a href="#"><?=$this->transEsc('Last')?> <span aria-hidden="true">»</span></a></li>
- <?php endif; ?>
- <?php endif; ?>
- </ul>
+ <?=$this->render('record/prev-next.phtml'); ?>
<?php endif; ?>
<?=$this->record($this->driver)->getToolbar()?>
diff --git a/themes/bootstrap3/templates/search/pagination.phtml b/themes/bootstrap3/templates/search/pagination.phtml
index c1a7fd276b6..210bcb9b43e 100644
--- a/themes/bootstrap3/templates/search/pagination.phtml
+++ b/themes/bootstrap3/templates/search/pagination.phtml
@@ -1,26 +1,42 @@
<?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">«</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">»</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>
--
GitLab