fix: some a11y fixes

Author: danielroe

app/components/AppTooltip.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
 }>()
 
 const isVisible = ref(false)
+const tooltipId = useId()
 
 const positionClasses: Record<string, string> = {
   top: 'bottom-full left-1/2 -translate-x-1/2 mb-1',
@@ -16,26 +17,36 @@ const positionClasses: Record<string, string> = {
 }
 
 const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])
+
+function show() {
+  isVisible.value = true
+}
+
+function hide() {
+  isVisible.value = false
+}
 </script>
 
 <template>
   <div
     class="relative inline-flex"
-    @mouseenter="isVisible = true"
-    @mouseleave="isVisible = false"
-    @focus="isVisible = true"
-    @blur="isVisible = false"
+    :aria-describedby="isVisible ? tooltipId : undefined"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
   >
     <slot />
 
     <Transition
-      enter-active-class="transition-opacity duration-150"
-      leave-active-class="transition-opacity duration-100"
+      enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
+      leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
       enter-from-class="opacity-0"
       leave-to-class="opacity-0"
     >
       <div
         v-if="isVisible"
+        :id="tooltipId"
         role="tooltip"
         class="absolute px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
         :class="tooltipPosition"

app/components/PackagePlaygrounds.vue

@@ -43,6 +43,8 @@ function getColor(provider: string): string {
 // Dropdown state
 const isOpen = ref(false)
 const dropdownRef = ref<HTMLElement>()
+const menuRef = ref<HTMLElement>()
+const focusedIndex = ref(-1)
 
 onClickOutside(dropdownRef, () => {
   isOpen.value = false
@@ -52,12 +54,64 @@ onClickOutside(dropdownRef, () => {
 const hasSingleLink = computed(() => props.links.length === 1)
 const hasMultipleLinks = computed(() => props.links.length > 1)
 const firstLink = computed(() => props.links[0])
+
+function closeDropdown() {
+  isOpen.value = false
+  focusedIndex.value = -1
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (!isOpen.value) {
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      isOpen.value = true
+      focusedIndex.value = 0
+      nextTick(() => focusMenuItem(0))
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'Escape':
+      event.preventDefault()
+      closeDropdown()
+      break
+    case 'ArrowDown':
+      event.preventDefault()
+      focusedIndex.value = (focusedIndex.value + 1) % props.links.length
+      focusMenuItem(focusedIndex.value)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      focusedIndex.value = focusedIndex.value <= 0 ? props.links.length - 1 : focusedIndex.value - 1
+      focusMenuItem(focusedIndex.value)
+      break
+    case 'Home':
+      event.preventDefault()
+      focusedIndex.value = 0
+      focusMenuItem(0)
+      break
+    case 'End':
+      event.preventDefault()
+      focusedIndex.value = props.links.length - 1
+      focusMenuItem(props.links.length - 1)
+      break
+    case 'Tab':
+      closeDropdown()
+      break
+  }
+}
+
+function focusMenuItem(index: number) {
+  const items = menuRef.value?.querySelectorAll<HTMLElement>('[role="menuitem"]')
+  items?.[index]?.focus()
+}
 </script>
 
 <template>
   <section v-if="links.length > 0" aria-labelledby="playgrounds-heading">
     <h2 id="playgrounds-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
-      Playgrounds
+      Try it out
     </h2>
 
     <div ref="dropdownRef" class="relative">
@@ -67,7 +121,7 @@ const firstLink = computed(() => props.links[0])
           :href="firstLink.url"
           target="_blank"
           rel="noopener noreferrer"
-          class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated transition-colors duration-200"
+          class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
         >
           <span
             :class="[getIcon(firstLink.provider), getColor(firstLink.provider), 'w-4 h-4 shrink-0']"
@@ -81,40 +135,47 @@ const firstLink = computed(() => props.links[0])
       <button
         v-if="hasMultipleLinks"
         type="button"
-        class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated transition-colors duration-200"
+        aria-haspopup="true"
+        :aria-expanded="isOpen"
+        class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
         @click="isOpen = !isOpen"
+        @keydown="handleKeydown"
       >
         <span class="flex items-center gap-2">
           <span class="i-carbon-play w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
           <span class="text-fg-muted">{{ links.length }} Playgrounds</span>
         </span>
         <span
-          class="i-carbon-chevron-down w-3 h-3 text-fg-subtle transition-transform duration-200"
+          class="i-carbon-chevron-down w-3 h-3 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none"
           :class="{ 'rotate-180': isOpen }"
           aria-hidden="true"
         />
       </button>
 
       <!-- Dropdown menu -->
       <Transition
-        enter-active-class="transition duration-150 ease-out"
-        enter-from-class="opacity-0 scale-95"
+        enter-active-class="transition duration-150 ease-out motion-reduce:transition-none"
+        enter-from-class="opacity-0 scale-95 motion-reduce:scale-100"
         enter-to-class="opacity-100 scale-100"
-        leave-active-class="transition duration-100 ease-in"
+        leave-active-class="transition duration-100 ease-in motion-reduce:transition-none"
         leave-from-class="opacity-100 scale-100"
-        leave-to-class="opacity-0 scale-95"
+        leave-to-class="opacity-0 scale-95 motion-reduce:scale-100"
       >
         <div
           v-if="isOpen && hasMultipleLinks"
+          ref="menuRef"
+          role="menu"
           class="absolute top-full left-0 right-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 overflow-visible"
+          @keydown="handleKeydown"
         >
           <AppTooltip v-for="link in links" :key="link.url" :text="link.providerName" class="block">
             <a
               :href="link.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center gap-2 px-3 py-2 text-sm font-mono text-fg-muted hover:text-fg hover:bg-bg-muted transition-colors duration-150"
-              @click="isOpen = false"
+              role="menuitem"
+              class="flex items-center gap-2 px-3 py-2 text-sm font-mono text-fg-muted hover:text-fg hover:bg-bg-muted focus-visible:outline-none focus-visible:text-fg focus-visible:bg-bg-muted transition-colors duration-150"
+              @click="closeDropdown"
             >
               <span
                 :class="[getIcon(link.provider), getColor(link.provider), 'w-4 h-4 shrink-0']"