fix(pagination): improve accessibility of pagination component

use aria-label to provide more descriptive label for pagination page links

fix label content for previous/next links

use aria-current to highlight that the current page is selected

use ellipsis rather than three dots

fixes #161

src/moj/components/pagination/template.njk

@@ -1,29 +1,27 @@
-<nav class="moj-pagination {{- ' ' + params.classes if params.classes}}" aria-labelledby="pagination-label">
-
-  <p class="govuk-visually-hidden" id="pagination-label">Pagination navigation</p>
+<nav class="moj-pagination {{- ' ' + params.classes if params.classes}}" aria-label="Pagination navigation">
 
   <ul class="moj-pagination__list">
     {%- if params.previous %}
       <li class="moj-pagination__item  moj-pagination__item--prev">
-        <a class="moj-pagination__link" href="{{ params.previous.href }}">{{ params.previous.text }}<span class="govuk-visually-hidden"> set of pages</span></a>
+        <a class="moj-pagination__link" href="{{ params.previous.href }}">{{ params.previous.text }}<span class="govuk-visually-hidden"> page</span></a>
       </li>
     {% endif -%}
 
     {%- for item in params.items %}
       {%- if item.type == 'dots' %}
-        <li class="moj-pagination__item moj-pagination__item--dots">...</li>
+        <li class="moj-pagination__item moj-pagination__item--dots">…</li>
       {% else %}
         {%- if item.selected %}
-          <li class="moj-pagination__item moj-pagination__item--active">{{ item.text }}</li>
+          <li class="moj-pagination__item moj-pagination__item--active" aria-label="Page {{ item.text }} of {{ params.results.count }}" aria-current="page">{{ item.text }}</li>
         {% else %}
-          <li class="moj-pagination__item"><a class="moj-pagination__link" href="{{ item.href }}">{{ item.text }}</a></li>
+          <li class="moj-pagination__item"><a class="moj-pagination__link" href="{{ item.href }}" aria-label="Page {{ item.text }} of {{ params.results.count }}">{{ item.text }}</a></li>
         {% endif -%}
       {% endif -%}
     {% endfor -%}
 
     {%- if params.next %}
       <li class="moj-pagination__item  moj-pagination__item--next">
-        <a class="moj-pagination__link" href="{{ params.next.href }}">{{ params.next.text }}<span class="govuk-visually-hidden"> set of pages</span></a>
+        <a class="moj-pagination__link" href="{{ params.next.href }}">{{ params.next.text }}<span class="govuk-visually-hidden"> page</span></a>
       </li>
     {% endif -%}
   </ul>