SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ♿ add missing aria states to pagination

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-18 16:19:14 +02:00
parent ee5c6ddaa0
commit 53f1a88fd6
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/layouts/postlist.njk
View file

@ -11,20 +11,20 @@ layout: base.njk
{{ content | safe }}
{% if pagination.pages.length > 1 %}
<nav>
<nav aria-label="Pagination">
<ol class="flex justify-center gap-2">
<li>
{% if page.url != pagination.href.first %}
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.first }}">{% lucide "chevron-first" %}</a>
{% else %}
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-first" %}</span>
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700" aria-disabled="true">{% lucide "chevron-first" %}</span>
{% endif %}
</li>
<li>
{% if pagination.href.previous %}
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.previous }}">{% lucide "chevron-left" %}</a>
{% else %}
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-left" %}</span>
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700" aria-disabled="true">{% lucide "chevron-left" %}</span>
{% endif %}
</li>
{%- for pageEntry in pagination.pages %}
@ -43,14 +43,14 @@ layout: base.njk
{% if pagination.href.next %}
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.next }}">{% lucide "chevron-right" %}</a>
{% else %}
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-right" %}</span>
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700" aria-disabled="true">{% lucide "chevron-right" %}</span>
{% endif %}
</li>
<li>
{% if page.url != pagination.href.last %}
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.last }}">{% lucide "chevron-last" %}</a>
{% else %}
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-last" %}</span>
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700" aria-disabled="true">{% lucide "chevron-last" %}</span>
{% endif %}
</li>
</ol>