[FEATURE] Faire une passe sur l'accessibilité pour l'élément Flashcar…

…ds (PIX-14427) #10582
1024pix · Nov 19, 2024 · d45b3ff · d45b3ff
2 parents 0fb0ec0 + b0e1a6c
commit d45b3ff
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 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
@@ -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.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);
+          }
         }
       }
     }

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
@@ -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/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>

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
@@ -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
@@ -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',