use modern focus-visible instead

Author: HoodieRocks

src/lib/Topbar.svelte

@@ -48,17 +48,17 @@
 
 <div class="bg-stone-800 flex w-full items-center justify-between p-2 h-12 sticky top-0 border-b border-stone-700 z-20">
   <a
-    class="absolute -translate-y-30 -translate-x-1/2 left-1/2 focus:outline-2 outline-blue-500 focus:translate-y-0"
+    class="absolute -translate-y-30 -translate-x-1/2 left-1/2 focus-visible:outline-2 outline-blue-500 focus-visible:translate-y-0"
     href="#nav_side">Go To Nav</a>
   <a
-    class="absolute -translate-y-30 -translate-x-1/2 left-1/2 focus:outline-2 outline-blue-500 focus:translate-y-0"
+    class="absolute -translate-y-30 -translate-x-1/2 left-1/2 focus-visible:outline-2 outline-blue-500 focus-visible:translate-y-0"
     href="#main_content">Go To Content</a>
   <div class="flex items-center grow">
     <button
-      class="px-2 pr-3 sm:hidden focus:outline-2 focus:outline-dph-orange"
+      class="px-2 pr-3 sm:hidden focus-visible:outline-2 focus-visible:outline-dph-orange"
       aria-label="{windowInfo.isNavOpen ? 'Collapse' : 'Expand'} Sidebar"
       onclick={() => (windowInfo.isNavOpen = !windowInfo.isNavOpen)}><IconMenu /></button>
-    <a class="flex items-center hover:text-white p-1 focus:outline-2 focus:outline-dph-orange" href="/">
+    <a class="flex items-center hover:text-white p-1 focus-visible:outline-2 focus-visible:outline-dph-orange" href="/">
       <img
         alt="Datapack Hub Logo"
         src="/logos/dph.svg"
@@ -72,21 +72,21 @@
   <div class="flex items-center gap-2">
     <a
       href="https://github.com/Datapack-Hub/wiki/blob/main/src/routes{page.url.pathname}/%2Bpage.svx"
-      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus:outline-2 focus:outline-dph-orange"
+      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus-visible:outline-2 focus-visible:outline-dph-orange"
       aria-label="Edit">
       <IconEdit />
       <span class="hidden sm:block">Edit</span>
     </a>
     <button
-      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus:outline-2 focus:outline-dph-orange"
+      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus-visible:outline-2 focus-visible:outline-dph-orange"
       aria-label="Copy URL"
       onclick={copyUrl}>
       <IconShare />
       <span class="hidden sm:block">{shareText}</span>
     </button>
     <a
       href="https://discord.gg/xHTHbZqXr6"
-      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus:outline-2 focus:outline-dph-orange"
+      class="bg-black/45 p-2 rounded-lg py-1 flex items-center gap-2 hover:text-stone-100 aspect-square sm:aspect-auto focus-visible:outline-2 focus-visible:outline-dph-orange"
       aria-label="Discord">
       <IconDiscord />
       <span class="hidden sm:block">Discord</span>

src/lib/sidebar/SearchBox.svelte

@@ -14,7 +14,7 @@
 
 <button
   aria-label="Open Search Modal"
-  class="bg-black/45 px-2 py-1 rounded-lg flex justify-between items-center mt-1 mb-2 w-full focus:outline-2 focus:outline-dph-orange"
+  class="bg-black/45 px-2 py-1 rounded-lg flex justify-between items-center mt-1 mb-2 w-full focus-visible:outline-2 focus-visible:outline-dph-orange"
   onclick={async () => await dialog.showModal()}>
   <div class="flex items-center gap-2">
     <IconSearch />

src/lib/sidebar/Sidebar.svelte

@@ -48,7 +48,7 @@
         <button
           class="{page == 'wiki'
             ? 'bg-stone-700'
-            : 'bg-stone-800'} hover:text-stone-400 px-2 py-1 rounded-md flex items-center gap-1 focus:outline-2 focus:outline-dph-orange"
+            : 'bg-stone-800'} hover:text-stone-400 px-2 py-1 rounded-md flex items-center gap-1 focus-visible:outline-2 focus-visible:outline-dph-orange"
           onclick={() => {
             page = "wiki";
             sessionStorage.setItem("page", "wiki");
@@ -58,7 +58,7 @@
         <button
           class="{page == 'guides'
             ? 'bg-stone-700'
-            : 'bg-stone-800'} hover:text-stone-400 px-2 py-1 rounded-md flex items-center gap-1 focus:outline-2 focus:outline-dph-orange"
+            : 'bg-stone-800'} hover:text-stone-400 px-2 py-1 rounded-md flex items-center gap-1 focus-visible:outline-2 focus-visible:outline-dph-orange"
           onclick={() => {
             page = "guides";
             sessionStorage.setItem("page", "guides");
@@ -91,7 +91,7 @@
     {/if}
     <button
       aria-label="{windowInfo.isNavOpen ? 'Collapse' : 'Expand'} Sidebar"
-      class="hidden sm:block text-stone-200 text-lg motion-safe:transition-all focus:outline-2 focus:outline-dph-orange {windowInfo.isNavOpen
+      class="hidden sm:block text-stone-200 text-lg motion-safe:transition-all focus-visible:outline-2 focus-visible:outline-dph-orange {windowInfo.isNavOpen
         ? 'rotate-0'
         : 'rotate-180'}"
       onclick={() => (windowInfo.isNavOpen = !windowInfo.isNavOpen)}>

src/lib/sidebar/navigation/SidebarCategory.svelte

@@ -16,7 +16,7 @@
 
 <details ontoggle={() => (windowInfo.isNavOpen = true)} class="w-full group marker:hidden">
   <summary
-    class="rounded-lg cursor-pointer p-1 w-full flex gap-2 items-center text-left hover:bg-stone-700 hover:text-white hover:font-medium marker:hidden focus:outline-2 focus:outline-dph-orange">
+    class="rounded-lg cursor-pointer p-1 w-full flex gap-2 items-center text-left hover:bg-stone-700 hover:text-white hover:font-medium marker:hidden focus-visible:outline-2 focus-visible:outline-dph-orange">
     <Icon />
     {#if windowInfo.isNavOpen}
       <span class="grow">{name}</span>

src/lib/sidebar/navigation/SidebarPage.svelte

@@ -15,7 +15,7 @@
 <a
   href={page}
   onclick={() => (windowInfo.width < 768 ? (windowInfo.isNavOpen = !windowInfo.isNavOpen) : null)}
-  class="hover:bg-stone-700 hover:text-white hover:font-medium py-1 rounded-lg flex gap-2 pl-1 items-center focus:outline-2 focus:outline-dph-orange">
+  class="hover:bg-stone-700 hover:text-white hover:font-medium py-1 rounded-lg flex gap-2 pl-1 items-center focus-visible:outline-2 focus-visible:outline-dph-orange">
   <Icon />
 
   {#if windowInfo.isNavOpen}