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>

app/components/malio/input/InputUpload.vue

@@ -26,8 +26,10 @@
         placeholder="_"
         type="text"
         @click="openFilePicker"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @keydown.enter.prevent="openFilePicker"
+        @keydown.space.prevent="openFilePicker"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       >
 
       <label
@@ -38,17 +40,33 @@
         {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
-      <IconifyIcon
-        v-if="displayIcon"
-        icon="mdi:cloud-arrow-up-outline"
-        :width="24"
-        :height="24"
-        data-test="icon"
-        :class="[
-        iconStateClass,
-        'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
-      ]"
-      />
+      <div
+        v-if="displayIcon || showClear"
+        class="absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-1"
+      >
+        <button
+          v-if="showClear"
+          type="button"
+          data-test="clear"
+          class="m-focus-ring rounded-malio text-m-muted hover:text-m-primary"
+          aria-label="Retirer le fichier"
+          @click.stop="onClear"
+        >
+          <IconifyIcon
+            icon="mdi:close"
+            :width="16"
+            :height="16"
+          />
+        </button>
+        <IconifyIcon
+          v-if="displayIcon"
+          icon="mdi:cloud-arrow-up-outline"
+          :width="24"
+          :height="24"
+          data-test="icon"
+          :class="[iconStateClass, 'pointer-events-none']"
+        />
+      </div>
 
     </div>
     <p
@@ -75,9 +93,12 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputUpload', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -94,6 +115,7 @@ const props = withDefaults(
     displayIcon?: boolean
     accept?: string
     required?: boolean
+    clearable?: boolean
     reserveMessageSpace?: boolean
   }>(),
   {
@@ -111,6 +133,7 @@ const props = withDefaults(
     displayIcon: true,
     accept: '',
     required: false,
+    clearable: false,
     reserveMessageSpace: true,
   },
 )
@@ -143,6 +166,7 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md cursor-pointer',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     isReadonly.value ? '' : 'grow-height',
     isReadonly.value
       ? 'border-black'
@@ -153,7 +177,9 @@ const mergedInputClass = computed(() =>
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
         : isReadonly.value ? '' : 'focus:border-m-primary',
-    props.displayIcon ? '!pr-10' : '',
+    showClear.value
+      ? (props.displayIcon ? '!pr-16' : '!pr-10')
+      : (props.displayIcon ? '!pr-10' : ''),
     isReadonly.value ? '' : 'focus:pl-[11px]',
     isReadonly.value ? 'cursor-default' : '',
     disabled.value ? 'cursor-not-allowed' : '',
@@ -191,8 +217,21 @@ const describedBy = computed(() => {
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void
   (event: 'file-selected', file: File): void
+  (event: 'clear'): void
 }>()
 
+const showClear = computed(() =>
+  props.clearable && isFilled.value && !props.disabled && !isReadonly.value,
+)
+
+const onClear = () => {
+  if (props.disabled || isReadonly.value) return
+  if (!isControlled.value) localValue.value = ''
+  if (fileInputRef.value) fileInputRef.value.value = ''
+  emit('update:modelValue', '')
+  emit('clear')
+}
+
 const openFilePicker = () => {
   if (props.disabled || props.readonly) return
   fileInputRef.value?.click()