fix: improve accessibility

Author: danielroe

app/components/ChartModal.vue

@@ -1,50 +1,78 @@
 <script setup lang="ts">
 const open = defineModel<boolean>('open', { default: false })
+
+const dialogRef = useTemplateRef('dialogRef')
+
+watch(open, isOpen => {
+  if (isOpen) {
+    dialogRef.value?.showModal()
+  } else {
+    dialogRef.value?.close()
+  }
+})
+
+function handleDialogClose() {
+  open.value = false
+}
+
+function handleBackdropClick(event: MouseEvent) {
+  // Close when clicking the backdrop (the dialog element itself, not its contents)
+  if (event.target === dialogRef.value) {
+    open.value = false
+  }
+}
 </script>
 
 <template>
   <Teleport to="body">
-    <Transition
-      enter-active-class="transition-opacity duration-200"
-      leave-active-class="transition-opacity duration-200"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
+    <dialog
+      ref="dialogRef"
+      class="bg-transparent backdrop:bg-black/60 max-w-3xl w-full p-4 m-auto"
+      aria-labelledby="chart-modal-title"
+      @close="handleDialogClose"
+      @click="handleBackdropClick"
     >
-      <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center p-4">
-        <!-- Backdrop -->
-        <button
-          type="button"
-          class="absolute inset-0 bg-black/60 cursor-default"
-          aria-label="Close modal"
-          @click="open = false"
-        />
-
-        <div
-          class="relative w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain max-w-3xl"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="package-download-stats"
-        >
-          <div class="p-6">
-            <div class="flex items-center justify-between mb-6">
-              <h2 id="package-download-stats" class="font-mono text-lg font-medium">
-                <slot name="title" />
-              </h2>
-              <button
-                type="button"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                aria-label="Close"
-                @click="open = false"
-              >
-                <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
-              </button>
-            </div>
-            <div class="flex items-center font-mono text-sm">
-              <slot />
-            </div>
+      <div
+        class="bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain"
+      >
+        <div class="p-6">
+          <div class="flex items-center justify-between mb-6">
+            <h2 id="chart-modal-title" class="font-mono text-lg font-medium">
+              <slot name="title" />
+            </h2>
+            <button
+              type="button"
+              class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+              aria-label="Close"
+              @click="open = false"
+            >
+              <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
+            </button>
+          </div>
+          <div class="flex items-center font-mono text-sm">
+            <slot />
           </div>
         </div>
       </div>
-    </Transition>
+    </dialog>
   </Teleport>
 </template>
+
+<style scoped>
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+dialog[open] {
+  animation: fade-in 200ms ease-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>

app/components/PackageDownloadAnalytics.vue

@@ -323,6 +323,9 @@ async function load() {
 
     evolution.value = (result as EvolutionData) ?? []
     displayedGranularity.value = selectedGranularity.value
+  } catch {
+    if (currentToken !== requestToken) return
+    evolution.value = []
   } finally {
     if (currentToken === requestToken) {
       pending.value = false

app/components/PackageWeeklyDownloadStats.vue

@@ -82,13 +82,15 @@ const config = computed(() => ({
         <h2 class="text-xs text-fg-subtle uppercase tracking-wider">
           {{ $t('package.downloads.title') }}
         </h2>
-        <a
+        <button
+          type="button"
           @click="showModal = true"
-          class="cursor-pointer link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0 self-center"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           :title="t('package.downloads.analyze')"
         >
-          <span class="i-carbon-data-analytics w-4 h-4" />
-        </a>
+          <span class="i-carbon-data-analytics w-4 h-4" aria-hidden="true" />
+          <span class="sr-only">{{ t('package.downloads.analyze') }}</span>
+        </button>
       </div>
 
       <div class="w-full overflow-hidden">