[TECH] Corriger comportement de screen reader sur l'affichage d'un no…

…uveau grain (PIX-11825). #8491
1024pix · Mar 29, 2024 · 4d89b7a · 4d89b7a
2 parents 96e8453 + e2ef853
commit 4d89b7a
Show file tree

Hide file tree

Showing 4 changed files with 2 additions and 55 deletions.
diff --git a/mon-pix/app/pods/components/module/grain/component.js b/mon-pix/app/pods/components/module/grain/component.js
@@ -39,10 +39,6 @@ export default class ModuleGrain extends Component {
     });
   }
 
-  get ariaLiveGrainValue() {
-    return this.args.hasJustAppeared ? 'assertive' : null;
-  }
-
   @action
   focusAndScroll(element) {
     if (!this.args.hasJustAppeared) {

diff --git a/mon-pix/app/pods/components/module/grain/template.hbs b/mon-pix/app/pods/components/module/grain/template.hbs
@@ -1,9 +1,4 @@
-<article
-  class="grain {{if @hasJustAppeared 'grain--active'}}"
-  aria-live={{this.ariaLiveGrainValue}}
-  tabindex="-1"
-  {{did-insert this.focusAndScroll}}
->
+<article class="grain {{if @hasJustAppeared 'grain--active'}}" tabindex="-1" {{did-insert this.focusAndScroll}}>
   <h2 class="screen-reader-only">{{@grain.title}}</h2>
 
   {{#if @transition}}

diff --git a/mon-pix/app/pods/components/module/passage/template.hbs b/mon-pix/app/pods/components/module/passage/template.hbs
@@ -6,7 +6,7 @@
     <h1>{{@module.title}}</h1>
   </div>
 
-  <div class="module-passage__content" {{did-insert this.setGrainScrollOffsetCssProperty}}>
+  <div class="module-passage__content" aria-live="assertive" {{did-insert this.setGrainScrollOffsetCssProperty}}>
     {{#each this.grainsToDisplay as |grain index|}}
       <Module::Grain
         @grain={{grain}}

diff --git a/mon-pix/tests/integration/components/module/passage_test.js b/mon-pix/tests/integration/components/module/passage_test.js
@@ -189,50 +189,6 @@ module('Integration | Component | Module | Passage', function (hooks) {
       assert.strictEqual(grainsAfterContinueAction.length, 2);
     });
 
-    test('should only set the aria-live="assertive" attribute on the last grain', async function (assert) {
-      // given
-      const store = this.owner.lookup('service:store');
-      const text1Element = { content: 'content', type: 'text' };
-      const text2Element = { content: 'content 2', type: 'text' };
-      const text3Element = { content: 'content 3', type: 'text' };
-      const grain1 = store.createRecord('grain', { elements: [text1Element] });
-      const grain2 = store.createRecord('grain', { elements: [text2Element] });
-      const grain3 = store.createRecord('grain', { elements: [text3Element] });
-
-      const module = store.createRecord('module', { title: 'Module title', grains: [grain1, grain2, grain3] });
-      this.set('module', module);
-
-      const passage = store.createRecord('passage');
-      this.set('passage', passage);
-
-      const screen = await render(hbs`<Module::Passage @module={{this.module}} @passage={{this.passage}} />`);
-
-      const grainsBeforeAnyAction = screen.getAllByRole('article');
-      assert.strictEqual(grainsBeforeAnyAction.length, 1);
-      const firstGrain = grainsBeforeAnyAction.at(-1);
-      assert.strictEqual(firstGrain.getAttribute('aria-live'), null);
-
-      // when
-      await clickByName(continueButtonName);
-
-      // then
-      const grainsAfterOneContinueActions = screen.getAllByRole('article');
-      assert.strictEqual(grainsAfterOneContinueActions.length, 2);
-      const secondGrain = grainsAfterOneContinueActions.at(-1);
-      assert.strictEqual(firstGrain.getAttribute('aria-live'), null);
-      assert.strictEqual(secondGrain.getAttribute('aria-live'), 'assertive');
-
-      // when
-      await clickByName(continueButtonName);
-
-      // then
-      const grainsAfterTwoContinueActions = screen.getAllByRole('article');
-      assert.strictEqual(grainsAfterTwoContinueActions.length, 3);
-      const thirdGrain = grainsAfterTwoContinueActions.at(-1);
-      assert.strictEqual(secondGrain.getAttribute('aria-live'), null);
-      assert.strictEqual(thirdGrain.getAttribute('aria-live'), 'assertive');
-    });
-
     test('should give focus on the last grain when appearing', async function (assert) {
       // given
       const store = this.owner.lookup('service:store');