Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add aria labels to pagination #97

Open
davidhellmann opened this issue Jan 10, 2024 · 1 comment
Open

Add aria labels to pagination #97

davidhellmann opened this issue Jan 10, 2024 · 1 comment
Labels
A11y Enhancement New feature or request

Comments

@davidhellmann
Copy link
Owner

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

@davidhellmann davidhellmann added the Enhancement New feature or request label Jan 10, 2024
@iuscare
Copy link

iuscare commented Jan 10, 2024

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 %}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11y Enhancement New feature or request
Projects
Status: Backlog
Development

No branches or pull requests

2 participants