Better a11y

LorisSigrist · Oct 24, 2023 · 14dd564 · 14dd564
1 parent 0bf39ec
commit 14dd564
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/site/src/lib/ui/Code/CodeGroupHeader.svelte b/site/src/lib/ui/Code/CodeGroupHeader.svelte
@@ -10,6 +10,9 @@
 
   /** @type {import("svelte/store").Writable<number>}*/
   const activeTab = getContext("code-group-active-tab");
+
+  /** @type {string}*/
+  const codeGroupId = getContext("code-group-id");
 </script>
 
 <div
@@ -25,18 +28,20 @@
     <div
       role="tablist"
       aria-orientation="horizontal"
-      class="-mb-px flex gap-4 text-xs font-medium"
+      class="-mb-px flex text-xs font-medium"
     >
       {#each $tabs as tab, i}
         {@const active = i === $activeTab}
         <button
           role="tab"
+          id="code-group-{codeGroupId}-tab-{tab}"
           on:click={() => activeTab.set(i)}
           class={merge(
-            "border-b py-3 transition ui-not-focus-visible:outline-none",
+            "border-b py-3 px-2 transition ui-not-focus-visible:outline-none outline-none",
+            "focus-visible:bg-orange-600/30",
             active
               ? "border-orange-500 text-orange-400"
-              : "border-transparent text-zinc-400 hover:text-zinc-300"
+              : "border-transparent text-zinc-400 hover:text-zinc-300",
           )}>{tab}</button
         >
       {/each}

diff --git a/site/src/lib/ui/Code/CodePanel.svelte b/site/src/lib/ui/Code/CodePanel.svelte
@@ -13,17 +13,21 @@
   const tabs = getContext("code-group-tabs");
   /** @type {import("svelte/store").Writable<number>}*/
   const activeTab = getContext("code-group-active-tab");
+  /** @type {string}*/
+  const codeGroupId = getContext("code-group-id");
 
   tabs.update((oldTabs) => [...oldTabs, name]);
-
   $: active = $tabs.findIndex((tab) => tab === name) === $activeTab;
 </script>
 
-{#if active}
-  <div class="group dark:bg-white/2.5">
-    {#if label || tag}
-      <CodePanelHeader {tag} {label} />
-    {/if}
-    <CodePanelBody><slot /></CodePanelBody>
-  </div>
-{/if}
+<div 
+  class="group dark:bg-white/2.5" 
+  hidden={!active} 
+  role="tabpanel"
+  aria-labelledby="code-group-{codeGroupId}-tab-{name}"
+>
+  {#if label || tag}
+    <CodePanelHeader {tag} {label} />
+  {/if}
+  <CodePanelBody><slot /></CodePanelBody>
+</div>
diff --git a/site/src/lib/ui/Code/CopyButton.svelte b/site/src/lib/ui/Code/CopyButton.svelte
@@ -7,10 +7,11 @@
 
 <button
   class={merge(
-    "group/button text-sm absolute right-4 top-2.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100",
+    "group/button text-sm absolute right-4 top-2.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition group-hover:opacity-100",
     copied
       ? "bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20"
-      : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"
+      : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5",
+    "focus:opacity-100 outline-none focus-visible:bg-orange-400/30",
   )}
   on:click
 >
@@ -29,7 +30,8 @@
 
   <span
     aria-hidden={!copied}
-    class={merge("pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300",
+    class={merge(
+      "pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300",
       !copied && "-translate-y-1.5 opacity-0"
     )}
   >