fix: accessibilité des composants (#70)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: admin malio <malio@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #70
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.playground/pages/composant/date/date.vue

@@ -13,6 +13,15 @@
         <div class="rounded border p-3 text-sm">
           <p>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
         </div>
+        <MalioDate
+          v-model="editableValue"
+          label="Date (saisie clavier)"
+          editable
+          hint="Tape JJ/MM/AAAA ou utilise le calendrier"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur éditable (ISO) : <code>{{ editableValue ?? 'null' }}</code></p>
+        </div>
         <div class="flex gap-2">
           <button
             type="button"
@@ -85,4 +94,5 @@ const readonlyFilledDate = ref<string | null>('2026-06-15')
 const value = ref<string | null>(null)
 const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>(null)
+const editableValue = ref<string | null>(null)
 </script>

.playground/pages/composant/input/inputAmount.vue

@@ -14,6 +14,17 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Grand montant (séparateurs)</h2>
+      <MalioInputAmount
+        v-model="bigValue"
+        label="Budget"
+      />
+      <div class="mt-2 rounded border p-3 text-sm">
+        <p>modelValue émis : <code>{{ bigValue || 'vide' }}</code></p>
+      </div>
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
       <MalioInputAmount
@@ -77,4 +88,5 @@
 import { ref } from 'vue'
 
 const readonlyFilledAmount = ref('1250.00')
+const bigValue = ref('1234567.89')
 </script>

.playground/pages/composant/input/inputEmail.vue

@@ -14,6 +14,20 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Ajout dynamique (bouton +)</h2>
+      <div class="space-y-3">
+        <MalioInputEmail
+          v-for="(email, index) in emails"
+          :key="index"
+          v-model="emails[index]"
+          label="Adresse email"
+          addable
+          @add="emails.push('')"
+        />
+      </div>
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
       <MalioInputEmail
@@ -127,6 +141,7 @@ import { computed, ref } from 'vue'
 
 const readonlyFilledEmail = ref('contact@malio.fr')
 const emailValue = ref('')
+const emails = ref<string[]>([''])
 const dynamicEmail = ref('')
 const requiredEmail = ref('')
 const lowercaseEmail = ref('')

.playground/pages/composant/input/inputUpload.vue

@@ -14,6 +14,17 @@
       <p class="mt-2 text-sm text-gray-500">Valeur : {{ uploadValue || '(aucun)' }}</p>
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Clearable (croix pour vider)</h2>
+      <MalioInputUpload
+        v-model="clearableUpload"
+        label="Téléverser un document"
+        clearable
+        @clear="onClearUpload"
+      />
+      <p class="mt-2 text-sm text-gray-500">Valeur : {{ clearableUpload || '(aucun)' }}</p>
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
       <MalioInputUpload
@@ -94,6 +105,11 @@ import { computed, ref } from 'vue'
 const readonlyFilledUpload = ref('document.pdf')
 const uploadValue = ref('')
 const dynamicUpload = ref('')
+const clearableUpload = ref('rapport-2026.pdf')
+
+const onClearUpload = () => {
+  clearableUpload.value = ''
+}
 
 const dynamicError = computed(() => {
   if (!dynamicUpload.value) return ''

.playground/pages/composant/select/selectCheckbox.vue

@@ -13,7 +13,7 @@
       <MalioSelectCheckbox
         v-model="labelValue"
         :options="options"
-        displayTag="true"
+        :display-tag="true"
         empty-option-label=" "
       />
       </div>
@@ -22,7 +22,7 @@
       <MalioSelectCheckbox
         v-model="labelValue1"
         :options="options"
-        displayTag="true"
+        :display-tag="true"
         label="Pays"
         empty-option-label=" "
       />