[TECH] Monter la version de pix-ui

api/src/devcomp/infrastructure/datasources/learning-content/modules/bien-ecrire-son-adresse-mail.json

@@ -171,7 +171,7 @@
               "input": "premiere-partie",
               "type": "select",
               "display": "block",
-              "placeholder": "",
+              "placeholder": "- Sélectionner -",
               "ariaLabel": "Réponse 1 sur 2",
               "defaultValue": "",
               "tolerances": [],
@@ -197,7 +197,7 @@
               "input": "seconde-partie",
               "type": "select",
               "display": "block",
-              "placeholder": "",
+              "placeholder": "- Sélectionner -",
               "ariaLabel": "Réponse 2 sur 2",
               "defaultValue": "",
               "tolerances": [],

api/src/devcomp/infrastructure/datasources/learning-content/modules/principes-fondateurs-wikipedia.json

@@ -375,7 +375,7 @@
               "input": "quality-wiki",
               "type": "select",
               "display": "block",
-              "placeholder": "",
+              "placeholder": "- Sélectionner -",
               "ariaLabel": "Choisir le niveau de qualité estimé",
               "defaultValue": "",
               "tolerances": [],

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

mon-pix/app/components/language-switcher.hbs

@@ -1,10 +1,11 @@
 <PixSelect
   @id="language-switcher"
-  @label={{@label}}
-  aria-label={{t "pages.inscription.choose-language-aria-label"}}
   @icon="earth-europe"
   @value={{this.selectedLanguage}}
   @options={{this.availableLanguages}}
   @onChange={{this.onChange}}
   @hideDefaultOption="true"
-/>
+  @screenReaderOnly="true"
+>
+  <:label>{{t "pages.inscription.choose-language-aria-label"}}</:label>
+</PixSelect>

mon-pix/app/components/proposals/qcm-proposals.hbs

@@ -1,17 +1,17 @@
 <div class="qcm-proposals">
   {{#each this.labeledCheckboxes as |labeledCheckbox index|}}
     <p class="proposal-paragraph">
-
       <PixCheckbox
         name="{{inc index}}"
         disabled={{@isAnswerFieldDisabled}}
         checked={{labeledCheckbox.checked}}
         {{on "click" (fn this.checkboxClicked labeledCheckbox.value)}}
         data-test="challenge-response-proposal-selector"
       >
-        <MarkdownToHtml @isInline={{true}} @extensions="remove-paragraph-tags" @markdown={{labeledCheckbox.label}} />
+        <:label>
+          <MarkdownToHtml @isInline={{true}} @extensions="remove-paragraph-tags" @markdown={{labeledCheckbox.label}} />
+        </:label>
       </PixCheckbox>
-
     </p>
   {{/each}}
 </div>

mon-pix/app/components/proposals/qcu-proposals.hbs

@@ -11,7 +11,9 @@
       class="qcu-proposals__radio"
       data-test="challenge-response-proposal-selector"
     >
-      <MarkdownToHtml @isInline={{true}} @extensions="remove-paragraph-tags" @markdown={{labeledRadio.label}} />
+      <:label>
+        <MarkdownToHtml @isInline={{true}} @extensions="remove-paragraph-tags" @markdown={{labeledRadio.label}} />
+      </:label>
     </PixRadioButton>
   </p>
 {{/each}}

mon-pix/app/components/proposals/qrocm-proposal.hbs

@@ -9,7 +9,6 @@
         <PixSelect
           data-test="challenge-response-proposal-selector"
           @isDisabled={{@isAnswerFieldDisabled}}
-          @label={{block.ariaLabel}}
           @screenReaderOnly={{true}}
           @placeholder={{block.placeholder}}
           @value={{get @answersValue block.input}}
@@ -18,7 +17,9 @@
           @onChange={{fn this.onChange block.input}}
           @size="big"
           @id="{{block.input}}"
-        />
+        >
+          <:label>{{block.ariaLabel}}</:label>
+        </PixSelect>
       </div>
     {{else if (eq block.type "input")}}
       {{#if block.input}}
@@ -55,7 +56,7 @@
                 placeholder={{block.placeholder}}
                 @value={{get @answersValue block.input}}
                 disabled={{@isAnswerFieldDisabled}}
-                @ariaLabel={{block.ariaLabel}}
+                aria-label={{block.ariaLabel}}
                 data-test="challenge-response-proposal-selector"
                 data-uid="qrocm-proposal-uid"
                 {{on "change" (fn this.onInputChange block.input)}}
@@ -72,7 +73,7 @@
                 placeholder={{block.placeholder}}
                 @value={{get @answersValue block.input}}
                 disabled={{@isAnswerFieldDisabled}}
-                @ariaLabel={{block.ariaLabel}}
+                aria-label={{block.ariaLabel}}
                 data-test="challenge-response-proposal-selector"
                 data-uid="qrocm-proposal-uid"
                 {{on "change" (fn this.onInputChange block.input)}}

mon-pix/app/components/signin-form.hbs

@@ -28,24 +28,26 @@
         <PixInput
           @id="login"
           name="login"
-          @label={{t "pages.sign-in.fields.login.label"}}
           {{on "input" this.updateLogin}}
           @validationStatus="default"
           required
           autocomplete="email"
-        />
+        >
+          <:label>{{t "pages.sign-in.fields.login.label"}}</:label>
+        </PixInput>
       </div>
 
       <div class="sign-form-body__input">
         <PixInputPassword
           @id="password"
           name="password"
-          @label={{t "pages.sign-in.fields.password.label"}}
           {{on "input" this.updatePassword}}
           @validationStatus="default"
           required
           autocomplete="current-password"
-        />
+        >
+          <:label>{{t "pages.sign-in.fields.password.label"}}</:label>
+        </PixInputPassword>
         <LinkTo
           @route="password-reset-demand"
           class="link link--grey sign-form-link sign-form-body__forgotten-password-link"