fix accessibility issues

Author: HoodieRocks

src/lib/sidebar/Sidebar.svelte

@@ -89,7 +89,7 @@
       </div>
     </div>
   </div>
-  <div class="flex text-sm text-stone-600 p-3 items-center w-full">
+  <div class="flex text-sm text-stone-400 p-3 items-center w-full">
     {#if windowInfo.isNavOpen}
       <span class="grow flex flex-col">pack_format: {latestMCData.packFormat} ({latestMCData.gameVersion})</span>
     {/if}
@@ -103,6 +103,6 @@
     </button>
   </div>
   {#if windowInfo.isNavOpen}
-    <span class="text-xs px-3 pb-3 text-stone-600">DATAPACK WIKI IS NOT AFFILIATED OR ENDORSED BY MOJANG STUDIOS</span>
+    <span class="text-xs px-3 pb-3 text-stone-400">DATAPACK WIKI IS NOT AFFILIATED OR ENDORSED BY MOJANG STUDIOS</span>
   {/if}
 </aside>

src/lib/sidebar/tabs/VersionPicker.svelte

@@ -19,7 +19,7 @@
   id="version"
   aria-label="Version Selector"
   bind:value={version}
-  class="bg-stone-900 p-2 w-full rounded-lg focus-visible:outline-2 accent-dph-orange focus-visible:outline-dph-orange mt-1 mb-2 border-r-8 border-stone-900 {windowInfo.isNavOpen
+  class="bg-stone-900 hover:bg-stone-950 hover:border-stone-950 p-2 w-full rounded-lg focus-visible:outline-2 accent-dph-orange focus-visible:outline-dph-orange mt-1 mb-2 border-r-8 border-stone-900 {windowInfo.isNavOpen
     ? ''
     : 'hidden'}">
   <option value="latest">Latest</option>

svelte.config.js

@@ -20,36 +20,38 @@ const admonitionsOptions = {
     note: {
       ifmClass: "secondary",
       keyword: "note",
-      svg: '<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-info-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>',
+      svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-info-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>',
     },
     tip: {
       ifmClass: "success",
       keyword: "tip",
-      svg: '<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-bulb"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" /><path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" /><path d="M9.7 17l4.6 0" /></svg>',
+      svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bulb"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" /><path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" /><path d="M9.7 17l4.6 0" /></svg>',
     },
     warning: {
       ifmClass: "danger",
       keyword: "warning",
-      svg: '<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-alert-triangle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" /><path d="M12 16h.01" /></svg>',
+      svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-alert-triangle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" /><path d="M12 16h.01" /></svg>',
     },
     info: {
       ifmClass: "info",
       keyword: "info",
-      svg: '<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-info-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>',
-    }
+      svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-info-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>',
+    },
   },
 };
 
 /** @type {import("rehype-autolink-headings").Options} */
 const autoLinkOptions = {
   behavior: "append",
   properties: {
-    tabIndex: -1
+    tabIndex: -1,
+    title: "Copy Link",
+    onclick: "{() => navigator.clipboard.writeText(this.href)}",
+    class: "ml-2 z-0",
   },
   content: {
     type: "text",
-    value: `<svg onclick="{() => navigator.clipboard.writeText(this.parentElement.href)}" aria-role="button" aria-label="Copy link" xmlns="http://www.w3.org/2000/svg" class="inline-block ml-2 stroke-stone-700 focus:stroke-stone-400
-    hover:stroke-stone-400 z-0 motion-safe:transition-colors" width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>`,
+    value: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="inline-block stroke-stone-700 focus:stroke-stone-400 hover:stroke-stone-400 motion-safe:transition-colors"><path stroke="none" d="M0 0h24v24H0z"/><path d="m9 15 6-6m-4-3 .46-.54a5 5 0 0 1 7.07 7.08L18 13m-5 5-.4.53a5.07 5.07 0 0 1-7.12 0 4.97 4.97 0 0 1 0-7.07L6 11"/></svg>`,
   },
 };