Fulfilled Changes Requested

Feedback area: adding a11y assessment performed by CRA (wet-boew#2433) Patch - Méli-mélo: DataTable Utilities (wet-boew#2438) * Initial Commit of 2024-10-datatable-utilities * Adjustment to the jeckell html pages as the Javascript Didn't load * Update to the meta.md * Fix to toFrenchMoney Function failing under 'use strict' and Some fixes to the Sample HTML pages * Fix for French Totals coming back as NaN * Implemented wet-boew team Accesibility changes to sample pages + added css to replace <strong> on the Totals * 1.1.0 - Wet-Boew Fixes + French Translation of Examples Page * Fixed a Typo * Added the URL Column to the Raw Data * Updated Implementation Plan * Fixed typo in implementation Plan --------- Co-authored-by: Steve Bourgeois <[email protected]> Patch - GC Home Page: Reduced Doormats and added all services button (wet-boew#2434) * GC Home Page: Reduced Doormats and added all services button * Home: updating All services button styling --------- Co-authored-by: Marc-André Garneau <[email protected]> Patch - Steps Méli-mélo: Update steps.css (wet-boew#2441) * Update steps.css Clear and simple explanation of the change/update: Additional CSS and example added to support basic use (for numbers 2 to 10) of the start attribute for ordered (ol) lists as the CSS design uses a CSS count method to display the numbers and not the generated numbers from the html element. Future design could include a javascript to allow any start number to exist. The impact on the sponsored department (CRA) for that change/update: No impact The impact on the public for that change/update: More flexibility of using the design in various situations. * Update index.html Added extended functionality example for use of start attribute for steps * Update index-fr.html Added extended functionality example using start attribute for steps * Update steps-doc-en.html Added start attribute code * Update steps-doc-fr.html Added code snippet for start attribute * Update meta.md Added updated feature to list * Méli-mélo 2021-05-steps - Add working example for custom starting step * Méli-mélo 2021-05-steps - Typo fix for custom starting steps * Méli-mélo 2021-05-steps - Typo fix for custom starting steps --------- Co-authored-by: Pierre Dubois <[email protected]> Release v15.7.1 (wet-boew#2443) Patch - Update _base.scss (wet-boew#2444) * Update _base.scss Clear and simple explanation of the change/update: Updated input elements to be invisible simply by using opacity: 0 and z-index:2 in order for inputs to be selected by Dragon Naturally Speaking adaptive technology voice reader Added fallback to show focus of checkboxes and radio buttons and selection of radio buttons in Windows high contrast mode. The impact on the sponsored department (CRA) for that change/update: Improved accessibility for users of the adaptive technology or visual mode The impact on the public for that change/update: No change for current use cases, but allows easier selection of radio button and checkboxes using Dragon Naturally Speaking, and provides proper focus in high contrast mode when using keyboard and selecting radio buttons * removed test provisional class extension * adding margin so input is nested inside design * Adding documentation and fixing hidden checkbox hover --------- Co-authored-by: Marc-André Garneau <[email protected]> Requested changes complete
SebastianBurke · Nov 27, 2024 · b5538fd · b5538fd
1 parent 57843fb
commit b5538fd
Show file tree

Hide file tree

Showing 50 changed files with 5,475 additions and 167 deletions.
diff --git a/_data/méli-mélo.json b/_data/méli-mélo.json
@@ -2,26 +2,22 @@
 	"title": "Liste des produits méli-mélo fusionnés",
 	"packages": [
 		{
-			"nom": "2024-09-kejimkujik",
+			"nom": "2025-04-nahanni",
 			"libs": [
-				"2021-05-conjunction",
-				"2023-09-menu",
-				"2023-09-distance-calculator",
-				"2023-09-collection-sort",
-				"2021-05-steps",
-				"2023-10-clipboard",
+			    "2024-10-datatable-utilities",
 				"2024-02-charts",
-				"2024-04-stepsquiz",
-				"deprecated"
+			    "2024-04-stepsquiz",
+                "2021-05-conjunction",
+                "2021-05-steps",
+			    "deprecated"
 			]
 		},
 		{
-			"nom": "2025-04-nahanni",
+			"nom": "2025-12-mille-iles",
 			"libs": [
-				"2024-02-charts",
-				"2024-04-stepsquiz",
-        "2021-05-conjunction",
-        "2021-05-steps",
+				"2024-10-datatable-utilities",
+                "2021-05-conjunction",
+                "2021-05-steps",
 				"deprecated"
 			]
 		},
@@ -98,13 +94,16 @@
 			"nom": "2024-04-stepsquiz",
 			"mainpage": "index.html"
 		},
-	{
+		{
+			"nom": "2024-10-datatable-utilities",
+			"mainpage": "index-en.html"
+		},
+		{
 			"nom": "deprecated",
 			"mainpage": "deprecated.html"
 		}
 	],
 	"future-packages-names": [
-		"mille-iles",
 		"ivvavik",
 		"vuntut",
 		"auyuittuq",

diff --git a/_data/sites.json b/_data/sites.json
@@ -714,6 +714,16 @@
 				"title": "Rapport de conformité d'accessibilité WCAG 2.1 Niveau AA - Automne 2023",
 				"language": "fr",
 				"path": "reports/acr-2023-autumn-fr.html"
+			},
+			{
+				"title": "Accessibility assessment #2 - CRA Usability testing",
+				"language": "en",
+				"path": "reports/a11y-3-en.html"
+			},
+			{
+				"title": "Évaluation de l'accessibilité #2 - Test d'utilisabilité de l'ARC",
+				"language": "fr",
+				"path": "reports/a11y-3-fr.html"
 			}
 		]
 	},
@@ -2323,7 +2333,7 @@
 				"en": "https://design.canada.ca/styles/typography.html",
 				"fr": "https://conception.canada.ca/styles/typographie.html"
 			},
-			"iteration": "_:iteration_smpt_1",
+			"iteration": "_:iteration_smpt_2",
 			"example": [
 				{
 					"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
@@ -2401,7 +2411,7 @@
 		},
 		{
 			"@id": "_:implement_mpt_gcweb",
-			"iteration": "_:iteration_mpt_2",
+			"iteration": "_:iteration_mpt_4",
 			"name": {
 				"en": "GCWeb Jekyll",
 				"fr": "GCWeb Jekyll"
@@ -2437,7 +2447,7 @@
 		},
 		{
 			"@id": "_:implement_smpt",
-			"iteration": "_:iteration_smpt_1",
+			"iteration": "_:iteration_smpt_2",
 			"name": {
 				"en": "Standard",
 				"fr": "Standard"
@@ -2473,7 +2483,7 @@
 		},
 		{
 			"@id": "_:implement_smpt_gcweb",
-			"iteration": "_:iteration_smpt_1",
+			"iteration": "_:iteration_smpt_2",
 			"name": {
 				"en": "GCWeb Jekyll",
 				"fr": "GCWeb Jekyll"
@@ -2512,7 +2522,7 @@
 		{
 			"@id": "_:cs_mpt",
 			"name": "Default h1",
-			"baseOnIteration": "_:iteration_mpt_3",
+			"baseOnIteration": "_:iteration_mpt_4",
 			"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43.",
 			"layout": "The line is positioned below the text.",
 			"semantic": "h1",
@@ -2535,7 +2545,7 @@
 		{
 			"@id": "_:cs_smpt",
 			"name": "Stacked main page title",
-			"baseOnIteration": "_:iteration_smpt_1",
+			"baseOnIteration": "_:iteration_smpt_2",
 			"detectableBy": "hgroup > h1#wb-cont",
 			"layout": "The section page title is above the page title. The line is positioned below the page title.",
 			"semantic": "hgroup > p + h1",
@@ -2581,7 +2591,8 @@
 			"fixes": [
 				"Style: Added left/right/top <code>border-*-width: 0;</code> properties to avoid three-sided borders in Safari &lt;= 15.3."
 			],
-			"predecessor": "_:iteration_mpt_2"
+			"predecessor": "_:iteration_mpt_2",
+			"successor": "_:iteration_mpt_4"
 		},
 		{
 			"@id": "_:iteration_mpt_4",
@@ -2590,13 +2601,16 @@
 			"detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
 			"additions": [
 				"Added right to left support"
-			]
+			],
+			"predecessor": "_:iteration_mpt_3"
+
 		},
 		{
 			"@id": "_:iteration_smpt_1",
 			"name": "Stacked main page title - Iteration 1",
 			"date": "2024-08",
-			"detectableBy": "hgroup > h1#wb-cont"
+			"detectableBy": "hgroup > h1#wb-cont",
+			"successor": "_:iteration_smpt_2"
 		},
 		{
 			"@id": "_:iteration_smpt_2",
@@ -2605,7 +2619,8 @@
 			"detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
 			"additions": [
 				"Added right to left support"
-			]
+			],
+			"predecessor": "_:iteration_smpt_1"
 		}
 	]
 }

diff --git a/components/gc-chckbxrdio/_base.scss b/components/gc-chckbxrdio/_base.scss
@@ -38,14 +38,9 @@ fieldset.gc-chckbxrdio {
 
 	input[type="radio"],
 	input[type="checkbox"] {
-		border: 0;
-		clip: rect(0 0 0 0);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: absolute;
-		width: 1px;
+		margin-left: 10px;
+		opacity: 0;
+		z-index: 2;
 
 		&[disabled] + label {
 			cursor: not-allowed;
@@ -77,6 +72,14 @@ fieldset.gc-chckbxrdio {
 			}
 		}
 
+		&:hover {
+			cursor: pointer;
+
+			+ label::before {
+				@include chckbxrdio-hover;
+			}
+		}
+
 		&:focus + label::before {
 			@include chckbxrdio-focus;
 		}
@@ -150,3 +153,33 @@ fieldset.gc-chckbxrdio {
 		}
 	}
 }
+@media (prefers-contrast: more) {
+	.gc-chckbxrdio {
+		input[type=checkbox] {
+			&:focus+label {
+				&::before {
+					border: 5px double #000;
+				}
+			}
+		}
+		input[type=radio] {
+			&:focus+label {
+				&::before {
+					border: 5px double #000;
+				}
+			}
+		}
+		input[type="radio"] {
+			&:checked {
+				+ {
+					label {
+						&::before {
+							outline: 10px solid #444;
+							outline-offset: -20px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html b/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html
@@ -64,7 +64,7 @@ <h2>How to implement</h2>
 <h2>Evaluation and report</h2>
 <p>There is no evaluation and report available for this component.</p>
 
-<h2>API (Version 1.0)</h2>
+<h2>API (Version 1.0.1)</h2>
 <table class="table table-bordered">
 	<tr>
 		<th>CSS Class</th>
@@ -75,7 +75,7 @@ <h2>API (Version 1.0)</h2>
 	<tr>
 		<td>Version 1.0</td>
 		<td>Version 1.0</td>
-		<td>Version 1.0</td>
+		<td>Version 1.0.1</td>
 		<td>n.a.</td>
 	</tr>
 </table>
@@ -120,7 +120,7 @@ <h4>Variant: Tickbox (<code>.checkbox.gc-chckbxrdio</code>)</h4>
 	&lt;label for="template"&gt;Template&lt;/label&gt;
 &lt;/div&gt;</code></pre>
 
-<h3>Visual rendering (v1.0)</h3>
+<h3>Visual rendering (v1.0.1)</h3>
 <h4>Default</h4>
 <dl>
 	<dt>Check box and radio</dt>
@@ -161,6 +161,13 @@ <h4>Tickbox</h4>
 <details>
 	<summary>Version notes</summary>
 	<dl class="dl-horizontal">
+		<dt>Version 1.0.1</dt>
+		<dd>
+			<ul>
+				<li>Fixed radio buttons UI for users leveraging the high-contrast feature. Note: High-contrast functionality is not considered as essential component behavior (not included in the API).</li>
+				<li>Fixed display of hidden inputs so that they are accessible through Dragon Naturally Speak.</li>
+			</ul>
+		</dd>
 		<dt>Version 1.0</dt>
 		<dd>
 			<ul>

diff --git a/components/gc-chckbxrdio/gc-chckbxrdio-doc-fr.html b/components/gc-chckbxrdio/gc-chckbxrdio-doc-fr.html
@@ -64,7 +64,7 @@ <h2>Exemples pratiques</h2>
 <h2>Évaluation et rapport</h2>
 <p>Il n'y a pas d'évaluation et de rapport disponible pour ce composant.</p>
 
-<h2>API (Version 1.0)</h2>
+<h2>API (Version 1.0.1)</h2>
 <table class="table table-bordered">
 	<tr>
 		<th>Classe CSS</th>
@@ -75,7 +75,7 @@ <h2>API (Version 1.0)</h2>
 	<tr>
 		<td>Version 1.0</td>
 		<td>Version 1.0</td>
-		<td>Version 1.0</td>
+		<td>Version 1.0.1</td>
 		<td>s.o.</td>
 	</tr>
 </table>
@@ -117,7 +117,7 @@ <h4>Variation&nbsp;: Tickbox (<code>.checkbox.gc-chckbxrdio</code>)</h4>
 	&lt;label for="gabarit"&gt;Gabarit&lt;/label&gt;
 &lt;/div&gt;</code></pre>
 
-<h3>Rendu visuel (v1.0)</h3>
+<h3>Rendu visuel (v1.0.1)</h3>
 <h4>Base</h4>
 <dl>
 	<dt>Cases à cocher et boutons radio</dt>
@@ -158,6 +158,13 @@ <h4 lang="en">Tickbox</h4>
 <details>
 	<summary>Notes sur les versions</summary>
 	<dl class="dl-horizontal">
+		<dt>Version 1.0.1</dt>
+		<dd>
+			<ul>
+				<li>Support de la fonctionnalité de contraste élevé pour les boutons radios. Note: la fonctionnalité de contraste élevé n'est pas considérée comme comportement essentiel de la composante (n'est pas inclut dans l'API).</li>
+				<li>Les boutons radios et cases à cocher invisibles sont maintenant accessibles via Dragon Naturally Speak.</li>
+			</ul>
+		</dd>
 		<dt>Version 1.0</dt>
 		<dd>
 			<ul>

diff --git a/docs/méta-détails/2024-10-datatable-utilities-en.html b/docs/méta-détails/2024-10-datatable-utilities-en.html
@@ -0,0 +1,11 @@
+---
+title: 2024-10-datatable-utilities- Méli-mélo details
+componentName: 2024-10-datatable-utilities
+layout: méli-mélo-en
+altLangPage: détails-fr.html
+lang: en
+breadcrumbs: [
+	{ "title": "Méli-mélo", "link": "méli-mélo/méli-mélo-en.html" }
+]
+permalink: /méli-mélo/2024-10-datatable-utilities/détails-en.html
+---
diff --git a/docs/méta-détails/2024-10-datatable-utilities-fr.html b/docs/méta-détails/2024-10-datatable-utilities-fr.html
@@ -0,0 +1,11 @@
+---
+title: 2024-10-datatable-utilities - Détails du méli-mélo
+componentName: 2024-10-datatable-utilities
+layout: méli-mélo-fr
+altLangPage: détails-en.html
+lang: fr
+breadcrumbs: [
+	{ "title": "Méli-mélo", "link": "méli-mélo/méli-mélo-fr.html" }
+]
+permalink: /méli-mélo/2024-10-datatable-utilities/détails-fr.html
+---
diff --git a/index-en.md b/index-en.md
@@ -1,7 +1,7 @@
 ---
 title: GCWeb, the WET-BOEW Canada.ca theme
 altLangPage: index-fr.html
-dateModified: 2024-10-15
+dateModified: 2024-11-12
 description: "Home page describing all the components of the Canada.ca theme, named GCWeb."
 layout: no-container
 language: en
@@ -20,7 +20,7 @@ css:
 			<p>The page templates and design patterns below comprise a reference implementation of the <a href="https://design.canada.ca">Canada.ca design system</a>, including the mandatory requirement of the Content and Information Architecture (C&amp;IA) Specification. Government of Canada departments and agencies can contribute additional patterns and templates via <a href="https://github.com/wet-boew/GCWeb">GCWeb github repository</a>.</p>
 		</div>
 		<div class="col-xs-12 col-md-auto pull-right">
-			<p><a href="https://github.com/wet-boew/GCWeb/archive/v15.7.0.zip" class="btn btn-primary">Download GCWeb theme <strong>v15.7.0</strong></a><br />
+			<p><a href="https://github.com/wet-boew/GCWeb/archive/v15.8.0.zip" class="btn btn-primary">Download GCWeb theme <strong>v15.8.0</strong></a><br />
 				<small>(<time>{{ page.dateModified | date: '%F' }}</time> - <a href="https://github.com/wet-boew/gcweb/releases/latest">Release notes</a>)</small></p>
 		</div>
 	</div>

diff --git a/index-fr.md b/index-fr.md
@@ -1,7 +1,7 @@
 ---
 title: GCWeb, le thème WET-BOEW de Canada.ca
 altLangPage: index-en.html
-dateModified: 2024-10-15
+dateModified: 2024-11-12
 description: "Page d'accueil décrivant l'ensemble des composants du thème de Canada.ca, nommé GCWeb."
 layout: no-container
 language: fr
@@ -20,7 +20,7 @@ css:
 			<p>Les gabarits et les conceptions communes si dessous sont une référence d'implémentation du <a href="https://conception.canada.ca">Système de conception de Canada.ca</a>, incluant les exigences obligatoire de la spécifications du contenu et de l’architecture de l'information (C&amp;AI) pour Canada.ca. Les ministères et organisme du gouvernement du Canada peuvent y contribuer en publiant leur modèle et leur conception commune via le <a href="https://github.com/wet-boew/GCWeb">dépôt github de GCWeb</a>.</p>
 		</div>
 		<div class="col-xs-12 col-md-auto pull-right">
-			<p><a href="https://github.com/wet-boew/GCWeb/archive/v15.7.0.zip" class="btn btn-primary">Télécharger le thème <strong>GCWeb v15.7.0</strong></a><br />
+			<p><a href="https://github.com/wet-boew/GCWeb/archive/v15.8.0.zip" class="btn btn-primary">Télécharger le thème <strong>GCWeb v15.8.0</strong></a><br />
 				<small>(<time>{{ page.dateModified | date: '%F' }}</time> - <a href="https://github.com/wet-boew/gcweb/releases/latest">Note de version</a>)</small></p>
 		</div>
 	</div>