feat : fermeture du MalioDrawer avec la touche Échap

app/components/malio/drawer/Drawer.test.ts

@@ -201,4 +201,17 @@ describe('MalioDrawer', () => {
     const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' })
     expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70')
   })
+
+  it('closes on Escape key when closeOnEscape is true', async () => {
+    const wrapper = mountComponent({ modelValue: true })
+    await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
+
+  it('does not close on Escape when closeOnEscape is false', async () => {
+    const wrapper = mountComponent({ modelValue: true, closeOnEscape: false })
+    await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
 })

app/components/malio/drawer/Drawer.vue

@@ -30,6 +30,7 @@
           :aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
           tabindex="-1"
           data-test="panel"
+          @keydown="onKeydown"
         >
           <div
             v-if="hasHeader || showClose"
@@ -142,6 +143,13 @@ function onBackdropClick() {
   if (props.dismissable) close()
 }
 
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && props.closeOnEscape) {
+    e.stopPropagation()
+    close()
+  }
+}
+
 function close() {
   if (!isControlled.value) localValue.value = false
   emit('update:modelValue', false)