Skip to content

Commit 3fedc1d

Browse files
NicolaSaundersNicolaSaunders
committed
Merge branch 'main' into feature/simplify-globalnav-markup
2 parents 41194ad + be3cea4 commit 3fedc1d

File tree

9 files changed

+341
-265
lines changed

9 files changed

+341
-265
lines changed

‎composer.lock‎

Lines changed: 303 additions & 227 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎deploy.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,14 @@
4141

4242
host('production')
4343
->stage('production')
44-
->hostname('mercury.w3.org')
44+
->hostname('proteus.w3.internal')
4545
->user('studio24')
4646
->set('deploy_path','/srv/design-system.w3.org')
4747
->set('url', 'https://design-system.w3.org/');
4848

4949
host('staging')
5050
->stage('staging')
51-
->hostname('mercury.w3.org')
51+
->hostname('proteus.w3.internal')
5252
->user('studio24')
5353
->set('deploy_path','/srv/staging-design-system.w3.org')
5454
->set('url', 'https://staging-design-system.w3.org/');

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<div class="l-center">
1010
<div class="l-cluster">
1111
<ul class="clean-list" role="list">
12-
<li><a href="/zh" hreflang="zh-hans" lang="zh-hans">简体中文首页<span class="visuallyhidden" lang="en"> (Chinese website)</span></a></li>
1312
<li><a href="/ja" hreflang="ja" lang="ja">日本語ホームページ<span class="visuallyhidden" lang="en"> (Japanese website)</span></a></li>
13+
<li><a href="/zh" hreflang="zh-hans" lang="zh-hans">简体中文首页<span class="visuallyhidden" lang="en"> (Chinese website)</span></a></li>
1414
</ul>
1515
</div>
1616
</div>

‎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: 10 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'|trans({}, 'w3c_website_templates_bundle') }}</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+
{{ 'pagination.previous'|trans({}, 'w3c_website_templates_bundle') }}
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'|trans({}, 'w3c_website_templates_bundle') }}
2121
</a>
2222
</li>
2323

@@ -28,13 +28,14 @@
2828
{% if page != pagination.page %}
2929
<li>
3030
<a href="{{ path(route, query|merge({page: page})) }}">
31-
<span class="visuallyhidden">page</span> {{ page }}
31+
{{ 'pagination.page'|trans({page: page}, 'w3c_website_templates_bundle') }}
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">
37+
{{ 'pagination.current_page'|trans({page: page}, 'w3c_website_templates_bundle') }}
38+
</a>
3839
</li>
3940
{% endif %}
4041
{% endfor %}
@@ -45,16 +46,15 @@
4546
<li>
4647
<a class="pagination__list__last"
4748
href="{{ path(route, query|merge({page: pagination.last})) }}">
48-
<span class="visuallyhidden">page</span> {{ pagination.last }}
49-
<span class="visuallyhidden"> (last page)</span>
49+
{{ 'pagination.last'|trans({}, 'w3c_website_templates_bundle') }}
5050
</a>
5151
</li>
5252
{% endif %}
5353

5454
{% if not pagination.lastPage %}
5555
<li>
5656
<a rel="next" href="{{ path(route, query|merge({page: pagination.next})) }}">
57-
Next <span class="visuallyhidden">page</span>
57+
{{ 'pagination.next'|trans({}, 'w3c_website_templates_bundle') }}
5858
</a>
5959
</li>
6060
{% endif %}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,12 @@ header:
6161
breadcrumbs:
6262
home: Home
6363
pagination:
64-
first: First Page
65-
previous: Previous<span class="visuallyhidden">page</span>
66-
next: Next <span class="visuallyhidden">page</span>
67-
last: Last Page
68-
page: "<span class=\"visuallyhidden\">page</span> {page}"
64+
label: Pagination
65+
first: First
66+
previous: Previous
67+
next: Next
68+
last: Last
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)