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/InputEmail.vue

@@ -19,8 +19,8 @@
         type="email"
         inputmode="email"
         @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       >
 
       <label
@@ -40,6 +40,23 @@
         :class="[iconStateClass, iconPositionClass]"
       />
 
+      <button
+        v-if="addable"
+        type="button"
+        :disabled="disabled"
+        :aria-label="addButtonLabel"
+        data-test="add-button"
+        :class="mergedAddButtonClass"
+        @click="onAdd"
+      >
+        <IconifyIcon
+          :icon="addIconName"
+          :width="24"
+          :height="24"
+          data-test="add-icon"
+        />
+      </button>
+
     </div>
     <p
       v-if="reserveMessageSpace || hint || error || success"
@@ -65,9 +82,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: 'MalioInputEmail', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -88,6 +108,9 @@ const props = withDefaults(
     iconPosition?: 'left' | 'right'
     iconSize?: string | number
     iconColor?: string
+    addable?: boolean
+    addIconName?: string
+    addButtonLabel?: string
     lowercase?: boolean
     reserveMessageSpace?: boolean
   }>(),
@@ -110,6 +133,9 @@ const props = withDefaults(
     success: '',
     iconSize: 24,
     iconColor: 'text-m-muted',
+    addable: false,
+    addIconName: 'mdi:plus',
+    addButtonLabel: 'Ajouter une adresse email',
     lowercase: false,
     reserveMessageSpace: true,
   },
@@ -141,6 +167,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',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     isReadonly.value ? '' : 'grow-height',
     isReadonly.value
       ? 'border-black'
@@ -177,6 +204,14 @@ const mergedLabelClass = computed(() =>
   ),
 )
 
+const mergedAddButtonClass = computed(() =>
+  twMerge(
+    'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer transition-opacity hover:opacity-70',
+    iconStateClass.value,
+    props.disabled ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
+  ),
+)
+
 const describedBy = computed(() => {
   const ids: string[] = []
   if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
@@ -187,6 +222,7 @@ const describedBy = computed(() => {
 
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void
+  (event: 'add'): void
 }>()
 
 const sanitizeEmail = (v: string) => {
@@ -222,25 +258,38 @@ const onInput = (event: Event) => {
   emit('update:modelValue', sanitized)
 }
 
+const onAdd = () => {
+  if (props.disabled || props.readonly) return
+  emit('add')
+}
+
+const effectiveIconPosition = computed(() =>
+  props.addable && props.iconName ? 'left' : props.iconPosition,
+)
+
 const iconInputPaddingClass = computed(() => {
-  if (!props.iconName) return ''
-  return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3 !pr-10'
+  const leftIcon = props.iconName && effectiveIconPosition.value === 'left'
+  const rightIcon = props.iconName && effectiveIconPosition.value === 'right'
+  const parts: string[] = []
+  if (leftIcon) parts.push('!pl-11')
+  if (rightIcon || props.addable) parts.push('!pr-10')
+  return parts.join(' ')
 })
 
 const disabled = computed(() => props.disabled)
 
 const labelPositionClass = computed(() => {
-  if (props.iconName && props.iconPosition === 'left') return 'left-11'
+  if (props.iconName && effectiveIconPosition.value === 'left') return 'left-11'
   return 'left-3'
 })
 
 const focusPaddingClass = computed(() => {
-  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
+  if (props.iconName && effectiveIconPosition.value === 'left') return 'focus:!pl-11'
   return 'focus:pl-[11px]'
 })
 
 const iconPositionClass = computed(() => {
-  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
+  const sideClass = effectiveIconPosition.value === 'left' ? 'left-[10px]' : 'right-[10px]'
   return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })