fix: add aria labels + update tests

Author: danielroe

app/components/PackageDependencies.vue

@@ -62,6 +62,7 @@ const sortedOptionalDependencies = computed(() => {
         <a
           href="#dependencies"
           class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
+          :aria-label="$t('package.dependencies.anchor_link')"
         >
           <span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
         </a>
@@ -127,6 +128,7 @@ const sortedOptionalDependencies = computed(() => {
         <a
           href="#peer-dependencies"
           class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
+          :aria-label="$t('package.peer_dependencies.anchor_link')"
         >
           <span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
         </a>

app/components/PackageMaintainers.vue

@@ -167,6 +167,7 @@ watch(
       <a
         href="#maintainers"
         class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
+        :aria-label="$t('package.maintainers.anchor_link')"
       >
         <span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
       </a>

app/components/PackageVersions.vue

@@ -319,6 +319,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <a
         href="#versions"
         class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
+        :aria-label="$t('package.versions.anchor_link')"
       >
         <span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
       </a>

i18n/locales/en.json

@@ -126,6 +126,7 @@
     },
     "versions": {
       "title": "Versions",
+      "anchor_link": "Link to versions section",
       "collapse": "Collapse {tag}",
       "expand": "Expand {tag}",
       "collapse_other": "Collapse other versions",
@@ -139,12 +140,14 @@
     },
     "dependencies": {
       "title": "Dependencies ({count})",
+      "anchor_link": "Link to dependencies section",
       "list_label": "Package dependencies",
       "show_all": "show all {count} deps",
       "optional": "optional"
     },
     "peer_dependencies": {
       "title": "Peer Dependencies ({count})",
+      "anchor_link": "Link to peer dependencies section",
       "list_label": "Package peer dependencies",
       "show_all": "show all {count} peer deps"
     },
@@ -155,6 +158,7 @@
     },
     "maintainers": {
       "title": "Maintainers",
+      "anchor_link": "Link to maintainers section",
       "list_label": "Package maintainers",
       "you": "(you)",
       "via": "via {teams}",

test/nuxt/components/PackageVersions.spec.ts

@@ -82,9 +82,12 @@ describe('PackageVersions', () => {
         },
       })
 
-      const link = component.find('a')
-      expect(link.exists()).toBe(true)
-      expect(link.text()).toBe('2.0.0')
+      // Find version links (exclude anchor links that start with #)
+      const versionLinks = component
+        .findAll('a')
+        .filter(a => !a.attributes('href')?.startsWith('#'))
+      expect(versionLinks.length).toBeGreaterThan(0)
+      expect(versionLinks[0]?.text()).toBe('2.0.0')
     })
 
     it('renders scoped package version links correctly', async () => {
@@ -99,9 +102,12 @@ describe('PackageVersions', () => {
         },
       })
 
-      const link = component.find('a')
-      expect(link.exists()).toBe(true)
-      expect(link.text()).toBe('1.0.0')
+      // Find version links (exclude anchor links that start with #)
+      const versionLinks = component
+        .findAll('a')
+        .filter(a => !a.attributes('href')?.startsWith('#'))
+      expect(versionLinks.length).toBeGreaterThan(0)
+      expect(versionLinks[0]?.text()).toBe('1.0.0')
     })
   })
 
@@ -190,8 +196,11 @@ describe('PackageVersions', () => {
         },
       })
 
-      const links = component.findAll('a')
-      const versions = links.map(l => l.text())
+      // Find version links (exclude anchor links that start with #)
+      const versionLinks = component
+        .findAll('a')
+        .filter(a => !a.attributes('href')?.startsWith('#'))
+      const versions = versionLinks.map(l => l.text())
       // Should be sorted by version descending
       expect(versions[0]).toBe('2.0.0')
     })
@@ -210,8 +219,12 @@ describe('PackageVersions', () => {
         },
       })
 
-      const link = component.find('a')
-      expect(link.classes()).toContain('text-red-400')
+      // Find version links (exclude anchor links that start with #)
+      const versionLinks = component
+        .findAll('a')
+        .filter(a => !a.attributes('href')?.startsWith('#'))
+      expect(versionLinks.length).toBeGreaterThan(0)
+      expect(versionLinks[0]?.classes()).toContain('text-red-400')
     })
 
     it('shows deprecated version in title attribute', async () => {
@@ -226,8 +239,12 @@ describe('PackageVersions', () => {
         },
       })
 
-      const link = component.find('a')
-      expect(link.attributes('title')).toContain('deprecated')
+      // Find version links (exclude anchor links that start with #)
+      const versionLinks = component
+        .findAll('a')
+        .filter(a => !a.attributes('href')?.startsWith('#'))
+      expect(versionLinks.length).toBeGreaterThan(0)
+      expect(versionLinks[0]?.attributes('title')).toContain('deprecated')
     })
 
     it('filters deprecated tags from visible list when package is not deprecated', async () => {
@@ -552,9 +569,10 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Count visible version links (excluding "Other versions" section)
-      // The first set of links before the "Other versions" button
-      const visibleLinks = component.findAll('a')
+      // Count visible version links (excluding anchor links that start with #)
+      const visibleLinks = component
+        .findAll('a')
+        .filter(a => !a.attributes('href')?.startsWith('#'))
       // Should have max 10 visible links in the main section
       expect(visibleLinks.length).toBeLessThanOrEqual(10)
     })