Skip to content

Commit d205975

Browse files
shawnthompsonshawnthompson
committed
feat: add role navigation pages and templates
- Add role.njk templates for individual role pages (English/French) - Add roles-group.njk templates for role group pages - Add roles/index.njk landing pages with role filtering interface - Include W3C ARRM role descriptions and job titles - Enable bilingual role-based content discovery
1 parent 86cabe9 commit d205975

File tree

6 files changed

+297
-0
lines changed

6 files changed

+297
-0
lines changed

‎src/main/en/role.njk‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
tags: role
3+
pagination:
4+
data: rolePairs # global (see below)
5+
size: 1
6+
alias: rolePair # [roleKey, roleMeta]
7+
permalink: "/{{ locale }}/roles/{{ rolePair[0] }}/"
8+
eleventyComputed:
9+
title: "{{ roles.labels[locale][rolePair[0]] }}"
10+
description: "{{ roles.arrm[locale][rolePair[0]].description if roles.arrm[locale][rolePair[0]] else 'Resources and guidance for ' + roles.labels[locale][rolePair[0]] | lower + ' roles in digital accessibility.' }}"
11+
toggle: "roles/{{ rolePair[0] }}"
12+
---
13+
{% set lang = locale or 'en' %}
14+
{% set rolesData = roles %}
15+
{% set roleKey = rolePair[0] %}
16+
{% set groupKey = rolesData.roles[roleKey].group %}
17+
{% set groupName = rolesData.groups[lang][groupKey] %}
18+
19+
<div class="mrgn-bttm-lg">
20+
<p>
21+
<span class="label label-success">{{ rolesData.labels[lang][roleKey] }}</span>
22+
<span class="mrgn-lft-sm">Part of the <a href="{{ pathPrefix }}{{ permalinkPrefix }}{{ locale }}/roles/{{ groupKey }}/">{{ groupName }}</a></span>
23+
</p>
24+
</div>
25+
26+
{% if rolesData.arrm[lang][roleKey] %}
27+
<section class="mrgn-bttm-xl">
28+
{% if rolesData.arrm[lang][roleKey].keyDeliverables %}
29+
<h4>Key deliverable examples:</h4>
30+
<ul>
31+
{% for deliverable in rolesData.arrm[lang][roleKey].keyDeliverables %}
32+
<li>{{ deliverable }}</li>
33+
{% endfor %}
34+
</ul>
35+
{% endif %}
36+
37+
{% if rolesData.arrm[lang][roleKey].tasks %}
38+
<h4>Tasks include:</h4>
39+
<ul>
40+
{% for task in rolesData.arrm[lang][roleKey].tasks %}
41+
<li>{{ task }}</li>
42+
{% endfor %}
43+
</ul>
44+
{% endif %}
45+
46+
<h4>Example job titles for this role:</h4>
47+
<ul>
48+
{% for title in rolesData.arrm[lang][roleKey].jobTitles %}
49+
<li>{{ title }}</li>
50+
{% endfor %}
51+
</ul>
52+
53+
{% if rolesData.arrm[lang][roleKey].groupDescription %}
54+
<h4>Role group description:</h4>
55+
<p>{{ rolesData.arrm[lang][roleKey].groupDescription }}</p>
56+
{% endif %}
57+
58+
<p><small>This role description is adapted from the <a href="https://www.w3.org/WAI/planning/arrm/roles/" rel="external">W3C WAI Accessibility Roles and Responsibilities Mapping (ARRM)</a>. You are welcome to use this information as is, or change it for your situation.</small></p>
59+
</section>
60+
{% endif %}
61+
62+
{% set items = collections.rolePages
63+
| byAnyRole([roleKey])
64+
| localeMatch(locale)
65+
| sort(false, false, 'data.title') %}
66+
67+
{% if items.length %}
68+
<section class="mrgn-bttm-xl">
69+
<h2>Resources and guidance</h2>
70+
<div class="row wb-eqht mrgn-tp-lg gc-drmt">
71+
{% for item in items %}
72+
<div class="col-md-6">
73+
<h2 class="h4">
74+
<a{% if item.data.redirect %} rel="external"{% endif %}
75+
href="{% if item.data.redirect %}{{ item.data.redirect }}{% else %}{{ pathPrefix }}{{ item.url }}{% endif %}"
76+
{% if item.data.oneLanguage %} hreflang="{{ landingPage[locale].otherLang }}"{% endif %}>
77+
{% if item.data.internal === true %}
78+
<span class="fas fa-external-link-square-alt mrgn-lft-sm mrgn-rght-sm" aria-hidden="true"></span>
79+
<span class="wb-inv"> {{ alerts[locale].hiddenTextLink }}</span>
80+
{% endif %}
81+
{{ item.data.title | safe }}
82+
{% if item.data.oneLanguage %}<small> {{ landingPage[locale].otherLangOnly }}</small>{% endif %}
83+
</a>
84+
</h2>
85+
<p>
86+
{% if item.data.description %}
87+
{{ item.data.description | safe }}
88+
{% else %}
89+
{{ landingPage[locale].descriptionNoneText }}
90+
{% endif %}
91+
</p>
92+
</div>
93+
{% endfor %}
94+
</div>
95+
</section>
96+
{% endif %}

‎src/main/en/roles-group.njk‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
tags: roleGroup
3+
pagination:
4+
data: groupPairsEn # make this global (see below)
5+
size: 1
6+
alias: groupPair # [key, label, description, roleLabels]
7+
permalink: "/{{ locale }}/roles/{{ groupPair[0] }}/"
8+
eleventyComputed:
9+
title: "{{ groupPair[1] }}"
10+
description: "{{ groupPair[2] }}"
11+
toggle: "roles/{{ groupPair[0] }}"
12+
---
13+
{% set lang = locale or 'en' %}
14+
{% set rolesData = roles %}
15+
{% set groupKey = groupPair[0] %}
16+
{% set groupRoleKeys = groupKey | roleKeysForGroup(rolesData) %}
17+
18+
{% include "partials/role-mini-toc.njk" %}
19+
{% include "partials/role-group-sections.njk" %}
20+

‎src/main/en/roles/index.njk‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: Accessibility in your role
3+
description: We all have a role to play in accessibility. Learn more about job-specific accessibility tips and how to integrate them into your day-to-day work.
4+
permalink: '/{{ locale }}/roles/'
5+
toggle: roles
6+
tags:
7+
- main
8+
---
9+
10+
{% include "partials/alert-landingpages.njk" %}
11+
12+
<div class="row mrgn-tp-lg gc-drmt">
13+
{% for roleGroup in groupPairsEn %}
14+
<div class="col-md-6">
15+
<h2>
16+
<a href="{{ pathPrefix }}{{ permalinkPrefix }}{{ locale }}/roles/{{ roleGroup[0] }}/">{{ roleGroup[1] }}</a>
17+
</h2>
18+
<ul class="list-inline">
19+
{% for roleLabel in roleGroup[3] %}
20+
<li class="label label-success m-1">{{ roleLabel }}</li>
21+
{% endfor %}
22+
</ul>
23+
<p>{{ roleGroup[2] }}</p>
24+
</div>
25+
{% endfor %}
26+
</div>

‎src/main/fr/role.njk‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
tags: role
3+
pagination:
4+
data: rolePairs
5+
size: 1
6+
alias: rolePair
7+
permalink: "/{{ locale }}/roles/{{ rolePair[0] }}/"
8+
eleventyComputed:
9+
title: "{{ roles.labels[locale][rolePair[0]] }}"
10+
description: "{{ roles.arrm[locale][rolePair[0]].description if roles.arrm[locale][rolePair[0]] else 'Ressources et conseils pour les rôles de ' + roles.labels[locale][rolePair[0]] | lower + ' en accessibilité numérique.' }}"
11+
toggle: "roles/{{ rolePair[0] }}"
12+
---
13+
{% set lang = locale or 'fr' %}
14+
{% set rolesData = roles %}
15+
{% set roleKey = rolePair[0] %}
16+
{% set groupKey = rolesData.roles[roleKey].group %}
17+
{% set groupName = rolesData.groups[lang][groupKey] %}
18+
19+
<div class="mrgn-bttm-lg">
20+
<p>
21+
<span class="label label-success">{{ rolesData.labels[lang][roleKey] }}</span>
22+
<span class="mrgn-lft-sm">Fait partie du <a href="{{ pathPrefix }}{{ permalinkPrefix }}{{ locale }}/roles/{{ groupKey }}/">{{ groupName }}</a></span>
23+
</p>
24+
</div>
25+
26+
{% if rolesData.arrm[lang][roleKey] %}
27+
<section class="mrgn-bttm-xl">
28+
{% if rolesData.arrm[lang][roleKey].keyDeliverables %}
29+
<h4>Exemples de livrables clés :</h4>
30+
<ul>
31+
{% for deliverable in rolesData.arrm[lang][roleKey].keyDeliverables %}
32+
<li>{{ deliverable }}</li>
33+
{% endfor %}
34+
</ul>
35+
{% endif %}
36+
37+
{% if rolesData.arrm[lang][roleKey].tasks %}
38+
<h4>Les tâches incluent :</h4>
39+
<ul>
40+
{% for task in rolesData.arrm[lang][roleKey].tasks %}
41+
<li>{{ task }}</li>
42+
{% endfor %}
43+
</ul>
44+
{% endif %}
45+
46+
<h4>Exemples de titres d'emploi pour ce rôle :</h4>
47+
<ul>
48+
{% for title in rolesData.arrm[lang][roleKey].jobTitles %}
49+
<li>{{ title }}</li>
50+
{% endfor %}
51+
</ul>
52+
53+
{% if rolesData.arrm[lang][roleKey].groupDescription %}
54+
<h4>Description du groupe de rôles :</h4>
55+
<p>{{ rolesData.arrm[lang][roleKey].groupDescription }}</p>
56+
{% endif %}
57+
58+
<p><small>Cette description de rôle est adaptée du <a href="https://www.w3.org/WAI/planning/arrm/roles/" rel="external">W3C WAI Accessibility Roles and Responsibilities Mapping (ARRM)</a>. Vous êtes libre d'utiliser ces informations telles quelles, ou de les modifier selon votre situation.</small></p>
59+
</section>
60+
{% endif %}
61+
62+
{% set items = collections.rolePages
63+
| byAnyRole([roleKey])
64+
| localeMatch(locale)
65+
| sort(false, false, 'data.title') %}
66+
67+
{% if items.length %}
68+
<section class="mrgn-bttm-xl">
69+
<h2>Ressources et conseils</h2>
70+
<div class="row wb-eqht mrgn-tp-lg gc-drmt">
71+
{% for item in items %}
72+
<div class="col-md-6">
73+
<h2 class="h4">
74+
<a{% if item.data.redirect %} rel="external"{% endif %}
75+
href="{% if item.data.redirect %}{{ item.data.redirect }}{% else %}{{ pathPrefix }}{{ item.url }}{% endif %}"
76+
{% if item.data.oneLanguage %} hreflang="{{ landingPage[locale].otherLang }}"{% endif %}>
77+
{% if item.data.internal === true %}
78+
<span class="fas fa-external-link-square-alt mrgn-lft-sm mrgn-rght-sm" aria-hidden="true"></span>
79+
<span class="wb-inv"> {{ alerts[locale].hiddenTextLink }}</span>
80+
{% endif %}
81+
{{ item.data.title | safe }}
82+
{% if item.data.oneLanguage %}<small> {{ landingPage[locale].otherLangOnly }}</small>{% endif %}
83+
</a>
84+
</h2>
85+
<p>
86+
{% if item.data.description %}
87+
{{ item.data.description | safe }}
88+
{% else %}
89+
{{ landingPage[locale].descriptionNoneText }}
90+
{% endif %}
91+
</p>
92+
</div>
93+
{% endfor %}
94+
</div>
95+
</section>
96+
{% endif %}

‎src/main/fr/roles-group.njk‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
tags: roleGroup
3+
pagination:
4+
data: groupPairsFr
5+
size: 1
6+
alias: groupPair
7+
permalink: "/{{ locale }}/roles/{{ groupPair[0] }}/"
8+
eleventyComputed:
9+
title: "{{ groupPair[1] }}"
10+
description: "{{ groupPair[2] }}"
11+
toggle: "roles/{{ groupPair[0] }}"
12+
---
13+
{% set lang = locale or 'fr' %}
14+
{% set rolesData = roles %}
15+
{% set groupKey = groupPair[0] %}
16+
{% set groupRoleKeys = groupKey | roleKeysForGroup(rolesData) %}
17+
18+
{% include "partials/role-mini-toc.njk" %}
19+
{% include "partials/role-group-sections.njk" %}

‎src/main/fr/roles/index.njk‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Rôles d'accessibilité
3+
description: Aperçu des rôles et responsabilités pour assurer l'accessibilité dans les produits et services numériques, basé sur la cartographie des rôles et responsabilités d'accessibilité (ARRM) du W3C WAI.
4+
permalink: '/{{ locale }}/roles/'
5+
toggle: roles
6+
role:
7+
- businessAnalysis
8+
- contentAuthoring
9+
- contentPublishing
10+
- uxResearch
11+
- uxDesign
12+
- visualDesign
13+
- frontEndDev
14+
- backEndDev
15+
- qaAutomated
16+
- qaManual
17+
- productOwnership
18+
- projectManagement
19+
- governance
20+
tags:
21+
- main
22+
---
23+
24+
{% include "partials/alert-landingpages.njk" %}
25+
26+
<div class="row mrgn-tp-lg gc-drmt">
27+
{% for roleGroup in groupPairsFr %}
28+
<div class="col-md-6">
29+
<h2>
30+
<a href="{{ pathPrefix }}{{ permalinkPrefix }}{{ locale }}/roles/{{ roleGroup[0] }}/">{{ roleGroup[1] }}</a>
31+
</h2>
32+
<ul class="list-inline">
33+
{% for roleLabel in roleGroup[3] %}
34+
<li class="label label-success m-1">{{ roleLabel }}</li>
35+
{% endfor %}
36+
</ul>
37+
<p>{{ roleGroup[2] }}</p>
38+
</div>
39+
{% endfor %}
40+
</div>

0 commit comments

Comments
 (0)