From 88c2a00d8957a91c9bc0581d0525a4d5eb18d1a0 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:38:32 +0200
Subject: [PATCH] feat(input) : anneau de focus clavier sur InputTextArea

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/input/InputTextArea.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/malio/input/InputTextArea.vue b/app/components/malio/input/InputTextArea.vue
index d8a25a5..a3f2c85 100644
--- a/app/components/malio/input/InputTextArea.vue
+++ b/app/components/malio/input/InputTextArea.vue
@@ -19,6 +19,7 @@
         textInput,
         showCounterComputed ? 'pb-6' : '',
         rounded,
+        keyboardFocused ? 'm-focus-ring-kbd' : '',
       ]"
         :required="required"
         :maxlength="maxLength"
@@ -32,8 +33,8 @@
         v-bind="attrs"
         placeholder="_"
         @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       />
       <label
         v-if="label"
@@ -89,9 +90,12 @@
 import {computed, ref, useAttrs, useId} from 'vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string