Skip to content

Commit 69cf317

Browse files
woothuwoothu
committed
refactor: add nav wrapper to pagination, change aria:
- set aria attributes accordingly to bootstrap docs,
1 parent fdfcdce commit 69cf317

File tree

2 files changed

+300
-297
lines changed

2 files changed

+300
-297
lines changed

‎src/components/Pagination/CPagination.vue

Lines changed: 74 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,84 @@
11
<template>
2-
<ul
3-
:class="computedClasses"
4-
role="menubar"
5-
aria-disabled="false"
6-
aria-label="pagination"
7-
>
8-
<li v-if="!hideDoubleArrows" :class="backArrowsClasses">
9-
<CLink
10-
class="page-link"
11-
@click="setPage(1)"
12-
:disabled="activePage === 1"
13-
aria-label="Go to first page"
2+
<nav aria-label="pagination">
3+
<ul :class="computedClasses">
4+
<li v-if="!hideDoubleArrows" :class="backArrowsClasses">
5+
<CLink
6+
class="page-link"
7+
@click="setPage(1)"
8+
:disabled="activePage === 1"
9+
aria-label="Go to first page"
10+
:aria-disabled="activePage === 1"
11+
>
12+
<span v-html="firstButtonHtml"></span>
13+
</CLink>
14+
</li>
15+
<li v-if="!hideArrows" :class="backArrowsClasses">
16+
<CLink
17+
class="page-link"
18+
@click="setPage(activePage - 1)"
19+
:disabled="activePage === 1"
20+
aria-label="Go to previous page"
21+
:aria-disabled="activePage === 1"
22+
>
23+
<span v-html="previousButtonHtml"></span>
24+
</CLink>
25+
</li>
26+
<li
27+
v-if="beforeDots"
28+
role="separator"
29+
class="page-item disabled"
1430
>
15-
<span v-html="firstButtonHtml"></span>
16-
</CLink>
17-
</li>
18-
<li v-if="!hideArrows" :class="backArrowsClasses">
19-
<CLink
20-
class="page-link"
21-
@click="setPage(activePage - 1)"
22-
:disabled="activePage === 1"
23-
aria-label="Go to previous page"
24-
>
25-
<span v-html="previousButtonHtml"></span>
26-
</CLink>
27-
</li>
28-
<li
29-
v-if="beforeDots"
30-
role="separator"
31-
class="page-item disabled"
32-
>
33-
<span class="page-link">…</span>
34-
</li>
31+
<span class="page-link">…</span>
32+
</li>
3533

36-
<li
37-
v-for="(item, index) in items"
38-
:key="index"
39-
:class="[{ 'active': activePage === item }, 'page-item']"
40-
>
41-
<CLink
42-
class="page-link"
43-
@click="setPage(item)"
44-
:aria-label="`Go to page ${item}`"
34+
<li
35+
v-for="(item, index) in items"
36+
:key="index"
37+
:class="[{ 'active': activePage === item }, 'page-item']"
4538
>
46-
{{item}}
47-
</CLink>
48-
</li>
39+
<CLink
40+
class="page-link"
41+
@click="setPage(item)"
42+
:aria-label="`Go to page ${item}`"
43+
>
44+
{{item}}
45+
</CLink>
46+
</li>
4947

50-
<li
51-
v-if="afterDots"
52-
role="separator"
53-
class="page-item disabled"
54-
>
55-
<span class="page-link">…</span>
56-
</li>
57-
<li
58-
v-if="!hideArrows"
59-
:class="nextArrowsClasses"
60-
>
61-
<CLink
62-
class="page-link"
63-
@click="setPage(activePage + 1)"
64-
:disabled="activePage === pages"
65-
aria-label="Go to next page"
48+
<li
49+
v-if="afterDots"
50+
role="separator"
51+
class="page-item disabled"
6652
>
67-
<span v-html="nextButtonHtml"></span>
68-
</CLink>
69-
</li>
70-
<li v-if="!hideDoubleArrows" :class="nextArrowsClasses">
71-
<CLink
72-
class="page-link"
73-
@click="setPage(pages)"
74-
:disabled="activePage === pages"
75-
aria-label="Go to last page"
53+
<span class="page-link">…</span>
54+
</li>
55+
<li
56+
v-if="!hideArrows"
57+
:class="nextArrowsClasses"
7658
>
77-
<span v-html="lastButtonHtml"></span>
78-
</CLink>
79-
</li>
80-
</ul>
59+
<CLink
60+
class="page-link"
61+
@click="setPage(activePage + 1)"
62+
:disabled="activePage === pages"
63+
aria-label="Go to next page"
64+
:aria-disabled="activePage === pages"
65+
>
66+
<span v-html="nextButtonHtml"></span>
67+
</CLink>
68+
</li>
69+
<li v-if="!hideDoubleArrows" :class="nextArrowsClasses">
70+
<CLink
71+
class="page-link"
72+
@click="setPage(pages)"
73+
:disabled="activePage === pages"
74+
aria-label="Go to last page"
75+
:aria-disabled="activePage === pages"
76+
>
77+
<span v-html="lastButtonHtml"></span>
78+
</CLink>
79+
</li>
80+
</ul>
81+
</nav>
8182
</template>
8283

8384
<script>

0 commit comments

Comments
 (0)