Move focus to focus-visible

Author: davidmyersdev

assets/css/tailwind.css

@@ -302,14 +302,14 @@
   }
 
   .button {
-    @apply inline-flex items-center rounded cursor-pointer focus:outline-none focus:ring focus-within:ring;
+    @apply inline-flex items-center rounded cursor-pointer focus-visible:outline-none focus-visible:ring has-[:focus-visible]:ring;
   }
 
   .core-button {
     @apply core-button-shape;
     @apply cursor-pointer;
     @apply outline-none;
-    @apply focus:ring focus-within:ring;
+    @apply focus-visible:ring has-[:focus-visible]:ring;
     @apply bg-layer;
     @apply disabled:bg-layer-disabled ui-disabled:bg-layer-disabled;
     @apply disabled:text-layer-disabled ui-disabled:text-layer-disabled;
@@ -373,6 +373,6 @@
   }
 
   .sidebar-link {
-    @apply flex items-center justify-between rounded px-2 py-1 hover:bg-layer-hover focus:outline-none focus:ring;
+    @apply flex items-center justify-between rounded px-2 py-1 hover:bg-layer-hover focus-visible:outline-none focus-visible:ring;
   }
 }

components/CoreLink.vue

@@ -30,10 +30,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <a v-if="isExternal" :href="toExternal" rel="noopener noreferrer" target="_blank" class="cursor-pointer outline-none focus:ring">
+  <a v-if="isExternal" :href="toExternal" rel="noopener noreferrer" target="_blank" class="cursor-pointer outline-none focus-visible:ring">
     <slot />
   </a>
-  <NuxtLink v-else :to="toInternal" class="cursor-pointer outline-none focus:ring">
+  <NuxtLink v-else :to="toInternal" class="cursor-pointer outline-none focus-visible:ring">
     <slot />
   </NuxtLink>
 </template>