Skip to content

Commit 5c7f234

Browse files
jean-guijean-gui
authored
Merge pull request #145 from w3c/feature/#634-simplify-pagination
Simplify pagination pattern
2 parents 95b2080 + 250b308 commit 5c7f234

File tree

6 files changed

+31
-33
lines changed

6 files changed

+31
-33
lines changed

‎design-system-templates/components/pagination.html.twig‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
<nav aria-label="pagination" class="l-cluster pagination">
1+
<nav class="l-cluster pagination" aria-labelledby="pagination">
2+
<h2 id="pagination" class="visuallyhidden">Pagination</h2>
23
<ul class="pagination__list">
3-
<li><a href="path/to/page">Previous <span class="visuallyhidden">page</span></a></li>
4-
<li><a class="pagination__list__first" href="path/to/page"><span class="visuallyhidden">page</span> 1<span
5-
class="visuallyhidden"> (first page)</span></a></li>
4+
<li><a href="path/to/page">Previous</a></li>
5+
<li><a class="pagination__list__first" href="path/to/page"> 1</a></li>
66
<li><a class="ellipsis">&#8230;</a></li>
7-
<li><a href="path/to/page"><span class="visuallyhidden">page</span> 6</a></li>
8-
<li><a href="path/to/page"><span class="visuallyhidden">page</span> 7</a></li>
9-
<li><a href="#" aria-label="page 8" aria-current="page">8</a></li>
10-
<li><a href="path/to/page"><span class="visuallyhidden">page</span> 9</a></li>
11-
<li><a href="path/to/page"><span class="visuallyhidden">page</span> 10</a></li>
7+
<li><a href="path/to/page">6</a></li>
8+
<li><a href="path/to/page">7</a></li>
9+
<li><a href="#" aria-current="page">8</a></li>
10+
<li><a href="path/to/page">9</a></li>
11+
<li><a href="path/to/page">10</a></li>
1212
<li><a class="ellipsis">&#8230;</a></li>
13-
<li><a class="pagination__list__last" href="path/to/page"><span class="visuallyhidden">page</span> 20<span
14-
class="visuallyhidden"> (last page)</span></a></li>
15-
<li><a href="path/to/page">Next <span class="visuallyhidden">page</span></a></li>
13+
<li><a class="pagination__list__last" href="path/to/page">20</a></li>
14+
<li><a href="path/to/page">Next</a></li>
1615
</ul>
1716
</nav>

‎docs/components/pagination.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ Used on various [listing pages](../templates/listings.md).
88

99
Note the use of the [cluster layout](../layouts/cluster.md).
1010

11-
The `aria-label` attribute has been added to the `<nav>` element. This is because the main website navigation also uses the `<nav>` element. Where there are multiple`<nav>` elements on a single page, all must be given a unique accessible name via `aria-label`.
11+
The `aria-labelledby` attribute has been added to the `<nav>` element, which references the ID of the visually-hidden `<h2>` inside the `<nav>`. This is because the main website navigation also uses the `<nav>` element. Where there are multiple `<nav>` elements on a single page, they should all have a unique accessible name.
1212

13-
For all pagination links excluding the current page, `<span class="visuallyhidden">page</span>` is added to provide additional context to the link wording for users of Assistive Technology.
14-
15-
The current page is indicated by `aria-current="page"`. As per the [breadcrumbs component](breadcrumbs.md), it is fully linked so that users of Assistive Technology can find which is the currently active link. The `aria-label`on the current page link provides the same additional context as the visually-hidden span on other pagination links.
13+
The current page is indicated by `aria-current="page"`. As per the [breadcrumbs component](breadcrumbs.md), it is fully linked so that users of Assistive Technology can find which is the currently active link.

‎templates/components/styles/pagination.html.twig‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22
{% set route = app.request.attributes.get('_route') %}
33
{% set query = app.request.attributes.get('_route_params')|merge(app.request.query) %}
44

5-
<nav aria-label="pagination" class="l-cluster pagination">
5+
<nav class="l-cluster pagination" aria-labelledby="pagination">
6+
<h2 id="pagination" class="visuallyhidden">{{ pagination.label }}</h2>
67
<ul class="pagination__list">
78
{% if not pagination.firstPage %}
89
<li>
910
<a rel="prev" href="{{ path(route, query|merge({page: pagination.previous})) }}">
10-
Previous <span class="visuallyhidden">page</span>
11+
Previous
1112
</a>
1213
</li>
1314
{% endif %}
@@ -16,8 +17,7 @@
1617
<li>
1718
<a class="pagination__list__first"
1819
href="{{ path(route, query|merge({page: pagination.first})) }}">
19-
<span class="visuallyhidden">page</span> {{ pagination.first }}
20-
<span class="visuallyhidden"> (first page)</span>
20+
{{ pagination.first }}
2121
</a>
2222
</li>
2323

@@ -28,13 +28,12 @@
2828
{% if page != pagination.page %}
2929
<li>
3030
<a href="{{ path(route, query|merge({page: page})) }}">
31-
<span class="visuallyhidden">page</span> {{ page }}
31+
{{ page }}
3232
</a>
3333
</li>
3434
{% else %}
3535
<li>
36-
<a href="{{ path(route, query|merge({page: page})) }}" aria-label="page {{ page }}"
37-
aria-current="page">{{ page }}</a>
36+
<a href="{{ path(route, query|merge({page: page})) }}" aria-current="page">{{ page }}</a>
3837
</li>
3938
{% endif %}
4039
{% endfor %}
@@ -45,16 +44,15 @@
4544
<li>
4645
<a class="pagination__list__last"
4746
href="{{ path(route, query|merge({page: pagination.last})) }}">
48-
<span class="visuallyhidden">page</span> {{ pagination.last }}
49-
<span class="visuallyhidden"> (last page)</span>
47+
{{ pagination.last }}
5048
</a>
5149
</li>
5250
{% endif %}
5351

5452
{% if not pagination.lastPage %}
5553
<li>
5654
<a rel="next" href="{{ path(route, query|merge({page: pagination.next})) }}">
57-
Next <span class="visuallyhidden">page</span>
55+
Next
5856
</a>
5957
</li>
6058
{% endif %}

‎translations/w3c_website_templates_bundle+intl-icu.en.yaml‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,12 @@ header:
6161
breadcrumbs:
6262
home: Home
6363
pagination:
64+
label: Pagination
6465
first: First Page
65-
previous: Previous<span class="visuallyhidden">page</span>
66-
next: Next <span class="visuallyhidden">page</span>
66+
previous: Previous
67+
next: Next
6768
last: Last Page
68-
page: "<span class=\"visuallyhidden\">page</span> {page}"
69+
page: "{page}"
6970
current_page: "{page}"
7071
summary: >-
7172
{to, select,

‎translations/w3c_website_templates_bundle+intl-icu.ja.yaml‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,12 @@ header:
5959
breadcrumbs:
6060
home: ホーム
6161
pagination:
62+
label: Pagination
6263
first: 最初のページ
63-
previous: 前の<span class="visuallyhidden">ページ</span>
64-
next: 次の<span class="visuallyhidden">ページ</span>
64+
previous: 前の
65+
next: 次の
6566
last: 最後のページ
66-
page: "{page}ページ"
67+
page: "{page}"
6768
current_page: "{page}"
6869
summary: >-
6970
{to, select,

‎translations/w3c_website_templates_bundle+intl-icu.zh-hans.yaml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,12 @@ header:
5757
breadcrumbs:
5858
home: 主页
5959
pagination:
60+
label: Pagination
6061
first: 首页
6162
previous: 上一页
6263
next: 下一页
6364
last: 尾页
64-
page: "第{page}页"
65+
page: "{page}"
6566
current_page: "{page}"
6667
summary: >-
6768
{to, select,

0 commit comments

Comments
 (0)