Add aria labels to pagination

[davidhellmann]

https://www.a11ymatters.com/pattern/pagination/

[iuscare]

PR incoming with the following markup. Maybe we can make the aria labels dynamic with defaults or we simply use the |t filter.

{% if pageInfo and entries and page and pageInfo.totalPages > 1 %}
  <nav aria-label="Pagination">
    <div class="flex justify-center items-center">
      {% if entries %}
        {% if page > 1 %}
          {# Previous Page Button #}
          <button class="flex bg-primary text-white px-2 py-2 rounded-full"
                  aria-label="Previous page"
                  sprig
                  s-val:page="{{ page - 1 }}"
                  s-push-url="/{{ entryUri }}/{{ craft.app.config.general.pageTrigger }}{{ page - 1 }}">
            <!-- Include PREV ICON here -->
          </button>
        {% endif %}

        <div role="navigation" aria-label="Page navigation">
          {# Page Numbers #}
          {% if pageInfo.totalPages <= 6 %}
            {# All Page Numbers #}
            {% for i in 1..pageInfo.totalPages %}
              {% if i == page %}
                <span class="inline-block bg-white border-2 border-primary w-9 h-9 text-primary font-sans-medium text-center rounded-full"
                      aria-current="page">
                  {{ i }}
                </span>
              {% else %}
                <a class="cursor-pointer inline-block bg-white border-2 border-transparent w-9 h-9 text-primary text-center rounded-full"
                   sprig
                   s-val:page="{{ i }}"
                   s-push-url="/{{ entryUri }}/{{ craft.app.config.general.pageTrigger }}{{ i }}">
                  {{ i }}
                </a>
              {% endif %}
            {% endfor %}
          {% else %}
            {# Partial Page Numbers with Ellipses #}
            {% set range = pageInfo.getRange(pageInfo.currentPage - 2, pageInfo.currentPage + 2) %}
            {% if (range|first) != 1 %}
              <a class="cursor-pointer inline-block bg-white border-2 border-transparent w-9 h-9 text-primary text-center rounded-full"
                 sprig
                 s-val:page="1"
                 s-push-url="/{{ entryUri }}/{{ craft.app.config.general.pageTrigger }}1">
                1
              </a>
              {% if (range|first) > 2 %}
                <span aria-hidden="true">...</span>
              {% endif %}
            {% endif %}
            {% for i in (range|first)..(range|last) %}
              {% if i == page %}
                <span class="inline-block bg-white border-2 border-primary w-9 h-9 text-primary font-sans-medium text-center rounded-full"
                      aria-current="page">
                  {{ i }}
                </span>
              {% else %}
                <a class="cursor-pointer inline-block bg-white border-2 border-transparent w-9 h-9 text-primary text-center rounded-full"
                   sprig
                   s-val:page="{{ i }}"
                   s-push-url="/{{ entryUri }}/{{ craft.app.config.general.pageTrigger }}{{ i }}">
                  {{ i }}
                </a>
              {% endif %}
            {% endfor %}
            {% if (range|last) < pageInfo.totalPages - 2 %}
              <span aria-hidden="true">...</span>
              <a class="cursor-pointer inline-block bg-white border-2 border-transparent w-9 h-9 text-primary text-center rounded-full"
                 sprig
                 s-val:page="{{ pageInfo.totalPages }}"
                 s-push-url="/{{ entryUri }}/{{ craft.app.config.general.pageTrigger }}{{ pageInfo.totalPages }}">
                {{ pageInfo.totalPages }}
              </a>
            {% endif %}
          {% endif %}
        </div>

        {% if page < pageInfo.totalPages %}
          {# Next Page Button #}
          <button class="flex bg-primary text-white px-2 py-2 rounded-full"
                  aria-label="Next page"
                  sprig
                  s-val:page="{{ page + 1 }}"
                  s-push-url="/{{ entryUri }}/{{ craft.app.config.general.pageTrigger }}{{ page + 1 }}">
            <!-- Include NEXT ICON here -->
          </button>
        {% endif %}
      {% endif %}
    </div>
  </nav>

  {% if sprig.isRequest %}
    <script>
      window.scrollTo({ top: 0, left: 0, behavior: 'smooth', });
    </script>
  {% endif %}
{% endif %}