From 3c7fc831da681ed9c8e4f40635ddaf361520094f Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Mon, 18 Nov 2024 15:27:39 +0100
Subject: [PATCH 1/3] fix(mon-pix): add heading in flashcards intro

---
 .../module/element/flashcards/_flashcards-card.scss      | 9 +++++++++
 .../module/element/flashcards/flashcards-intro-card.gjs  | 4 +---
 .../components/module/flashcards-intro-card_test.gjs     | 2 +-
 .../integration/components/module/flashcards_test.gjs    | 2 +-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/mon-pix/app/components/module/element/flashcards/_flashcards-card.scss b/mon-pix/app/components/module/element/flashcards/_flashcards-card.scss
index ef033475a4e..c7e0a2e27d9 100644
--- a/mon-pix/app/components/module/element/flashcards/_flashcards-card.scss
+++ b/mon-pix/app/components/module/element/flashcards/_flashcards-card.scss
@@ -15,6 +15,15 @@
   box-shadow: 0 12px 24px 0 rgb(7 20 46 / 12%);
 }
 
+/* To get higher specifity than `.modulix-passage h3` we double classes usage */
+.element-flashcards-intro-card {
+  .element-flashcards-intro-card {
+    &__title {
+      @extend %pix-title-s;
+    }
+  }
+}
+
 .element-flashcards-card {
   &__content {
     display: flex;
diff --git a/mon-pix/app/components/module/element/flashcards/flashcards-intro-card.gjs b/mon-pix/app/components/module/element/flashcards/flashcards-intro-card.gjs
index 23544bd51b9..1d56a2c4c7b 100644
--- a/mon-pix/app/components/module/element/flashcards/flashcards-intro-card.gjs
+++ b/mon-pix/app/components/module/element/flashcards/flashcards-intro-card.gjs
@@ -9,9 +9,7 @@ import { t } from 'ember-intl';
       </div>
     {{/if}}
 
-    <div class="element-flashcards-intro-card__text">
-      <p class="element-flashcards-intro-card__title">{{@title}}</p>
-    </div>
+    <h3 class="element-flashcards-intro-card__title">{{@title}}</h3>
 
     <div class="element-flashcards-intro-card__footer">
       <PixButton @triggerAction={{@onStart}} @variant="primary" @size="small">
diff --git a/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs b/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs
index 09abca78b29..5f0e273ec9a 100644
--- a/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs
+++ b/mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs
@@ -22,7 +22,7 @@ module('Integration | Component | Module | Flashcards Intro Card', function (hoo
     );
 
     // then
-    assert.ok(screen.getByText('Introduction à la poésie'));
+    assert.ok(screen.getByRole('heading', { name: 'Introduction à la poésie' }));
     assert.strictEqual(
       screen.getByRole('presentation').getAttribute('src'),
       'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg',
diff --git a/mon-pix/tests/integration/components/module/flashcards_test.gjs b/mon-pix/tests/integration/components/module/flashcards_test.gjs
index 0099b9f34dc..d668634d92d 100644
--- a/mon-pix/tests/integration/components/module/flashcards_test.gjs
+++ b/mon-pix/tests/integration/components/module/flashcards_test.gjs
@@ -32,7 +32,7 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
     const screen = await render(<template><ModulixFlashcards @flashcards={{flashcards}} /></template>);
 
     // then
-    assert.ok(screen.getByText("Introduction à l'adresse e-mail"));
+    assert.ok(screen.getByRole('heading', { name: "Introduction à l'adresse e-mail" }));
     assert.strictEqual(
       screen.getByRole('presentation').getAttribute('src'),
       'https://images.pix.fr/modulix/flashcards-intro.png',

From 8e87548898a0f12866ac3c3e1bbafe69c215bdaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Latzarus?= <c@ltzr.io>
Date: Mon, 18 Nov 2024 16:10:06 +0100
Subject: [PATCH 2/3] fix(mon-pix): add outline on flashcards button focus

Co-authored-by: Diane Cordier <diane.cordier@pix.fr>
---
 .../module/element/flashcards/_flashcards.scss    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/mon-pix/app/components/module/element/flashcards/_flashcards.scss b/mon-pix/app/components/module/element/flashcards/_flashcards.scss
index af50547cb8b..363204a2b01 100644
--- a/mon-pix/app/components/module/element/flashcards/_flashcards.scss
+++ b/mon-pix/app/components/module/element/flashcards/_flashcards.scss
@@ -88,6 +88,11 @@
           &:active {
             background: var(--pix-error-100);
           }
+
+          &:focus,
+          &:focus-visible {
+            outline: var(--pix-error-500) solid var(--button-border-size-hover);
+          }
         }
 
         &--almost {
@@ -105,6 +110,11 @@
           &:active {
             background: var(--pix-warning-100);
           }
+
+          &:focus,
+          &:focus-visible {
+            outline: var(--pix-warning-900) solid var(--button-border-size-hover);
+          }
         }
 
         &--yes {
@@ -122,6 +132,11 @@
           &:active {
             background: var(--pix-success-100);
           }
+
+          &:focus,
+          &:focus-visible {
+            outline: var(--pix-success-700) solid var(--button-border-size-hover);
+          }
         }
       }
     }

From b0e1a6ca0d0320a0d4dd7825d5ecd14d22f95c07 Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Mon, 18 Nov 2024 17:18:14 +0100
Subject: [PATCH 3/3] feat(mon-pix): scroll to flashcards when self-assesment

---
 .../app/components/module/element/flashcards/flashcards.gjs    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/mon-pix/app/components/module/element/flashcards/flashcards.gjs b/mon-pix/app/components/module/element/flashcards/flashcards.gjs
index b90de0d3a34..ceb8719a52d 100644
--- a/mon-pix/app/components/module/element/flashcards/flashcards.gjs
+++ b/mon-pix/app/components/module/element/flashcards/flashcards.gjs
@@ -111,6 +111,9 @@ export default class ModulixFlashcards extends Component {
     this.args.onSelfAssessment(selfAssessmentData);
     this.incrementCounterFor(userAssessment);
     this.goToNextCard();
+
+    const elementToFocus = document.querySelector('.element-flashcards');
+    elementToFocus.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'start' });
   }
 
   <template>