[BUMP] Update dependency @1024pix/pix-ui to v45 (mon-pix)

mon-pix/app/components/account-recovery/confirmation-step.hbs

@@ -44,8 +44,10 @@
     </li>
   </ul>
 
-  <PixCheckbox @id="pix-certify" {{on "change" this.onChange}} @labelSize="small">
-    {{t "pages.account-recovery.find-sco-record.confirmation-step.certify-account"}}
+  <PixCheckbox @id="pix-certify" {{on "change" this.onChange}} @size="small">
+    <:label>
+      {{t "pages.account-recovery.find-sco-record.confirmation-step.certify-account"}}
+    </:label>
   </PixCheckbox>
 
   <div class="account-recovery__content--actions">

mon-pix/app/components/account-recovery/update-sco-record-form.hbs

@@ -29,7 +29,14 @@
 
     <div class="update-sco-record-form__cgu-container">
       <PixCheckbox {{on "change" this.onChange}}>
-        {{t "common.cgu.message" cguUrl=this.cguUrl dataProtectionPolicyUrl=this.dataProtectionPolicyUrl htmlSafe=true}}
+        <:label>
+          {{t
+            "common.cgu.message"
+            cguUrl=this.cguUrl
+            dataProtectionPolicyUrl=this.dataProtectionPolicyUrl
+            htmlSafe=true
+          }}
+        </:label>
       </PixCheckbox>
     </div>
 

mon-pix/app/components/authentication/login-or-register-oidc.hbs

@@ -17,7 +17,12 @@
     </div>
     <div class="login-or-register-oidc-form__cgu-container">
       <PixCheckbox {{on "change" this.onChange}}>
-        {{t "common.cgu.message" cguUrl=this.cguUrl dataProtectionPolicyUrl=this.dataProtectionPolicyUrl htmlSafe=true}}
+        <:label>{{t
+            "common.cgu.message"
+            cguUrl=this.cguUrl
+            dataProtectionPolicyUrl=this.dataProtectionPolicyUrl
+            htmlSafe=true
+          }}</:label>
       </PixCheckbox>
     </div>
 
@@ -42,26 +47,30 @@
     <form {{on "submit" this.login}}>
       <p class="login-or-register-oidc-form__mandatory-description">{{t "common.form.mandatory-all-fields"}}</p>
 
-      <PixInput
-        @id="email"
-        @label={{t "pages.login-or-register-oidc.login-form.email"}}
-        name="email"
-        @errorMessage={{this.emailValidationMessage}}
-        @validationStatus={{this.emailValidationStatus}}
-        {{on "change" this.validateEmail}}
-        autocomplete="off"
-        required
-      />
+      <div class="login-or-register-oidc-form__input-container">
+        <PixInput
+          @id="email"
+          name="email"
+          @errorMessage={{this.emailValidationMessage}}
+          @validationStatus={{this.emailValidationStatus}}
+          {{on "change" this.validateEmail}}
+          autocomplete="off"
+          required
+        >
+          <:label>{{t "pages.login-or-register-oidc.login-form.email"}}</:label>
+        </PixInput>
+      </div>
 
-      <div class="login-or-register-oidc-form__password-container">
+      <div class="login-or-register-oidc-form__input-container login-or-register-oidc-form__input-container--password">
         <PixInputPassword
           @id="password"
           @value={{this.password}}
-          @label={{t "pages.login-or-register-oidc.login-form.password"}}
           autocomplete="off"
           required
           {{on "change" this.setPassword}}
-        />
+        >
+          <:label>{{t "pages.login-or-register-oidc.login-form.password"}}</:label>
+        </PixInputPassword>
         <LinkTo @route="password-reset-demand" class="login-or-register-oidc-form__forgotten-password-link">
           {{t "pages.sign-in.forgotten-password"}}
         </LinkTo>

mon-pix/app/components/certification-joiner.hbs

@@ -14,31 +14,26 @@
         {{on "change" this.setSessionId}}
         inputmode="decimal"
         required="true"
-        @label={{t "pages.certification-joiner.form.fields.session-number"}}
-        @information={{t "pages.certification-joiner.form.fields.session-number-information"}}
-      />
+        @subLabel={{t "pages.certification-joiner.form.fields.session-number-information"}}
+      >
+        <:label>{{t "pages.certification-joiner.form.fields.session-number"}}</:label>
+      </PixInput>
       <p class="certification-joiner__validation-error">{{this.sessionIdIsNotANumberError}}</p>
     </div>
     <div class="certification-joiner__row">
-      <PixInput
-        @id="certificationJoinerFirstName"
-        type="text"
-        {{on "change" this.setFirstName}}
-        @label={{t "pages.certification-joiner.form.fields.first-name"}}
-      />
+      <PixInput @id="certificationJoinerFirstName" type="text" {{on "change" this.setFirstName}}>
+        <:label>{{t "pages.certification-joiner.form.fields.first-name"}}</:label>
+      </PixInput>
     </div>
     <div class="certification-joiner__row">
-      <PixInput
-        type="text"
-        {{on "change" this.setLastName}}
-        @id="certificationJoinerLastName"
-        @label={{t "pages.certification-joiner.form.fields.birth-name"}}
-      />
+      <PixInput type="text" {{on "change" this.setLastName}} @id="certificationJoinerLastName">
+        <:label>{{t "pages.certification-joiner.form.fields.birth-name"}}</:label>
+      </PixInput>
     </div>
     <div class="certification-joiner__row">
-      <label class="certification-joiner__label" for="certificationJoinerDayOfBirth">{{t
+      <PixLabel class="certification-joiner__label" for="certificationJoinerDayOfBirth">{{t
           "pages.certification-joiner.form.fields.birth-date"
-        }}</label>
+        }}</PixLabel>
       <div class="certification-joiner__birthdate" id="certificationJoinerBirthDate">
         <PixInput
           @id="certificationJoinerDayOfBirth"
@@ -49,8 +44,10 @@
           {{on "change" this.setDayOfBirth}}
           {{on "input" this.handleDayInputChange}}
           {{on "focus-in" this.handleInputFocus}}
-          aria-label={{t "pages.certification-joiner.form.fields.birth-day"}}
-        />
+          @screenReaderOnly="true"
+        >
+          <:label>{{t "pages.certification-joiner.form.fields.birth-day"}}</:label>
+        </PixInput>
         <PixInput
           @id="certificationJoinerMonthOfBirth"
           min="1"
@@ -60,8 +57,10 @@
           {{on "change" this.setMonthOfBirth}}
           {{on "input" this.handleMonthInputChange}}
           {{on "focus-in" this.handleInputFocus}}
-          aria-label={{t "pages.certification-joiner.form.fields.birth-month"}}
-        />
+          @screenReaderOnly="true"
+        >
+          <:label>{{t "pages.certification-joiner.form.fields.birth-month"}}</:label>
+        </PixInput>
         <PixInput
           @id="certificationJoinerYearOfBirth"
           min="1900"
@@ -70,8 +69,10 @@
           placeholder="AAAA"
           {{on "change" this.setYearOfBirth}}
           {{on "focus-in" this.handleInputFocus}}
-          aria-label={{t "pages.certification-joiner.form.fields.birth-year"}}
-        />
+          @screenReaderOnly="true"
+        >
+          <:label>{{t "pages.certification-joiner.form.fields.birth-year"}}</:label>
+        </PixInput>
       </div>
     </div>
 

mon-pix/app/components/challenge-item/challenge-item-qroc.hbs

@@ -12,21 +12,24 @@
 
           {{#if block.input}}
             {{#if (eq block.type "select")}}
-              <div class="challenge-response__proposal challenge-response__proposal--selector">
+              <div class="challenge-response__proposal">
                 <PixSelect
                   @id="qroc_input"
                   data-uid="qroc-proposal-uid"
                   data-test="challenge-response-proposal-selector"
                   @isDisabled={{this.isAnswerFieldDisabled}}
-                  @label={{block.ariaLabel}}
                   @screenReaderOnly={{true}}
                   @placeholder={{block.placeholder}}
                   @value={{this.qrocProposalAnswerValue}}
                   @hideDefaultOption={{true}}
                   @options={{block.options}}
                   @onChange={{this.onChangeSelect}}
                   @size="big"
-                />
+                >
+                  <:label>
+                    {{block.ariaLabel}}
+                  </:label>
+                </PixSelect>
               </div>
             {{else if (eq @challenge.format "paragraphe")}}
               <div class="challenge-response__proposal challenge-response__proposal--paragraph">
@@ -35,13 +38,18 @@
                   rows="5"
                   placeholder={{block.placeholder}}
                   name={{block.randomName}}
+                  @screenReaderOnly={{true}}
                   @value={{this.userAnswer}}
                   data-test="challenge-response-proposal-selector"
                   data-uid="qroc-proposal-uid"
                   disabled={{this.isAnswerFieldDisabled}}
                   autocomplete="nope"
                   {{on "keyup" this.answerChanged}}
-                />
+                >
+                  <:label>
+                    <MarkdownToHtml @isInline={{true}} @extensions="remove-paragraph-tags" @markdown={{block.text}} />
+                  </:label>
+                </PixTextarea>
               </div>
             {{else if (eq @challenge.format "phrase")}}
               <div class="challenge-response__proposal challenge-response__proposal--sentence">
@@ -50,18 +58,28 @@
                   name={{block.randomName}}
                   type="text"
                   placeholder={{block.placeholder}}
+                  @screenReaderOnly={{true}}
                   {{on "keyup" this.answerChanged}}
                   autocomplete="nope"
                   @value={{this.userAnswer}}
                   disabled={{this.isAnswerFieldDisabled}}
                   data-uid="qroc-proposal-uid"
                   data-test="challenge-response-proposal-selector"
-                />
+                >
+                  <:label>
+                    <MarkdownToHtml
+                      @isInline={{true}}
+                      @extensions="remove-paragraph-tags"
+                      @markdown={{this.buildGenericLabel index block.text}}
+                    />
+                  </:label>
+                </PixInput>
               </div>
             {{else if (eq @challenge.format "nombre")}}
               <PixInput
                 @id="qroc_input"
                 name={{block.randomName}}
+                @screenReaderOnly={{true}}
                 type="number"
                 min="0"
                 data-test="challenge-response-proposal-selector"
@@ -70,7 +88,11 @@
                 data-uid="qroc-proposal-uid"
                 disabled={{this.isAnswerFieldDisabled}}
                 {{on "keyup" this.answerChanged}}
-              />
+              >
+                <:label>
+                  <MarkdownToHtml @isInline={{true}} @extensions="remove-paragraph-tags" @markdown={{block.text}} />
+                </:label>
+              </PixInput>
 
             {{else}}
               <PixInput
@@ -86,7 +108,11 @@
                 data-uid="qroc-proposal-uid"
                 disabled={{this.isAnswerFieldDisabled}}
                 {{on "keyup" this.answerChanged}}
-              />
+              >
+                <:label>
+                  <MarkdownToHtml @isInline={{true}} @extensions="remove-paragraph-tags" @markdown={{block.text}} />
+                </:label>
+              </PixInput>
             {{/if}}
           {{/if}}
 

mon-pix/app/components/challenge-item/challenge-item-qroc.js

@@ -112,6 +112,11 @@ export default class ChallengeItemQroc extends ChallengeItemGeneric {
     window.removeEventListener('message', this.postMessageHandler);
   }
 
+  @action
+  buildGenericLabel(index, ariaLabel) {
+    return ariaLabel || this.intl.t('pages.challenge.answer-input.numbered-label', { number: index + 1 });
+  }
+
   get _blocks() {
     return proposalsAsBlocks(this.args.challenge.proposals).map((block) => {
       block.randomName = generateRandomString(block.input);

mon-pix/app/components/challenge-item/challenge-item-qrocm.hbs

@@ -3,15 +3,27 @@
   <div class="rounded-panel__row challenge-response {{if @answer 'challenge-response--locked'}}">
     <h2 class="sr-only">{{t "pages.challenge.parts.answer-input"}}</h2>
     <div class="challenge-proposals">
+      {{#if @hasMultipleFieldSet}}
+        <QrocmProposalInd
+          @answer={{@answer}}
+          @format={{@challenge.format}}
+          @proposals={{@challenge.proposals}}
+          @answersValue={{this.answersValue}}
+          @answerChanged={{this.answerChanged}}
+          @onChangeSelect={{this.onChangeSelect}}
+          @isAnswerFieldDisabled={{this.isAnswerFieldDisabled}}
+        />
+      {{else}}
       <Proposals::QrocmProposal
-        @answer={{@answer}}
-        @format={{@challenge.format}}
-        @proposals={{@challenge.proposals}}
-        @answersValue={{this.answersValue}}
-        @answerChanged={{this.answerChanged}}
-        @onChangeSelect={{this.onChangeSelect}}
-        @isAnswerFieldDisabled={{this.isAnswerFieldDisabled}}
-      />
+          @answer={{@answer}}
+          @format={{@challenge.format}}
+          @proposals={{@challenge.proposals}}
+          @answersValue={{this.answersValue}}
+          @answerChanged={{this.answerChanged}}
+          @onChangeSelect={{this.onChangeSelect}}
+          @isAnswerFieldDisabled={{this.isAnswerFieldDisabled}}
+        />
+      {{/if}}
     </div>
 
     {{#if @answer}}

mon-pix/app/components/challenge/item.hbs

@@ -20,5 +20,6 @@
     @answerValidated={{this.answerValidated}}
     @resumeAssessment={{this.resumeAssessment}}
     @isFocusedChallenge={{this.isFocusedChallenge}}
+    @hasMultipleFieldSet={{this.hasMultipleFieldSet}}
   />
 </article>

mon-pix/app/components/challenge/item.js

@@ -24,18 +24,24 @@ export default class Item extends Component {
     }
   }
 
+  get challengeType() {
+    return this.args.challenge.get('type').toUpperCase();
+  }
+
+  get hasMultipleFieldSet() {
+    return this.challengeType === 'QROCM-IND';
+  }
+
   get challengeComponent() {
     let result;
-    const challenge = this.args.challenge;
-    const challengeType = challenge.get('type').toUpperCase();
 
-    if (['QCUIMG', 'QCU'].includes(challengeType)) {
+    if (['QCUIMG', 'QCU'].includes(this.challengeType)) {
       result = ChallengeItemQcu;
-    } else if (['QCMIMG', 'QCM'].includes(challengeType)) {
+    } else if (['QCMIMG', 'QCM'].includes(this.challengeType)) {
       result = ChallengeItemQcm;
-    } else if (['QROC'].includes(challengeType)) {
+    } else if (['QROC'].includes(this.challengeType)) {
       result = ChallengeItemQroc;
-    } else if (['QROCM', 'QROCM-IND', 'QROCM-DEP'].includes(challengeType)) {
+    } else if (['QROCM', 'QROCM-IND', 'QROCM-DEP'].includes(this.challengeType)) {
       result = ChallengeItemQrocm;
     }
 

mon-pix/app/components/feedback-panel.hbs

@@ -33,22 +33,26 @@
               <div class="feedback-panel__group">
                 <div class="feedback-panel__category-selection">
                   <PixSelect
-                    @label={{t "pages.challenge.feedback-panel.form.fields.detail-selection.aria-first"}}
                     @screenReaderOnly={{true}}
                     @placeholder={{t "pages.challenge.feedback-panel.form.fields.category-selection.label"}}
                     @options={{this.categories}}
                     @onChange={{this.displayCategoryOptions}}
                     @value={{this._currentMajorCategory}}
-                  />
+                  >
+                    <:label>{{t "pages.challenge.feedback-panel.form.fields.detail-selection.aria-first"}}</:label>
+                  </PixSelect>
                   {{#if this.displayQuestionDropdown}}
                     <PixSelect
-                      @label={{t "pages.challenge.feedback-panel.form.fields.detail-selection.aria-secondary"}}
                       @screenReaderOnly={{true}}
                       @placeholder={{t "pages.challenge.feedback-panel.form.fields.detail-selection.label"}}
                       @onChange={{this.showFeedback}}
                       @options={{this.nextCategories}}
                       @value={{this._currentNextCategory}}
-                    />
+                    >
+                      <:label>{{t
+                          "pages.challenge.feedback-panel.form.fields.detail-selection.aria-secondary"
+                        }}</:label>
+                    </PixSelect>
                   {{/if}}
                   {{#if this.quickHelpInstructions}}
                     <div class="feedback-panel__quick-help">