♿ mon-pix: vocal reading improvment

1024pix · Jul 12, 2024 · b3ee8f6 · b3ee8f6
1 parent 14eba29
commit b3ee8f6
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 14 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,21 +1,38 @@
-<h2 tabindex="0" class="instructions-step__title">{{this.title}}
-  <span class="screen-reader-only">{{this.vocalStepIdentifier}}</span>
-</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">

diff --git a/mon-pix/app/components/certification-instructions/steps.js b/mon-pix/app/components/certification-instructions/steps.js
@@ -44,6 +44,10 @@ export default class Steps extends Component {
     });
   }
 
+  focus(element) {
+    element.focus();
+  }
+
   @action
   previousStep() {
     this.pageId = this.pageId - 1;