Steps quiz - fix content issue

wet-boew · Jul 15, 2024 · f63b938 · f63b938
1 parent 6e4a488
commit f63b938
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 4 deletions.
diff --git a/méli-mélo/2024-04-stepsquiz/index.html b/méli-mélo/2024-04-stepsquiz/index.html
@@ -27,6 +27,13 @@ <h2>GCWeb implementation plan</h2>
 {% endfor %}
 </ul>
 
+<p>Accessibility reports</p>
+<ul>
+{% for a11y in implPlan.a11y %}
+	<li>{{ a11y }}</li>
+{% endfor %}
+</ul>
+
 <p>Sponsor: {{ implPlan.sponsor }}</p>
 
 <section>
@@ -41,6 +48,25 @@ <h2>How to use</h2>
 	</ol>
 </section>
 
+<section>
+	<h2>List of changes</h2>
+	<dl class="dl-horizontal">
+		<dt>Date:</dt>
+		<dd>2024-07-15</dd>
+		<dt>Description:</dt>
+		<dd>
+			<ul>
+				<li>French translation functionality on language toggle for two text elements found in the compoment.</li>
+				<li>Addition of a <code>&lt;label&gt;</code> element around the <code>&lt;progress&gt;</code> element in order to resolve an accessibility issue (ref: <a href="reports/a11y-1-en.html">Accessibility assessment no.1 - Progress bar</a>).</li>
+			</ul>
+		</dd>
+		<dt>Impact on the sponsoring department:</dt>
+		<dd>Prevents a possible complaint related to official languages and/or accessibility.</dd>
+		<dt>Impact on users:</dt>
+		<dd>Access to content that complies with official languages and that meets WCAG accessibilty guidlines 2.1 (Option: Level AA).</dd>
+	</dl>
+</section>
+
 <section>
 	<h2>Working Examples</h2>
 	<ul>

diff --git a/méli-mélo/2024-04-stepsquiz/js/stepsquiz.js b/méli-mélo/2024-04-stepsquiz/js/stepsquiz.js
@@ -7,6 +7,18 @@
 ( function( $, document ) {
 "use strict";
 
+// Fetch page language and set variables accordingly
+let relpreposition = " of ",
+progressLabel = "Questionnaire progress:";
+
+// Define French progress label
+if ( wb.lang === "fr" ) {
+	relpreposition = " de ";
+	progressLabel = "Progression du questionnaire : ";
+
+}
+
+
 //Detect the enhancement of the quiz
 var quizSelector = ".provisional.wb-steps.quiz",
 	instances = document.querySelectorAll( quizSelector );
@@ -19,8 +31,7 @@ instances.forEach ( ( instance ) => {
 	let numQuestion = $( "fieldset", $instance ).length;
 
 	// Addition to UI (Ex: progress bar)
-	$( "form", $instance ).prepend( "<p class='progressText' role='status'></p>" );
-	$( "form", $instance ).prepend( "<p><progress class='progressBar' max='" + numQuestion + "'></progress></p>" );
+	$( "form", $instance ).prepend( "<label>" + progressLabel + "<progress class='progressBar' max='" + numQuestion + "'></progress><p class='progressText' role='status'></p></label>" );
 
 });
 
@@ -52,7 +63,7 @@ var hideOtherSteps = function( e ) {
 	let numQuestion = $progressBar.attr( "max" );
 
 	// Set the progress label
-	$( "p.progressText", steps ).text( currentTabId + " of  " + numQuestion );
+	$( "p.progressText", steps ).text( currentTabId + relpreposition + numQuestion );
 
 	// Update progress bar
   	$progressBar.val( currentTabId );

diff --git a/méli-mélo/2024-04-stepsquiz/meta.md b/méli-mélo/2024-04-stepsquiz/meta.md
@@ -39,6 +39,9 @@ implementationPlan:
   - due: 2026-05
     what: Have this feature officialy integrated to the Steps Form plugin.
 
+a11y:
+  - 2024-06-25 - <a href="reports/a11y-1-en.html">Accessibility assessment no.1 - Progress bar</a>
+
 todos:
   - Write governance and rationale for the use of this design.
   - Optimize code as suggested in the <a href="https://github.com/wet-boew/GCWeb/pull/2347">Github pull request &#35;2347</a>.

diff --git a/méli-mélo/2024-04-stepsquiz/reports/a11y-1-en.html b/méli-mélo/2024-04-stepsquiz/reports/a11y-1-en.html
@@ -0,0 +1,94 @@
+---
+title: Accessibility assessment #1 - Progress bar
+dateModified: 2024-07-15
+description: "Accessibility assessment for the progress bar element."
+lang: en
+---
+<p>Partial. Evaluation of new Success Criteria at Level A and Level AA of WCAG 2.1 and WCAG 2.2</p>
+
+<h2>GCWeb implementation plan</h2>
+
+{% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2024-04-stepsquiz" | first %}
+
+<nav>
+	<h3>On this page</h3>
+	<ul>
+		<li><a href="#summary">Summary</a></li>
+		<li><a href="#acr">Assessement details</a></li>
+	</ul>
+</nav>
+
+<section>
+	<h3 id="summary">Summary</h2>
+	<p>This is an informal assessment based on an accessibility testing rule set. It cannot be seen as an accessibility conformance report. The latter is published separately from the assessment and only indicates if the requirements are satisfied, not satisfied, or if further testing is needed as specified by establishing the conformity described in WCAG 2.1. This assessment can contain false positives, false negatives, or be accurate. The assessment interpretation, via the accessibility conformance report, can consider other independent assessments in order to establish the conformance.</p>
+
+	<dl >
+		<dt>Type:</dt>
+		<dd>Accessibility assessment</dd>
+		<dt>Asserted by:</dt>
+		<dd><a href="https://esdc.prv/en/hrsb/accessibility/roadmap.shtml">ESDC Accessibility Office</a></dd>
+		<dt>Date:</dt>
+		<dd>2024-06-25</dd>
+		<dt>Subject:</dt>
+		<dd>
+			<ul class="list-unstyled">
+				<li><strong>Page / Screen title</strong>: Questionnaire - What to do when someone dies</li>
+				<li><strong>Page URL</strong>: <a href="https://www.canada.ca/en/employment-social-development/employment-social-development/navigating-death/questionnaire.html">https://www.canada.ca/en/employment-social-development/employment-social-development/navigating-death/questionnaire.html</a></li>
+				<li><strong>Applicability:</strong> In the context of the life events project conduct by Canada.ca Journey Lab.</li>
+				<li><strong>HTML element:</strong> <code>&lt;progress&gt;</code></li>
+			</ul>
+		</dd>
+		<dt>Toward a conformity at:</dt>
+		<dd>WCAG 2.1 (Option: Level AA)</dd>
+		<dt>Summary:</dt>
+		<dd>Partial evaluation focused only on the component not its container. Evaluated all Success Criteria at Level AA of WCAG 2.2</dd>
+	</dl>
+
+	<h3 id="acr">Assessment details</h3>
+	<table class="table table-hover table-bordered" cellspacing="0" rules="all" border="1" id="MainContent_FormView_GridViewPoints" style="border-collapse:collapse;">
+		<tbody
+			<tr>
+				<th scope="col">Standard Name</th><th scope="col">Point Name</th>
+			</tr>
+			<tr>
+				<td>Web Content Accessibility Guidelines</td><td>1.3.1 Info and Relationships (Level A)</td>
+			</tr>
+			<tr>
+				<td>Web Content Accessibility Guidelines</td><td>3.3.2 Labels or Instructions (Level A)</td>
+			</tr>
+			<tr>
+				<td>Web Content Accessibility Guidelines</td><td>4.1.2 Name, Role, Value (Level A)</td>
+			</tr>
+		</tbody>
+	</table>
+	<dl class="dl-horizontal">
+		<dt>Error Title:</dt>
+		<dd>Form elements must have labels.</dd>
+		<dt>Error Severity:</dt>
+		<dd>Critical</dd>
+		<dt>Date fixed:</dt>
+		<dd>2024-07-15</dd>
+		<dt>Description:</dt>
+		<dd>The progress bar does not have a label.</dd>
+		<dt>Impact on Users:</dt>
+		<dd>Screen reader users do not hear anything that would make them think it is a progress bar, they only hear : "clickable progress bar 1 1 of 4 grouping My relationship to the deceased is:"</dd>
+		<dt>Pattern (required if on multiple pages):</dt>
+		<dd>This occurs on all Questionnaire pages.</dd>
+		<dt>Steps to Reproduce:</dt>
+		<dd>
+			<ol>
+				<li>Load the page <a href="https://www.canada.ca/en/employment-social-development/employment-social-development/navigating-death/questionnaire.html">https://www.canada.ca/en/employment-social-development/employment-social-development/navigating-death/questionnaire.html</a>.</li>
+				<li>Open a screen reader such as NVDA.</li>
+				<li>Read the page.</li>
+				<li>Note that the screen reader reads "clickable progress bar 1 1 of 4 grouping My relationship to the deceased is:".</li>
+				<li>right click on the progress bar and choose inspect.</li>
+				<li>Note that the progress bar does not have a label</li>
+			</ol>
+		</dd>
+		<dt>Sample Code:</dt>
+		<dd><code>&lt;p&gt;&lt;progress max="4" class="progressBar" value="1"&gt;&lt;/progress&gt;&lt;/p&gt; &lt;p role="status" class="progressText"&gt;1 of 4&lt;/p&gt;</code></dd>
+		<dt>Remediation:</dt>
+		<dd>Recommendation would be to add a label to the progress bar component that is descriptive of what it represents. For example: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#accessibility">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#accessibility</a></dd>
+			</dl>
+</section>
+
diff --git a/méli-mélo/2024-04-stepsquiz/stepsquiz.css b/méli-mélo/2024-04-stepsquiz/stepsquiz.css
@@ -9,7 +9,8 @@
 }
 
 /* Customisation for the progress bar and text */
-.provisional.wb-steps.quiz progress.progressBar{
+.provisional.wb-steps.quiz progress.progressBar,
+.provisional.wb-steps.quiz label {
 	/*-webkit-appearance: progress-bar;*/
 	width: 100%;
 }