fix: fix clickables accessibility

Author: driss-chelouati

playground/app.config.ts

@@ -1,5 +1,5 @@
 export default defineAppConfig({
   toaster: {
-    maxToasts: 10
-  }
+    maxToasts: 10,
+  },
 })

playground/assets/css/main.css

@@ -1,3 +1,5 @@
+@import './modules/accessibility.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

playground/assets/css/modules/accessibility.css

@@ -0,0 +1,9 @@
+@layer utilities {
+  .tw-accessibility {
+    @apply outline-none focus-visible:outline-none focus-visible:outline-dashed focus-visible:outline-muted-300 dark:focus-visible:outline-muted-600 focus-visible:outline-offset-2;
+  }
+
+  .tw-accessibility-static {
+    @apply outline-dashed outline-muted-300 dark:outline-muted-600 outline-offset-2;
+  }
+}

playground/components/Hero.vue

@@ -65,7 +65,7 @@
           >
             <input
               type="text"
-              class="w-full h-14 pl-14 pr-4 py-2 rounded-xl font-mono text-muted-600 dark:text-muted-400 bg-white dark:bg-muted-1000 border border-muted-200 dark:border-muted-800 group-hover:shadow-xl group-hover:shadow-muted-400/10 dark:group-hover:shadow-muted-800/10 transition-all duration-300"
+              class="w-full h-14 pl-14 pr-4 py-2 rounded-xl font-mono text-muted-600 dark:text-muted-400 bg-white dark:bg-muted-1000 border border-muted-200 dark:border-muted-800 group-hover:shadow-xl group-hover:shadow-muted-400/10 dark:group-hover:shadow-muted-800/10 transition-all duration-300 tw-accessibility"
               value="npm i -D @cssninja/nuxt-toaster"
             />
             <!-- Terminal icon -->
@@ -82,9 +82,9 @@
             <!-- Copy button -->
             <button
               type="button"
-              class="w-full lg:w-auto lg:absolute top-2 right-2 h-12 lg:h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500 hover:shadow-xl hover:shadow-indigo-500/20 dark:hover:shadow-indigo-800/10 transition-all duration-300"
+              class="w-full lg:w-auto lg:absolute top-2 right-2 h-12 lg:h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500 hover:shadow-xl hover:shadow-indigo-500/20 dark:hover:shadow-indigo-800/10 transition-all duration-300 tw-accessibility"
             >
-              Copy
+              Try Me
             </button>
           </div>
         </div>

playground/components/Navigation.vue

@@ -22,16 +22,18 @@ const isChecked = ref(false)
     <div class="mx-auto w-full max-w-7xl p-4">
       <div class="w-full flex items-center justify-between gap-x-2">
         <div class="w-full lg:w-auto flex items-center gap-x-2">
-          <img class="w-9 h-9" src="/assets/img/logo.svg" alt="Logo" />
-          <img
-            class="h-5 dark:invert"
-            src="/assets/img/logo-text.svg"
-            alt="Logo text"
-          />
+          <NuxtLink to="/" class="flex items-center gap-2 tw-accessibility">
+            <img class="w-9 h-9" src="/assets/img/logo.svg" alt="Logo" />
+            <img
+              class="h-5 dark:invert"
+              src="/assets/img/logo-text.svg"
+              alt="Logo text"
+            />
+          </NuxtLink>
 
           <!-- Hamburger -->
           <button
-            class="flex relative justify-center items-center ml-auto w-10 h-10 focus:outline-none lg:hidden"
+            class="flex relative justify-center items-center ml-auto w-10 h-10 lg:hidden tw-accessibility"
             @click="mobileOpen = !mobileOpen"
           >
             <div
@@ -61,19 +63,19 @@ const isChecked = ref(false)
           >
             <NuxtLink
               to="/"
-              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300 tw-accessibility"
               >Examples</NuxtLink
             >
             <NuxtLink
               to="/api"
-              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300 tw-accessibility"
               >API docs</NuxtLink
             >
           </div>
           <div class="flex items-center justify-end gap-x-1 lg:pl-4">
             <NuxtLink
               to="/"
-              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300 tw-accessibility"
             >
               <svg class="w-5 h-5" viewBox="0 0 1536 1504">
                 <path
@@ -84,7 +86,7 @@ const isChecked = ref(false)
             </NuxtLink>
             <NuxtLink
               to="/"
-              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300 tw-accessibility"
             >
               <svg class="w-5 h-5" viewBox="0 0 1600 1280">
                 <path
@@ -94,7 +96,9 @@ const isChecked = ref(false)
               </svg>
             </NuxtLink>
             <!-- Theme -->
-            <label class="block w-9 h-9 overflow-hidden relative mx-auto">
+            <label
+              class="block w-9 h-9 rounded-full overflow-hidden relative mx-auto focus-within:tw-accessibility-static"
+            >
               <input
                 v-model="isChecked"
                 type="checkbox"

playground/components/toast/ActionButtons.vue

@@ -4,13 +4,13 @@
   >
     <button
       type="button"
-      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-muted-500 bg-muted-100 dark:bg-muted-900 hover:text-muted-600 dark:text-muted-400 hover:bg-muted-50 dark:hover:bg-muted-1000 dark:hover:text-muted-100 transition-colors duration-300"
+      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-muted-500 bg-muted-100 dark:bg-muted-900 hover:text-muted-600 dark:text-muted-400 hover:bg-muted-50 dark:hover:bg-muted-1000 dark:hover:text-muted-100 transition-colors duration-300 tw-accessibility"
     >
       Dismiss
     </button>
     <button
       type="button"
-      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 dark:text-muted-100 bg-sky-100 dark:bg-sky-500 hover:text-sky-600 dark:hover:text-white hover:bg-sky-50 dark:hover:bg-sky-600 transition-colors duration-300"
+      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 dark:text-muted-100 bg-sky-100 dark:bg-sky-500 hover:text-sky-600 dark:hover:text-white hover:bg-sky-50 dark:hover:bg-sky-600 transition-colors duration-300 tw-accessibility"
     >
       Accept
     </button>

playground/components/toast/IconSoloDanger.vue

@@ -26,7 +26,7 @@
     </div>
     <button
       type="button"
-      class="h-11 w-11 flex items-center justify-center ml-auto text-muted-700 dark:text-muted-400"
+      class="h-9 w-9 flex items-center justify-center rounded-full ml-auto text-muted-700 dark:text-muted-400 hover:bg-muted-100 dark:hover:bg-muted-700 transition-colors duration-300 tw-accessibility"
     >
       <svg class="w-4 h-4" viewBox="0 0 24 24">
         <path

playground/components/toast/UserReplyClose.vue

@@ -20,7 +20,7 @@
     </div>
     <button
       type="button"
-      class="h-11 w-11 flex items-center justify-center ml-auto text-muted-400"
+      class="h-9 w-9 flex items-center justify-center rounded-full ml-auto text-muted-700 dark:text-muted-400 hover:bg-muted-100 dark:hover:bg-muted-700 transition-colors duration-300 tw-accessibility"
     >
       <svg class="w-4 h-4" viewBox="0 0 24 24">
         <path

playground/nuxt.config.ts

@@ -3,6 +3,7 @@ import NinjaNuxtToaster from '..'
 
 export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss', NinjaNuxtToaster],
+  css: ['@/assets/css/main.css'],
   app: {
     head: {
       link: [