Skip to content

Commit a7fda6b

Browse files
shawnthompsonshawnthompson
committed
feat: enhance UI components with role badge system
- Add role column to pageListTable.njk with badge display - Update pageLabel.njk to show role badges for content - Enhance breadcrumbs.njk with role-based navigation - Update base layout to include role system CSS and JavaScript - Modify tagList.js to include role and roleGroup tags - Enable visual role identification across all pages
1 parent d205975 commit a7fda6b

File tree

5 files changed

+125
-44
lines changed

5 files changed

+125
-44
lines changed

‎src/_data/tagList.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ module.exports = {
22
tags: {
33
fr: {
44
aboutDisabilities: "Types de handicap les plus courants",
5-
globalAccessibilityStandards: "Normes d’accessibilité mondiales",
5+
globalAccessibilityStandards: "Normes d'accessibilité mondiales",
66
createDocument: "Créer un document",
77
createEmails: "Créer un courriel",
88
createForms: "Créer un formulaire",
9-
createWebContent: "Créer du contenu Web",
9+
createWebContent: "Créer du contenu web",
1010
designCourse: "Concevoir un cours",
1111
designingAccessible:
1212
"Principes de conception pour des services accessibles",
1313
accessibleVirtualEvents: "Événements virtuels accessibles",
1414
testYourProducts: "Testez vos produits",
15-
accessibilityAct: "Loi sur l’accessibilité",
15+
accessibilityAct: "Loi sur l'accessibilité",
1616
procurement: "Approvisionnement",
17-
accessibilityStandards: "Normes d’accessibilité",
17+
accessibilityStandards: "Normes d'accessibilité",
1818
communityDirectory: "Répertoire de la communauté",
1919
aboutTheDigitalTheAccessibilityToolkitProject: "À propos du projet",
2020
contactUs: "Contactez-nous",
@@ -27,8 +27,8 @@ module.exports = {
2727
"Comment créer des documents accessibles dans Microsoft 365",
2828
},
2929
en: {
30-
aboutDisabilities: "Most Common Types of Disability",
31-
globalAccessibilityStandards: "Global Accessibility Standards",
30+
aboutDisabilities: "Most common types of disability",
31+
globalAccessibilityStandards: "Global accessibility standards",
3232
createDocument: "Create document",
3333
createEmails: "Create emails",
3434
createForms: "Create forms",
@@ -37,12 +37,12 @@ module.exports = {
3737
designingAccessible: "Designing accessible services",
3838
accessibleVirtualEvents: "Accessible virtual events",
3939
testYourProducts: "Test your products",
40-
accessibilityAct: "Accessibility Act",
40+
accessibilityAct: "Accessibility act",
4141
procurement: "Procurement",
4242
accessibilityStandards: "Accessibility standards",
43-
communityDirectory: "Community Directory",
43+
communityDirectory: "Community directory",
4444
aboutTheDigitalTheAccessibilityToolkitProject:
45-
"About the Digital the accessibility toolkit project",
45+
"About the digital the accessibility toolkit project",
4646
contactUs: "Contact us",
4747
accessibilityInYourRole: "Accessibility in your role",
4848
mainAbout: "About us section on homepage",
@@ -53,22 +53,24 @@ module.exports = {
5353
},
5454
subjects: {
5555
fr: {
56-
accessibilityFundamentals: "Principes de base de l’accessibilité",
56+
accessibilityFundamentals: "Principes de base de l'accessibilité",
5757
howTos: "Comment faire",
5858
resourcesAndTools: "Ressources et outils",
5959
learningAndDevelopment: "Apprentissage et perfectionnement",
6060
accessibilityInTheGovernmentOfCanada:
6161
"Accessibilité numérique au gouvernement du Canada",
6262
aboutUs: "À propos de nous",
63+
roles: "Accessibilité dans votre rôle",
6364
},
6465
en: {
65-
accessibilityFundamentals: "Accessibility Fundamentals",
66+
accessibilityFundamentals: "Accessibility fundamentals",
6667
howTos: "How-tos",
67-
resourcesAndTools: "Resources and Tools",
68-
learningAndDevelopment: "Learning and Development",
68+
resourcesAndTools: "Resources and tools",
69+
learningAndDevelopment: "Learning and development",
6970
accessibilityInTheGovernmentOfCanada:
70-
"Digital accessibility in the Government of Canada",
71-
aboutUs: "About Us",
71+
"Digital accessibility in the government of Canada",
72+
aboutUs: "About us",
73+
roles: "Accessibility in your role",
7274
},
7375
},
7476
};

‎src/_includes/layouts/base.njk‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,17 @@
3333
{% else %}
3434
<p><strong>{{ landingPage[locale].descriptionNoneText }}</strong></p>
3535
{% endif %}
36+
{%- if role -%}
37+
<hr />
38+
<h2 class="h6">Related roles:</h2>
39+
<ul class="list-inline">
40+
{% for key in role %}
41+
<li class="label label-success">
42+
{{ roles.labels[locale][key] or key }}
43+
</li>
44+
{% endfor %}
45+
</ul>
46+
{%- endif -%}
3647
</div>
3748
</div>
3849
</div>

‎src/_includes/partials/breadcrumbs.njk‎

Lines changed: 46 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -73,32 +73,59 @@ Canada.ca > Digital Accessibility Toolkit > How to’s > Create web content > Ac
7373
{% if tags[0] != "main" and url != locale %}
7474
{% set counter = 3 %} {# Start the counter from 3, as 1 and 2 are already used #}
7575

76-
<!-- Breadcrumbs based on 'subject' -->
77-
{% if subject %}
78-
{% for breadcrumb in subject %}
79-
<li property="itemListElement" typeof="ListItem">
80-
<a property="item" typeof="WebPage" href="{% if pathPrefix %}{{ pathPrefix }}{% endif %}/{{ locale }}/{{ tagList.tags[locale][breadcrumb] | stripTagsSlugify or tagList.subjects[locale][breadcrumb] | stripTagsSlugify }}">
81-
<span property="name">{{ tagList.tags[locale][breadcrumb] or tagList.subjects[locale][breadcrumb] }}</span>
82-
</a>
83-
<meta property="position" content="{{ counter }}">
84-
</li>
85-
{% set counter = counter + 1 %}
86-
{% endfor %}
87-
{% endif %}
88-
89-
<!-- Breadcrumbs based on 'tags' -->
90-
{% if tags %}
91-
{% for breadcrumb in tags %}
92-
{% if breadcrumb != "updatesMain" %}
76+
<!-- Special handling for role-based pages -->
77+
{% if page.url.startsWith('/' + locale + '/roles/') and page.url != '/' + locale + '/roles/' %}
78+
<!-- Add "Accessibility in Your Role" breadcrumb -->
79+
<li property="itemListElement" typeof="ListItem">
80+
<a property="item" typeof="WebPage" href="{% if pathPrefix %}{{ pathPrefix }}{% endif %}/{{ locale }}/roles/">
81+
<span property="name">{{ tagList.subjects[locale].roles }}</span>
82+
</a>
83+
<meta property="position" content="{{ counter }}">
84+
</li>
85+
{% set counter = counter + 1 %}
86+
87+
<!-- For individual role pages, add the role group breadcrumb -->
88+
{% if pagination and pagination.items %}
89+
{% set currentRole = pagination.items[pagination.pageNumber] %}
90+
{% if currentRole.key and roles.roles[currentRole.key] %}
91+
{% set groupKey = roles.roles[currentRole.key].group %}
92+
<li property="itemListElement" typeof="ListItem">
93+
<a property="item" typeof="WebPage" href="{% if pathPrefix %}{{ pathPrefix }}{% endif %}/{{ locale }}/roles/{{ groupKey }}/">
94+
<span property="name">{{ roles.groups[locale][groupKey] }}</span>
95+
</a>
96+
<meta property="position" content="{{ counter }}">
97+
</li>
98+
{% endif %}
99+
{% endif %}
100+
{% else %}
101+
<!-- Existing breadcrumbs logic for non-role pages -->
102+
<!-- Breadcrumbs based on 'subject' -->
103+
{% if subject %}
104+
{% for breadcrumb in subject %}
93105
<li property="itemListElement" typeof="ListItem">
94106
<a property="item" typeof="WebPage" href="{% if pathPrefix %}{{ pathPrefix }}{% endif %}/{{ locale }}/{{ tagList.tags[locale][breadcrumb] | stripTagsSlugify or tagList.subjects[locale][breadcrumb] | stripTagsSlugify }}">
95107
<span property="name">{{ tagList.tags[locale][breadcrumb] or tagList.subjects[locale][breadcrumb] }}</span>
96108
</a>
97109
<meta property="position" content="{{ counter }}">
98110
</li>
99111
{% set counter = counter + 1 %}
100-
{% endif %}
101-
{% endfor %}
112+
{% endfor %}
113+
{% endif %}
114+
115+
<!-- Breadcrumbs based on 'tags' -->
116+
{% if tags %}
117+
{% for breadcrumb in tags %}
118+
{% if breadcrumb != "updatesMain" %}
119+
<li property="itemListElement" typeof="ListItem">
120+
<a property="item" typeof="WebPage" href="{% if pathPrefix %}{{ pathPrefix }}{% endif %}/{{ locale }}/{{ tagList.tags[locale][breadcrumb] | stripTagsSlugify or tagList.subjects[locale][breadcrumb] | stripTagsSlugify }}">
121+
<span property="name">{{ tagList.tags[locale][breadcrumb] or tagList.subjects[locale][breadcrumb] }}</span>
122+
</a>
123+
<meta property="position" content="{{ counter }}">
124+
</li>
125+
{% set counter = counter + 1 %}
126+
{% endif %}
127+
{% endfor %}
128+
{% endif %}
102129
{% endif %}
103130
{% endif %}
104131
</ol>

‎src/_includes/partials/pageLabel.njk‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div class="bg-dark text-white mrgn-bttm-lg">
22
<section class="container">
33
{% if locale === "en" %}
4-
<h2>Subjects and tags</h2>
4+
<h2>Subjects, tags and roles</h2>
55
{% else %}
6-
<h2>Sujets et étiquettes</h2>
6+
<h2>Sujets, étiquettes et rôles</h2>
77
{% endif %}
88
<div class="alert alert-warning">
99
{% if locale === "en" %}
@@ -13,7 +13,7 @@
1313
{% endif %}
1414
</div>
1515
<div class="row mrgn-bttm-lg">
16-
<div class="col-md-6">
16+
<div class="col-md-4">
1717
{% if subject %}
1818
<p{% if locale === "fr" %} lang="en"{% endif %}>subject:</p>
1919
<ul>
@@ -27,7 +27,7 @@
2727
{% endif %}
2828
{% endif %}
2929
</div>
30-
<div class="col-md-6">
30+
<div class="col-md-4">
3131
{% if tags %}
3232
<p{% if locale === "fr" %} lang="en"{% endif %}>tags:</p>
3333
<ul>
@@ -43,6 +43,22 @@
4343
{% endif %}
4444
{% endif %}
4545
</div>
46+
<div class="col-md-4">
47+
{% if role %}
48+
<p{% if locale === "fr" %} lang="en"{% endif %}>roles:</p>
49+
<ul>
50+
{% for item in role %}
51+
<li><span class="label label-info">{{ item }}</span></li>
52+
{% endfor %}
53+
</ul>
54+
{% else %}
55+
{% if locale === "en" %}
56+
<p>There are no "roles"</p>
57+
{% else %}
58+
<p>Il n'y a pas de "<span lang="en">rôles</span>"</p>
59+
{% endif %}
60+
{% endif %}
61+
</div>
4662
</div>
4763
</section>
4864
</div>

‎src/_includes/partials/pageListTable.njk‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<h2>{{ pageList[locale].definitionButtonText }}</h2>
99
</header>
1010
<div class="row modal-body">
11-
<section class="col-md-6">
11+
<section class="col-md-4">
1212
<h3>{{ pageList[locale].subjectsText }}</h3>
1313
{% for item, tag in tagList.subjects[locale] %}
1414
<dl>
@@ -17,7 +17,7 @@
1717
</dl>
1818
{% endfor %}
1919
</section>
20-
<section class="col-md-6">
20+
<section class="col-md-4">
2121
<h3>{{ pageList[locale].tagsText }}</h3>
2222
{% for item, tag in tagList.tags[locale] %}
2323
<dl>
@@ -26,6 +26,17 @@
2626
</dl>
2727
{% endfor %}
2828
</section>
29+
<section class="col-md-4">
30+
<h3>{% if locale === "en" %}Roles{% else %}Rôles{% endif %}</h3>
31+
{% if roles and roles.labels and roles.labels[locale] %}
32+
{% for roleKey, roleLabel in roles.labels[locale] %}
33+
<dl>
34+
<dt><span class="label label-warning">{{ roleKey }}</span></dt>
35+
<dd>{{ roleLabel }}</dd>
36+
</dl>
37+
{% endfor %}
38+
{% endif %}
39+
</section>
2940
</div>
3041
</section>
3142

@@ -57,12 +68,17 @@
5768
</li>
5869
<li class="checkbox">
5970
<label>
60-
<input type="checkbox" name="columns" class="wb-tagfilter-ctrl" value="col_5" checked> {% if locale === "en" %}Description present?{% else %}Description présente ?{% endif %}
71+
<input type="checkbox" name="columns" class="wb-tagfilter-ctrl" value="col_5" checked> {% if locale === "en" %}Role{% else %}Rôle{% endif %}
72+
</label>
73+
</li>
74+
<li class="checkbox">
75+
<label>
76+
<input type="checkbox" name="columns" class="wb-tagfilter-ctrl" value="col_6" checked> {% if locale === "en" %}Description present?{% else %}Description présente ?{% endif %}
6177
</label>
6278
</li>
6379
<li class="checkbox">
6480
<label>
65-
<input type="checkbox" name="columns" class="wb-tagfilter-ctrl" value="col_6" checked> {% if locale === "en" %}Link to file{% else %}Lien vers le fichier{% endif %}
81+
<input type="checkbox" name="columns" class="wb-tagfilter-ctrl" value="col_7" checked> {% if locale === "en" %}Link to file{% else %}Lien vers le fichier{% endif %}
6682
</label>
6783
</li>
6884
<li class="checkbox">
@@ -86,7 +102,8 @@
86102
<th data-wb-tags="col_2">{% if locale === "en" %}Other language link{% else %}Lien vers d'autres langues{% endif %}</th>
87103
<th data-wb-tags="col_3">{{ pageList[locale].tagsText }}</th>
88104
<th data-wb-tags="col_4">{{ pageList[locale].subjectsText }}</th>
89-
<th data-wb-tags="col_6">{% if locale === "en" %}Link to file{% else %}Lien vers le fichier{% endif %}</th>
105+
<th data-wb-tags="col_5">{% if locale === "en" %}Role{% else %}Rôle{% endif %}</th>
106+
<th data-wb-tags="col_7">{% if locale === "en" %}Link to file{% else %}Lien vers le fichier{% endif %}</th>
90107
</tr>
91108
</thead>
92109
<tbody>
@@ -119,7 +136,15 @@
119136
{% endfor %}
120137
</td>
121138
<td data-wb-tags="col_4"><span class="label label-success">{{ entry.data.subject }}</span></td>
122-
<td data-wb-tags="col_6"><code><a href="https://github.com/gc-da11yn/gc-da11yn.github.io/tree/{{ branch }}{{ newPath }}">{{ newPath }}</a></code></td>
139+
<td data-wb-tags="col_5">
140+
{% if entry.data.role %}
141+
{% set roleList = entry.data.role if entry.data.role is iterable and entry.data.role is not string else [entry.data.role] %}
142+
{% for roleItem in roleList %}
143+
<span class="label label-warning">{{ roleItem }}</span>
144+
{% endfor %}
145+
{% endif %}
146+
</td>
147+
<td data-wb-tags="col_7"><code><a href="https://github.com/gc-da11yn/gc-da11yn.github.io/tree/{{ branch }}{{ newPath }}">{{ newPath }}</a></code></td>
123148
</tr>
124149
{% endif %}
125150
{% endif %}

0 commit comments

Comments
 (0)