[TECH] Rendre accessible les écrans d'instruction (PIX-11847)

#9465
1024pix · Jul 12, 2024 · af4850a · af4850a
2 parents 5fab746 + b3ee8f6
commit af4850a
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 28 deletions.
diff --git a/mon-pix/app/components/certification-instructions/step-five.hbs b/mon-pix/app/components/certification-instructions/step-five.hbs
@@ -1,4 +1,8 @@
-<div class="instructions-content">
+<h2 {{did-insert @focus}} tabindex="0" class="instructions-step__title">{{@title}}
+  <span class="screen-reader-only">{{@vocalStepIdentifier}}</span>
+</h2>
+
+<div class="instructions-content" tabindex="0">
   <span class="instructions-content__title--bold">{{t "pages.certification-instructions.steps.5.text"}}</span>
   <ul class="instructions-content-list">
     <li>

diff --git a/mon-pix/app/components/certification-instructions/step-four.hbs b/mon-pix/app/components/certification-instructions/step-four.hbs
@@ -1,3 +1,7 @@
-<p>
+<h2 {{did-insert @focus}} tabindex="0" class="instructions-step__title">{{@title}}
+  <span class="screen-reader-only">{{@vocalStepIdentifier}}</span>
+</h2>
+
+<p tabindex="0">
   {{t "pages.certification-instructions.steps.4.paragraph.text" htmlSafe=true}}
 </p>
diff --git a/mon-pix/app/components/certification-instructions/step-one.hbs b/mon-pix/app/components/certification-instructions/step-one.hbs
@@ -1,4 +1,8 @@
-<div class="instructions-content">
+<h2 {{did-insert @focus}} tabindex="0" class="instructions-step__title">{{@title}}
+  <span class="screen-reader-only">{{@vocalStepIdentifier}}</span>
+</h2>
+
+<div class="instructions-content" tabindex="0">
   <h3 class="instructions-content__title--bold">
     {{t "pages.certification-instructions.steps.1.question"}}
   </h3>

diff --git a/mon-pix/app/components/certification-instructions/step-three.hbs b/mon-pix/app/components/certification-instructions/step-three.hbs
@@ -1,4 +1,8 @@
-<div class="instructions-content-with-images">
+<h2 {{did-insert @focus}} tabindex="0" class="instructions-step__title">{{@title}}
+  <span class="screen-reader-only">{{@vocalStepIdentifier}}</span>
+</h2>
+
+<div class="instructions-content-with-images" tabindex="0">
   <div class="instructions-content__images">
     <img
       class="instructions-content__image"

diff --git a/mon-pix/app/components/certification-instructions/step-two.hbs b/mon-pix/app/components/certification-instructions/step-two.hbs
@@ -1,4 +1,8 @@
-<div class="instructions-content-with-images">
+<h2 {{did-insert @focus}} tabindex="0" class="instructions-step__title">{{@title}}
+  <span class="screen-reader-only">{{@vocalStepIdentifier}}</span>
+</h2>
+
+<div class="instructions-content-with-images" tabindex="0">
   <div class="instructions-content-with-images__legend">
     <img
       class="instructions-content__image"

diff --git a/mon-pix/app/components/certification-instructions/steps.hbs b/mon-pix/app/components/certification-instructions/steps.hbs
@@ -1,26 +1,45 @@
-<h2 class="instructions-step__title">{{this.title}}</h2>
-
 {{#if (eq this.pageId 1)}}
-  <CertificationInstructions::StepOne />
+  <CertificationInstructions::StepOne
+    @vocalStepIdentifier={{this.vocalStepIdentifier}}
+    @focus={{this.focus}}
+    @title={{this.title}}
+  />
 {{/if}}
 {{#if (eq this.pageId 2)}}
-  <CertificationInstructions::StepTwo />
+  <CertificationInstructions::StepTwo
+    @vocalStepIdentifier={{this.vocalStepIdentifier}}
+    @focus={{this.focus}}
+    @title={{this.title}}
+  />
 {{/if}}
 {{#if (eq this.pageId 3)}}
-  <CertificationInstructions::StepThree />
+  <CertificationInstructions::StepThree
+    @vocalStepIdentifier={{this.vocalStepIdentifier}}
+    @focus={{this.focus}}
+    @title={{this.title}}
+  />
 {{/if}}
 {{#if (eq this.pageId 4)}}
-  <CertificationInstructions::StepFour />
+  <CertificationInstructions::StepFour
+    @vocalStepIdentifier={{this.vocalStepIdentifier}}
+    @focus={{this.focus}}
+    @title={{this.title}}
+  />
 {{/if}}
 {{#if (eq this.pageId 5)}}
-  <CertificationInstructions::StepFive @enableNextButton={{this.enableNextButton}} />
+  <CertificationInstructions::StepFive
+    @enableNextButton={{this.enableNextButton}}
+    @vocalStepIdentifier={{this.vocalStepIdentifier}}
+    @focus={{this.focus}}
+    @title={{this.title}}
+  />
 {{/if}}
 
 <footer class="instructions-footer">
-  <div>
+  <div class="instructions-footer-dots">
     {{#each this.paging as |page-class|}}
       <img
-        class="instructions-footer__dot {{page-class}}"
+        class="instructions-footer-dots__dot {{page-class}}"
         src="/images/illustrations/certification-instructions-steps/ellipse.svg"
         alt=""
       />

diff --git a/mon-pix/app/components/certification-instructions/steps.js b/mon-pix/app/components/certification-instructions/steps.js
@@ -37,6 +37,17 @@ export default class Steps extends Component {
     return this.intl.t(`pages.certification-instructions.buttons.continuous.${translationKey}`);
   }
 
+  get vocalStepIdentifier() {
+    return this.intl.t(`pages.certification-instructions.vocal-step-identifier`, {
+      pageId: this.pageId,
+      pageCount: this.pageCount,
+    });
+  }
+
+  focus(element) {
+    element.focus();
+  }
+
   @action
   previousStep() {
     this.pageId = this.pageId - 1;

diff --git a/mon-pix/app/styles/pages/_certification-instructions.scss b/mon-pix/app/styles/pages/_certification-instructions.scss
@@ -147,6 +147,13 @@
   }
 }
 
-.instructions-footer__dot.active {
-    filter: brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(7283%) hue-rotate(246deg) brightness(90%) contrast(94%);
+.instructions-footer-dots {
+  &__dot {
+    vertical-align: middle;
+  }
+
+  &__dot.active {
+      height: 10px;
+      filter: brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(7283%) hue-rotate(246deg) brightness(90%) contrast(94%);
+  }
 }
diff --git a/mon-pix/tests/acceptance/authenticated/certifications/information_test.js b/mon-pix/tests/acceptance/authenticated/certifications/information_test.js
@@ -53,7 +53,9 @@ module('Acceptance | Certifications | Information', function (hooks) {
         // then
         assert.strictEqual(currentURL(), '/certifications/candidat/2/informations');
         assert.dom(screen.getByRole('heading', { name: 'Explication de la certification', level: 1 })).exists();
-        assert.dom(screen.getByRole('heading', { name: 'Bienvenue à la certification Pix', level: 2 })).exists();
+        assert
+          .dom(screen.getByRole('heading', { name: 'Bienvenue à la certification Pix Page 1 sur 5', level: 2 }))
+          .exists();
         assert.dom(screen.getByRole('button', { name: "Continuer vers l'écran suivant" })).exists();
       });
 

diff --git a/mon-pix/tests/integration/components/steps_test.js b/mon-pix/tests/integration/components/steps_test.js
@@ -16,7 +16,9 @@ module('Integration | Component | steps', function (hooks) {
         const screen = await render(hbs`<CertificationInstructions::Steps/>`);
 
         // then
-        assert.dom(screen.getByRole('heading', { name: 'Bienvenue à la certification Pix', level: 2 })).exists();
+        assert
+          .dom(screen.getByRole('heading', { name: 'Bienvenue à la certification Pix Page 1 sur 5', level: 2 }))
+          .exists();
         assert
           .dom(screen.getByRole('heading', { name: 'Comment fonctionne le test de certification ?', level: 3 }))
           .exists();
@@ -42,7 +44,9 @@ module('Integration | Component | steps', function (hooks) {
 
         // then
         assert
-          .dom(screen.getByRole('heading', { name: 'Comment se passe le test de certification ?', level: 2 }))
+          .dom(
+            screen.getByRole('heading', { name: 'Comment se passe le test de certification ? Page 2 sur 5', level: 2 }),
+          )
           .exists();
         assert.dom(screen.getByRole('heading', { name: 'Le nombre de questions ?', level: 3 })).exists();
         assert.dom(screen.getByRole('heading', { name: 'La durée du test ?', level: 3 })).exists();
@@ -63,7 +67,7 @@ module('Integration | Component | steps', function (hooks) {
         await click(screen.getByRole('button', { name: "Continuer vers l'écran suivant" }));
 
         // then
-        assert.dom(screen.getByRole('heading', { name: 'Deux modes de questions', level: 2 })).exists();
+        assert.dom(screen.getByRole('heading', { name: 'Deux modes de questions Page 3 sur 5', level: 2 })).exists();
         const terms = screen.getAllByRole('term');
         assert.strictEqual(terms[0].textContent.trim(), 'Le mode libre :');
         assert.strictEqual(terms[1].textContent.trim(), 'Le mode focus :');
@@ -86,7 +90,9 @@ module('Integration | Component | steps', function (hooks) {
         }
 
         // then
-        assert.dom(screen.getByRole('heading', { name: 'Que faire en cas de problème ?', level: 2 })).exists();
+        assert
+          .dom(screen.getByRole('heading', { name: 'Que faire en cas de problème ? Page 4 sur 5', level: 2 }))
+          .exists();
         assert.dom(screen.getByText('En cas de problème technique')).exists();
       });
     });
@@ -99,7 +105,7 @@ module('Integration | Component | steps', function (hooks) {
         await _goToLastPage(screen);
 
         // then
-        assert.dom(screen.getByRole('heading', { name: 'Règles à respecter', level: 2 })).exists();
+        assert.dom(screen.getByRole('heading', { name: 'Règles à respecter Page 5 sur 5', level: 2 })).exists();
         assert.dom(screen.getByText('En certification, il est interdit de :')).exists();
         assert
           .dom(

diff --git a/mon-pix/translations/en.json b/mon-pix/translations/en.json
@@ -525,7 +525,8 @@
           },
           "text": "During the certification, it is forbidden to:"
         }
-      }
+      },
+      "vocal-step-identifier": "Page {pageId} on {pageCount}"
     },
     "certification-joiner": {
       "title": "Join a certification session",
@@ -1891,4 +1892,4 @@
       }
     }
   }
-}
+}
diff --git a/mon-pix/translations/es.json b/mon-pix/translations/es.json
@@ -525,7 +525,8 @@
           "title": "Normas que deben respetarse"
         }
       },
-      "title": "Explicación de la certificación"
+      "title": "Explicación de la certificación",
+      "vocal-step-identifier": "Page {pageId} sur {pageCount}"
     },
     "certification-joiner": {
       "congratulation-banner": {

diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json
@@ -525,7 +525,8 @@
           },
           "text": "En certification, il est interdit de :"
         }
-      }
+      },
+      "vocal-step-identifier": "Page {pageId} sur {pageCount}"
     },
     "certification-joiner": {
       "title": "Rejoindre une session de certification",
@@ -1891,4 +1892,4 @@
       }
     }
   }
-}
+}
diff --git a/mon-pix/translations/nl.json b/mon-pix/translations/nl.json
@@ -525,7 +525,8 @@
           "title": "Regels die moeten worden nageleefd"
         }
       },
-      "title": "Verklaring van certificering"
+      "title": "Verklaring van certificering",
+      "vocal-step-identifier": "Page {pageId} sur {pageCount}"
     },
     "certification-joiner": {
       "congratulation-banner": {