fix(mon-pix): legend tag should be direct child of fieldset

1024pix · May 22, 2024 · f6ee965 · f6ee965
1 parent 35cf72f
commit f6ee965
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 99 deletions.
diff --git a/mon-pix/app/pods/components/module/qcm/styles.scss b/mon-pix/app/pods/components/module/qcm/styles.scss
@@ -1,11 +1,17 @@
 .element-qcm {
-  &__header {
-    display: flex;
-    flex-direction: column-reverse;
+  &__instruction {
+    margin-bottom: var(--pix-spacing-2x);
+    font-weight: var(--pix-font-medium);
+  }
+
+  &__direction {
+    @extend %pix-body-s;
+
+    color: var(--pix-neutral-500);
   }
 
   &__proposals {
-    margin-bottom: var(--pix-spacing-4x);
+    margin: var(--pix-spacing-4x) 0;
   }
 
   &__required-field-missing {
@@ -17,20 +23,6 @@
   }
 }
 
-.element-qcm-header {
-  &__direction {
-    @extend %pix-body-s;
-
-    margin-bottom: var(--pix-spacing-4x);
-    color: var(--pix-neutral-500);
-  }
-
-  &__instruction {
-    margin-bottom: var(--pix-spacing-2x);
-    font-weight: var(--pix-font-medium);
-  }
-}
-
 .element-qcm-proposals {
   &__proposal {
     padding: var(--pix-spacing-2x);

diff --git a/mon-pix/app/pods/components/module/qcm/template.hbs b/mon-pix/app/pods/components/module/qcm/template.hbs
@@ -1,15 +1,17 @@
-<form class="element-qcm">
-  <fieldset>
-    <div class="element-qcm__header">
-      <legend class="element-qcm-header__direction">
-        {{t "pages.modulix.qcm.direction"}}
-      </legend>
+<form class="element-qcm" aria-describedby="instruction-{{this.element.id}}">
+  <fieldset disabled={{this.disableInput}}>
+    <legend class="screen-reader-only">
+      {{t "pages.modulix.qcm.direction"}}
+    </legend>
 
-      <div class="element-qcm-header__instruction">
-        {{html-unsafe this.element.instruction}}
-      </div>
+    <div class="element-qcm__instruction" id="instruction-{{this.element.id}}">
+      {{html-unsafe this.element.instruction}}
     </div>
 
+    <p class="element-qcm__direction" aria-hidden="true">
+      {{t "pages.modulix.qcm.direction"}}
+    </p>
+
     <div class="element-qcm__proposals">
       {{#each this.element.proposals as |proposal|}}
         <div class="element-qcm-proposals__proposal">

diff --git a/mon-pix/app/pods/components/module/qcu/styles.scss b/mon-pix/app/pods/components/module/qcu/styles.scss
@@ -1,11 +1,17 @@
 .element-qcu {
-  &__header {
-    display: flex;
-    flex-direction: column-reverse;
+  &__instruction {
+    margin-bottom: var(--pix-spacing-2x);
+    font-weight: var(--pix-font-medium);
+  }
+
+  &__direction {
+    @extend %pix-body-s;
+
+    color: var(--pix-neutral-500);
   }
 
   &__proposals {
-    margin-bottom: var(--pix-spacing-4x);
+    margin: var(--pix-spacing-4x) 0;
   }
 
   &__required-field-missing {
@@ -17,20 +23,6 @@
   }
 }
 
-.element-qcu-header {
-  &__direction {
-    @extend %pix-body-s;
-
-    margin-bottom: var(--pix-spacing-4x);
-    color: var(--pix-neutral-500);
-  }
-
-  &__instruction {
-    margin-bottom: var(--pix-spacing-2x);
-    font-weight: var(--pix-font-medium);
-  }
-}
-
 .element-qcu-proposals {
   &__proposal {
     padding: var(--pix-spacing-2x);

diff --git a/mon-pix/app/pods/components/module/qcu/template.hbs b/mon-pix/app/pods/components/module/qcu/template.hbs
@@ -1,15 +1,17 @@
-<form class="element-qcu">
-  <fieldset>
-    <div class="element-qcu__header">
-      <legend class="element-qcu-header__direction">
-        {{t "pages.modulix.qcu.direction"}}
-      </legend>
+<form class="element-qcu" aria-describedby="instruction-{{this.element.id}}">
+  <fieldset disabled={{this.disableInput}}>
+    <legend class="screen-reader-only">
+      {{t "pages.modulix.qcu.direction"}}
+    </legend>
 
-      <div class="element-qcu-header__instruction">
-        {{html-unsafe this.element.instruction}}
-      </div>
+    <div class="element-qcu__instruction" id="instruction-{{this.element.id}}">
+      {{html-unsafe this.element.instruction}}
     </div>
 
+    <p class="element-qcu__direction" aria-hidden="true">
+      {{t "pages.modulix.qcu.direction"}}
+    </p>
+
     <div class="element-qcu__proposals">
       {{#each this.element.proposals as |proposal|}}
         <div class="element-qcu-proposals__proposal">

diff --git a/mon-pix/app/pods/components/module/qrocm/styles.scss b/mon-pix/app/pods/components/module/qrocm/styles.scss
@@ -1,11 +1,17 @@
 .element-qrocm {
-  &__header {
-    display: flex;
-    flex-direction: column-reverse;
+  &__instruction {
+    margin-bottom: var(--pix-spacing-2x);
+    font-weight: var(--pix-font-medium);
+  }
+
+  &__direction {
+    @extend %pix-body-s;
+
+    color: var(--pix-neutral-500);
   }
 
   &__proposals {
-    margin-bottom: var(--pix-spacing-4x);
+    margin: var(--pix-spacing-4x) 0;
   }
 
   &__required-field-missing {
@@ -17,20 +23,6 @@
   }
 }
 
-.element-qrocm-header {
-  &__direction {
-    @extend %pix-body-s;
-
-    margin-bottom: var(--pix-spacing-4x);
-    color: var(--pix-neutral-500);
-  }
-
-  &__instruction {
-    margin-bottom: var(--pix-spacing-2x);
-    font-weight: var(--pix-font-medium);
-  }
-}
-
 .element-qrocm-proposals {
   &__input {
     line-height: var(--pix-spacing-12x);

diff --git a/mon-pix/app/pods/components/module/qrocm/template.hbs b/mon-pix/app/pods/components/module/qrocm/template.hbs
@@ -1,15 +1,24 @@
-<form class="element-qrocm" autocapitalize="off" autocomplete="nope" autocorrect="off" spellcheck="false">
+<form
+  class="element-qrocm"
+  aria-describedby="instruction-{{this.element.id}}"
+  autocapitalize="off"
+  autocomplete="nope"
+  autocorrect="off"
+  spellcheck="false"
+>
   <fieldset disabled={{this.disableInput}}>
-    <div class="element-qrocm__header">
-      <legend class="element-qrocm-header__direction">
-        {{t "pages.modulix.qrocm.direction" count=this.nbOfProposals}}
-      </legend>
+    <legend class="screen-reader-only">
+      {{t "pages.modulix.qrocm.direction" count=this.nbOfProposals}}
+    </legend>
 
-      <div class="element-qrocm-header__instruction">
-        {{html-unsafe this.element.instruction}}
-      </div>
+    <div class="element-qrocm__instruction" id="instruction-{{this.element.id}}">
+      {{html-unsafe this.element.instruction}}
     </div>
 
+    <p class="element-qrocm__direction" aria-hidden="true">
+      {{t "pages.modulix.qrocm.direction" count=this.nbOfProposals}}
+    </p>
+
     <div class="element-qrocm__proposals">
       {{#each this.formattedProposals as |block|}}
         {{#if (eq block.type "text")}}

diff --git a/mon-pix/tests/integration/components/module/qcm_test.js b/mon-pix/tests/integration/components/module/qcm_test.js
@@ -1,5 +1,6 @@
 import { render } from '@1024pix/ember-testing-library';
-import { click, findAll } from '@ember/test-helpers';
+// eslint-disable-next-line no-restricted-imports
+import { click, find } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
@@ -25,11 +26,14 @@ module('Integration | Component | Module | QCM', function (hooks) {
 
     // then
     assert.ok(screen);
-    assert.strictEqual(findAll('.element-qcm-header__instruction').length, 1);
-    assert.strictEqual(findAll('.element-qcm-header__direction').length, 1);
-    assert.ok(screen.getByText('Instruction'));
     assert.ok(screen.getByRole('group', { legend: this.intl.t('pages.modulix.qcm.direction') }));
 
+    // Pas possible de faire un `getByRole('form')`. Voir https://github.com/1024pix/pix/pull/8835#discussion_r1596407648
+    const form = find('form');
+    assert.dom(form).exists();
+    const formDescription = find(`#${form.getAttribute('aria-describedby')}`);
+    assert.dom(formDescription).hasText('Instruction');
+
     assert.strictEqual(screen.getAllByRole('checkbox').length, qcmElement.proposals.length);
     assert.ok(screen.getByLabelText('checkbox1'));
     assert.ok(screen.getByLabelText('checkbox2'));

diff --git a/mon-pix/tests/integration/components/module/qcu_test.js b/mon-pix/tests/integration/components/module/qcu_test.js
@@ -1,5 +1,6 @@
 import { render } from '@1024pix/ember-testing-library';
-import { click, findAll } from '@ember/test-helpers';
+// eslint-disable-next-line no-restricted-imports
+import { click, find } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
@@ -27,11 +28,14 @@ module('Integration | Component | Module | QCU', function (hooks) {
 
     // then
     assert.ok(screen);
-    assert.strictEqual(findAll('.element-qcu-header__instruction').length, 1);
-    assert.strictEqual(findAll('.element-qcu-header__direction').length, 1);
-    assert.ok(screen.getByText('Instruction'));
     assert.ok(screen.getByRole('group', { legend: this.intl.t('pages.modulix.qcu.direction') }));
 
+    // Pas possible de faire un `getByRole('form')`. Voir https://github.com/1024pix/pix/pull/8835#discussion_r1596407648
+    const form = find('form');
+    assert.dom(form).exists();
+    const formDescription = find(`#${form.getAttribute('aria-describedby')}`);
+    assert.dom(formDescription).hasText('Instruction');
+
     assert.strictEqual(screen.getAllByRole('radio').length, qcuElement.proposals.length);
     assert.ok(screen.getByLabelText('radio1'));
     assert.ok(screen.getByLabelText('radio2'));

diff --git a/mon-pix/tests/integration/components/module/qrocm_test.js b/mon-pix/tests/integration/components/module/qrocm_test.js
@@ -1,5 +1,6 @@
 import { clickByName, render } from '@1024pix/ember-testing-library';
-import { click, fillIn } from '@ember/test-helpers';
+// eslint-disable-next-line no-restricted-imports
+import { click, fillIn, find } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
@@ -48,19 +49,20 @@ module('Integration | Component | Module | QROCM', function (hooks) {
       type: 'qrocm',
     };
     this.set('el', qrocm);
-    const screen = await render(hbs`
-        <Module::Qrocm @element={{this.el}} />`);
+    const screen = await render(hbs`<Module::Qrocm @element={{this.el}} />`);
+    const direction = this.intl.t('pages.modulix.qrocm.direction', {
+      count: qrocm.proposals.filter(({ type }) => type !== 'text').length,
+    });
 
     // then
     assert.ok(screen);
-    assert.dom(screen.getByText('Mon instruction')).exists({ count: 1 });
-    assert.ok(
-      screen.getByRole('group', {
-        legend: this.intl.t('pages.modulix.qrocm.direction', {
-          count: qrocm.proposals.filter(({ type }) => type !== 'text').length,
-        }),
-      }),
-    );
+    assert.ok(screen.getByRole('group', { legend: direction }));
+
+    const form = find('form');
+    assert.dom(form).exists();
+    const formDescription = find(`#${form.getAttribute('aria-describedby')}`);
+    assert.dom(formDescription).hasText('Mon instruction');
+
     assert.dom(screen.getByText('Ma première proposition')).exists({ count: 1 });
     assert.ok(screen.getByRole('textbox', { name: 'input-aria' }));
     assert.dom(screen.getByText("l'identifiant")).exists({ count: 1 });