fix: more a11y fixes

Author: danielroe

app/components/ChartModal.vue

@@ -63,8 +63,10 @@ dialog::backdrop {
   background: rgba(0, 0, 0, 0.6);
 }
 
-dialog[open] {
-  animation: fade-in 200ms ease-out;
+@media (prefers-reduced-motion: no-preference) {
+  dialog[open] {
+    animation: fade-in 200ms ease-out;
+  }
 }
 
 @keyframes fade-in {

app/components/PackageDownloadAnalytics.vue

@@ -534,7 +534,7 @@ const config = computed(() => ({
             <button
               v-if="showResetButton"
               type="button"
-              title="Reset date range"
+              aria-label="Reset date range"
               class="flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
               @click="
                 () => {
@@ -546,7 +546,7 @@ const config = computed(() => ({
                 }
               "
             >
-              <span class="i-carbon-reset w-5 h-5 inline-block" />
+              <span class="i-carbon-reset w-5 h-5 inline-block" aria-hidden="true" />
             </button>
           </div>
         </div>
@@ -556,41 +556,75 @@ const config = computed(() => ({
     <ClientOnly v-if="inModal">
       <VueUiXy :dataset="chartData.dataset" :config="config">
         <template #menuIcon="{ isOpen }">
-          <span class="i-carbon-close w-6 h-6" v-if="isOpen" />
-          <span class="i-carbon-overflow-menu-vertical w-6 h-6" v-else />
+          <span v-if="isOpen" class="i-carbon-close w-6 h-6" aria-hidden="true" />
+          <span v-else class="i-carbon-overflow-menu-vertical w-6 h-6" aria-hidden="true" />
         </template>
         <template #optionCsv>
-          <span class="i-carbon-csv w-6 h-6 text-fg-subtle" style="pointer-events: none" />
+          <span
+            class="i-carbon-csv w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
         </template>
         <template #optionImg>
-          <span class="i-carbon-png w-6 h-6 text-fg-subtle" style="pointer-events: none" />
+          <span
+            class="i-carbon-png w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
         </template>
         <template #optionSvg>
-          <span class="i-carbon-svg w-6 h-6 text-fg-subtle" style="pointer-events: none" />
+          <span
+            class="i-carbon-svg w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
         </template>
 
         <template #annotator-action-close>
-          <span class="i-carbon-close w-6 h-6 text-fg-subtle" style="pointer-events: none" />
+          <span
+            class="i-carbon-close w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
         </template>
         <template #annotator-action-color="{ color }">
-          <span class="i-carbon-color-palette w-6 h-6" :style="{ color }" />
+          <span class="i-carbon-color-palette w-6 h-6" :style="{ color }" aria-hidden="true" />
         </template>
-        <template #annotator-action-undo="{ disabled }">
-          <span class="i-carbon-undo w-6 h-6 text-fg-subtle" style="pointer-events: none" />
+        <template #annotator-action-undo>
+          <span
+            class="i-carbon-undo w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
         </template>
-        <template #annotator-action-redo="{ disabled }">
-          <span class="i-carbon-redo w-6 h-6 text-fg-subtle" style="pointer-events: none" />
+        <template #annotator-action-redo>
+          <span
+            class="i-carbon-redo w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
         </template>
-        <template #annotator-action-delete="{ disabled }">
-          <span class="i-carbon-trash-can w-6 h-6 text-fg-subtle" style="pointer-events: none" />
+        <template #annotator-action-delete>
+          <span
+            class="i-carbon-trash-can w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
         </template>
         <template #optionAnnotator="{ isAnnotator }">
           <span
+            v-if="isAnnotator"
             class="i-carbon-edit-off w-6 h-6 text-fg-subtle"
             style="pointer-events: none"
-            v-if="isAnnotator"
+            aria-hidden="true"
+          />
+          <span
+            v-else
+            class="i-carbon-edit w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
           />
-          <span class="i-carbon-edit w-6 h-6 text-fg-subtle" style="pointer-events: none" v-else />
         </template>
       </VueUiXy>
       <template #fallback>
@@ -600,6 +634,8 @@ const config = computed(() => ({
 
     <div
       v-if="pending"
+      role="status"
+      aria-live="polite"
       class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
     >
       Loading…

test/nuxt/components.spec.ts

@@ -59,7 +59,8 @@ import ProvenanceBadge from '~/components/ProvenanceBadge.vue'
 import MarkdownText from '~/components/MarkdownText.vue'
 import PackageSkeleton from '~/components/PackageSkeleton.vue'
 import PackageCard from '~/components/PackageCard.vue'
-// import PackageDownloadAnalytics from '~/components/PackageDownloadAnalytics.vue'
+import ChartModal from '~/components/ChartModal.vue'
+import PackageDownloadAnalytics from '~/components/PackageDownloadAnalytics.vue'
 import PackagePlaygrounds from '~/components/PackagePlaygrounds.vue'
 import PackageDependencies from '~/components/PackageDependencies.vue'
 import PackageVersions from '~/components/PackageVersions.vue'
@@ -322,6 +323,64 @@ describe('component accessibility audits', () => {
     })
   })
 
+  // Note: PackageWeeklyDownloadStats tests are skipped because vue-data-ui VueUiSparkline
+  // component has issues in the test environment (requires DOM measurements that aren't
+  // available during SSR-like test mounting).
+
+  describe('ChartModal', () => {
+    it('should have no accessibility violations when closed', async () => {
+      const component = await mountSuspended(ChartModal, {
+        props: { open: false },
+        slots: { title: 'Downloads', default: '<div>Chart content</div>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    // Note: Testing the open state is challenging because native <dialog>.showModal()
+    // requires the element to be in the DOM and connected, which doesn't work well
+    // with the test environment's cloning approach. The dialog accessibility is
+    // inherently provided by the native <dialog> element with aria-labelledby.
+  })
+
+  describe('PackageDownloadAnalytics', () => {
+    const mockWeeklyDownloads = [
+      { downloads: 1000, weekKey: '2024-W01', weekStart: '2024-01-01', weekEnd: '2024-01-07' },
+      { downloads: 1200, weekKey: '2024-W02', weekStart: '2024-01-08', weekEnd: '2024-01-14' },
+      { downloads: 1500, weekKey: '2024-W03', weekStart: '2024-01-15', weekEnd: '2024-01-21' },
+    ]
+
+    it('should have no accessibility violations (non-modal)', async () => {
+      // Test only non-modal mode to avoid vue-data-ui chart rendering issues
+      const component = await mountSuspended(PackageDownloadAnalytics, {
+        props: {
+          weeklyDownloads: mockWeeklyDownloads,
+          packageName: 'vue',
+          createdIso: '2020-01-01T00:00:00.000Z',
+          inModal: false,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with empty data', async () => {
+      const component = await mountSuspended(PackageDownloadAnalytics, {
+        props: {
+          weeklyDownloads: [],
+          packageName: 'vue',
+          createdIso: null,
+          inModal: false,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    // Note: Modal mode tests with inModal: true are skipped because vue-data-ui VueUiXy
+    // component has issues in the test environment (requires DOM measurements).
+  })
+
   describe('PackagePlaygrounds', () => {
     it('should have no accessibility violations with single link', async () => {
       const links = [