Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Jul 12, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3303fe
:wheelchair: mon-pix: distinct dot shape on active screen
P-Jeremy Jul 5, 2024
14eba29
:wheelchair: mon-pix: add step vocal identifier
P-Jeremy Jul 8, 2024
b3ee8f6
:wheelchair: mon-pix: vocal reading improvment
P-Jeremy Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion mon-pix/app/components/certification-instructions/step-five.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
<div class="instructions-content">
<h2 {{did-insert @focus}} tabindex="0" class="instructions-step__title">{{@title}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh ! Bien trouvé le did-insert 👍 j'ai découvert quelque chose :)

<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>
Expand Down
6 changes: 5 additions & 1 deletion mon-pix/app/components/certification-instructions/step-four.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 5 additions & 1 deletion mon-pix/app/components/certification-instructions/step-one.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
6 changes: 5 additions & 1 deletion mon-pix/app/components/certification-instructions/step-three.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
6 changes: 5 additions & 1 deletion mon-pix/app/components/certification-instructions/step-two.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
37 changes: 28 additions & 9 deletions mon-pix/app/components/certification-instructions/steps.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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=""
/>
Expand Down
11 changes: 11 additions & 0 deletions mon-pix/app/components/certification-instructions/steps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 9 additions & 2 deletions mon-pix/app/styles/pages/_certification-instructions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
}
}
4 changes: 3 additions & 1 deletion mon-pix/tests/acceptance/authenticated/certifications/information_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand Down
16 changes: 11 additions & 5 deletions mon-pix/tests/integration/components/steps_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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 :');
Expand All @@ -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();
});
});
Expand All @@ -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(
Expand Down
5 changes: 3 additions & 2 deletions mon-pix/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -1891,4 +1892,4 @@
}
}
}
}
}
3 changes: 2 additions & 1 deletion mon-pix/translations/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
5 changes: 3 additions & 2 deletions mon-pix/translations/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -1891,4 +1892,4 @@
}
}
}
}
}
3 changes: 2 additions & 1 deletion mon-pix/translations/nl.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down