Use tw focus-visible utility instead of focus utility

src/assets/css/form.css

@@ -7,7 +7,7 @@
 .form-select {
     @apply appearance-none;
     @apply bg-white dark:bg-slate-900 px-3 text-slate-600 dark:text-slate-400 rounded;
-    @apply dark:focus:bg-slate-900 focus:outline-none focus:ring !ring-primary-200 dark:!ring-slate-600;
+    @apply dark:focus:bg-slate-900 focus:outline-none focus-visible:ring !ring-primary-200 dark:!ring-slate-600;
     @apply text-sm;
 }
 .form-select {

src/components/AppHeader.vue

@@ -3,15 +3,15 @@
         <div class="flex h-16 items-center justify-between px-4 lg:px-8">
             <button
                 type="button"
-                class="-m-2 flex rounded p-2 text-2xl font-black ring-primary-200 focus:outline-none focus:ring dark:ring-slate-600"
+                class="-m-2 flex rounded p-2 text-2xl font-black ring-primary-200 focus:outline-none focus-visible:ring dark:ring-slate-600"
                 @click="selectedDay = $moment().format('YYYY-MM-DD')"
             >
                 <Logo />
             </button>
             <div class="relative flex items-center gap-1 sm:gap-2">
                 <button
                     type="button"
-                    class="inline-flex h-10 flex-shrink-0 items-center justify-center gap-1 rounded bg-primary-500 px-2 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600 md:px-3"
+                    class="inline-flex h-10 flex-shrink-0 items-center justify-center gap-1 rounded bg-primary-500 px-2 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600 md:px-3"
                     @click.stop="is_summary_open = !is_summary_open"
                 >
                     <IClock class="h-5" />
@@ -21,7 +21,7 @@
 
                 <button
                     type="button"
-                    class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 bg-cover font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600"
+                    class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 bg-cover font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600"
                     :style="{ backgroundImage: `url('${user?.photo_url}')` }"
                     @click.stop="is_user_menu_open = !is_user_menu_open"
                 >
@@ -31,7 +31,7 @@
 
                 <button
                     type="button"
-                    class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600 xl:hidden"
+                    class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600 xl:hidden"
                     @click.stop="menuOpened = !menuOpened"
                 >
                     <IHamburger v-if="!menuOpened" class="h-4 w-4" />

src/components/ColorSwitcher.vue

@@ -1,7 +1,7 @@
 <template>
     <button
         type="button"
-        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded bg-primary-500 px-3 py-2 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
+        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded bg-primary-500 px-3 py-2 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
         @click="onClick"
     >
         <ColorScheme placeholder="...">

src/components/LanguageSwitcher.vue

@@ -1,7 +1,7 @@
 <template>
     <button
         type="button"
-        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded bg-primary-500 px-3 py-2 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
+        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded bg-primary-500 px-3 py-2 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
         @click="setLocale(nextLocale.code)"
     >
         {{ nextLocale.name }}

src/components/SummarySidebar.vue

@@ -51,7 +51,7 @@
                         <span class="font-bold">{{ project.name }}</span>
                         <button
                             type="button"
-                            class="absolute right-2 top-1/2 inline-flex h-10 w-10 flex-shrink-0 -translate-y-1/2 items-center justify-center rounded bg-red-500 font-bold text-white shadow ring-primary-200 transition hover:bg-red-400 focus:outline-none focus:ring active:bg-red-600 dark:text-slate-800 dark:ring-slate-600"
+                            class="absolute right-2 top-1/2 inline-flex h-10 w-10 flex-shrink-0 -translate-y-1/2 items-center justify-center rounded bg-red-500 font-bold text-white shadow ring-primary-200 transition hover:bg-red-400 focus:outline-none focus-visible:ring active:bg-red-600 dark:text-slate-800 dark:ring-slate-600"
                             @click="deleteProject(project)"
                         >
                             <IDelete class="h-5" />
@@ -69,7 +69,7 @@
                 <div class="mb-2 flex items-center justify-end gap-2">
                     <button
                         type="button"
-                        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded bg-primary-500 px-3 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
+                        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded bg-primary-500 px-3 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
                         @click="deleteCompletedPriorities"
                     >
                         {{ $t('Cleanup') }}
@@ -92,14 +92,14 @@
                             </div>
                             <button
                                 type="button"
-                                class="absolute right-2 top-1/2 inline-flex h-10 w-10 flex-shrink-0 -translate-y-1/2 items-center justify-center rounded bg-red-500 font-bold text-white shadow ring-primary-200 transition hover:bg-red-400 focus:outline-none focus:ring active:bg-red-600 dark:text-slate-800 dark:ring-slate-600"
+                                class="absolute right-2 top-1/2 inline-flex h-10 w-10 flex-shrink-0 -translate-y-1/2 items-center justify-center rounded bg-red-500 font-bold text-white shadow ring-primary-200 transition hover:bg-red-400 focus:outline-none focus-visible:ring active:bg-red-600 dark:text-slate-800 dark:ring-slate-600"
                                 @click="deletePriority(priority)"
                             >
                                 <IDelete class="h-5" />
                             </button>
                         </label>
                         <div
-                            class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded font-bold text-slate-400 ring-primary-200 transition hover:text-primary-400 focus:outline-none focus:ring active:text-primary-400 dark:ring-slate-600"
+                            class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded font-bold text-slate-400 ring-primary-200 transition hover:text-primary-400 focus:outline-none focus-visible:ring active:text-primary-400 dark:ring-slate-600"
                         >
                             <IHandle class="handle h-5 w-5 shrink-0 cursor-move" />
                         </div>
@@ -109,7 +109,7 @@
                     <div class="flex w-full items-center gap-2">
                         <input
                             type="checkbox"
-                            class="form-control form-input-bordered form-input h-6 w-6 rounded-full border-slate-400 p-0 text-primary-500 ring-primary-200 focus:outline-none focus:ring disabled:opacity-30 dark:bg-slate-800 dark:text-primary-500 dark:ring-slate-600 dark:checked:bg-primary-500"
+                            class="form-control form-input-bordered form-input h-6 w-6 rounded-full border-slate-400 p-0 text-primary-500 ring-primary-200 focus:outline-none focus-visible:ring disabled:opacity-30 dark:bg-slate-800 dark:text-primary-500 dark:ring-slate-600 dark:checked:bg-primary-500"
                             disabled
                         />
                         <label class="flex w-full items-center gap-2">
@@ -121,7 +121,7 @@
                                 class="form-control form-input-bordered form-input h-10 w-full"
                             />
                             <div
-                                class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded font-bold text-slate-400 opacity-50 ring-primary-200 transition focus:outline-none focus:ring dark:ring-slate-600"
+                                class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded font-bold text-slate-400 opacity-50 ring-primary-200 transition focus:outline-none focus-visible:ring dark:ring-slate-600"
                             >
                                 <IHandle class="handle h-5 w-5 shrink-0" />
                             </div>
@@ -133,7 +133,7 @@
                 <div v-if="!isCreating" class="mb-2 flex items-center justify-end gap-2">
                     <button
                         type="button"
-                        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded bg-primary-500 px-3 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
+                        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded bg-primary-500 px-3 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
                         @click="isCreating = !isCreating"
                     >
                         {{ $t('Ajouter') }}
@@ -161,14 +161,14 @@
                             </div>
                             <button
                                 type="button"
-                                class="absolute right-2 top-1/2 inline-flex h-10 w-10 flex-shrink-0 -translate-y-1/2 items-center justify-center rounded bg-red-500 font-bold text-white shadow ring-primary-200 transition hover:bg-red-400 focus:outline-none focus:ring active:bg-red-600 dark:text-slate-800 dark:ring-slate-600"
+                                class="absolute right-2 top-1/2 inline-flex h-10 w-10 flex-shrink-0 -translate-y-1/2 items-center justify-center rounded bg-red-500 font-bold text-white shadow ring-primary-200 transition hover:bg-red-400 focus:outline-none focus-visible:ring active:bg-red-600 dark:text-slate-800 dark:ring-slate-600"
                                 @click="deleteBookmark(bookmark)"
                             >
                                 <IDelete class="h-5" />
                             </button>
                         </div>
                         <div
-                            class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded font-bold text-slate-400 ring-primary-200 transition hover:text-primary-400 focus:outline-none focus:ring active:text-primary-400 dark:ring-slate-600"
+                            class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded font-bold text-slate-400 ring-primary-200 transition hover:text-primary-400 focus:outline-none focus-visible:ring active:text-primary-400 dark:ring-slate-600"
                         >
                             <IHandle class="handle h-5 w-5 shrink-0 cursor-move" />
                         </div>
@@ -213,7 +213,7 @@
                         </button>
                         <button
                             type="submit"
-                            class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded bg-primary-500 px-3 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
+                            class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded bg-primary-500 px-3 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
                         >
                             {{ $t('Ajouter') }}
                         </button>

src/components/Tabs.vue

@@ -28,7 +28,7 @@ export default defineComponent({
                             'button',
                             {
                                 class: [
-                                    'relative py-4 pb-3 text-sm border-b-4 border-b-transparent border-l dark:border-l-slate-800 hover:bg-white dark:hover:bg-slate-800 row-start-1 focus:outline-none ring-primary-200 dark:ring-slate-600 first:border-l-0',
+                                    'relative py-4 pb-3 text-sm border-b-4 border-b-transparent border-l dark:border-l-slate-800 hover:bg-white dark:hover:bg-slate-800 row-start-1 focus:outline-none focus-visible:ring ring-primary-200 dark:ring-slate-600 first:border-l-0',
                                     {
                                         'font-bold text-primary-500 after:absolute after:w-full after:border-b-4 after:left-0 after:-bottom-1 after:border-b-primary-500 after:dark:border-b-primary-500 ':
                                             index === selectedTabIndex.value,

src/components/TimeEntriesHeader.vue

@@ -2,13 +2,13 @@
     <div class="sticky top-16 z-20 -mt-3 flex w-full min-w-0 justify-between gap-2 bg-stone-50 py-3 dark:bg-slate-900">
         <button
             type="button"
-            class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600"
+            class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600"
             @click="changeDay('prev')"
         >
             <IArrowLeft class="h-3" />
         </button>
         <label
-            class="relative min-w-0 shrink cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap rounded border px-5 text-center font-medium leading-10 ring-primary-200 transition hover:bg-white focus:outline-none focus:ring dark:border-slate-800 dark:ring-slate-600 dark:hover:bg-slate-800"
+            class="relative min-w-0 shrink cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap rounded border px-5 text-center font-medium leading-10 ring-primary-200 transition hover:bg-white focus:outline-none focus-visible:ring dark:border-slate-800 dark:ring-slate-600 dark:hover:bg-slate-800"
             tabindex="0"
         >
             <span class="capitalize">{{ $moment(selectedDay).format('dddd') }}, </span>
@@ -23,7 +23,7 @@
         </label>
         <button
             type="button"
-            class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600"
+            class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600"
             @click="changeDay('next')"
         >
             <IArrowRight class="h-3" />