From 6fbf6446679acdb3534a62d5a81f7dc02af831b0 Mon Sep 17 00:00:00 2001
From: moucx <moucx@cn.ibm.com>
Date: Tue, 27 Jan 2026 18:49:50 +0800
Subject: [PATCH 1/3] fix(PackageVersions): OtherVersions group major version
 root node should be an url

---
 app/components/PackageVersions.vue | 140 ++++++++++++++++++++---------
 1 file changed, 96 insertions(+), 44 deletions(-)

diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
index 9494041e32..a2efb353c3 100644
--- a/app/components/PackageVersions.vue
+++ b/app/components/PackageVersions.vue
@@ -499,29 +499,63 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <template v-if="otherMajorGroups.length > 0">
             <div v-for="group in otherMajorGroups" :key="group.major">
               <!-- Major group header -->
-              <button
-                v-if="group.versions.length > 1"
-                type="button"
-                class="w-full text-left py-1"
-                :aria-expanded="expandedMajorGroups.has(group.major)"
-                :title="group.versions[0]?.version"
-                @click="toggleMajorGroup(group.major)"
-              >
-                <div class="flex items-center gap-2">
-                  <span
-                    class="w-3 h-3 transition-transform duration-200 text-fg-subtle"
-                    :class="
-                      expandedMajorGroups.has(group.major)
-                        ? 'i-carbon-chevron-down'
-                        : 'i-carbon-chevron-right'
-                    "
-                  />
-                  <span
-                    class="font-mono text-xs truncate"
-                    :class="group.versions[0]?.deprecated ? 'text-red-400' : 'text-fg-muted'"
-                  >
-                    {{ group.versions[0]?.version }}
-                  </span>
+              <div v-if="group.versions.length > 1" class="py-1">
+                <div class="flex items-center justify-between gap-2">
+                  <div class="flex items-center gap-2 min-w-0">
+                    <button
+                      type="button"
+                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0"
+                      :aria-expanded="expandedMajorGroups.has(group.major)"
+                      :aria-label="
+                        expandedMajorGroups.has(group.major)
+                          ? `Collapse major ${group.major}`
+                          : `Expand major ${group.major}`
+                      "
+                      @click="toggleMajorGroup(group.major)"
+                    >
+                      <span
+                        class="w-3 h-3 transition-transform duration-200"
+                        :class="
+                          expandedMajorGroups.has(group.major)
+                            ? 'i-carbon-chevron-down'
+                            : 'i-carbon-chevron-right'
+                        "
+                      />
+                    </button>
+                    <NuxtLink
+                      v-if="group.versions[0]?.version"
+                      :to="versionRoute(group.versions[0]?.version)"
+                      class="font-mono text-xs transition-colors duration-200 truncate"
+                      :class="
+                        group.versions[0]?.deprecated
+                          ? 'text-red-400 hover:text-red-300'
+                          : 'text-fg-muted hover:text-fg'
+                      "
+                      :title="
+                        group.versions[0]?.deprecated
+                          ? `${group.versions[0]?.version} (deprecated)`
+                          : group.versions[0]?.version
+                      "
+                    >
+                      {{ group.versions[0]?.version }}
+                    </NuxtLink>
+                  </div>
+                  <div class="flex items-center gap-2 shrink-0">
+                    <DateTime
+                      v-if="group.versions[0]?.time"
+                      :datetime="group.versions[0]?.time"
+                      class="text-[10px] text-fg-subtle"
+                      year="numeric"
+                      month="short"
+                      day="numeric"
+                    />
+                    <ProvenanceBadge
+                      v-if="group.versions[0]?.hasProvenance"
+                      :package-name="packageName"
+                      :version="group.versions[0]?.version"
+                      compact
+                    />
+                  </div>
                 </div>
                 <div
                   v-if="group.versions[0]?.tags?.length"
@@ -536,28 +570,46 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     {{ tag }}
                   </span>
                 </div>
-              </button>
+              </div>
               <!-- Single version (no expand needed) -->
               <div v-else class="py-1">
-                <div class="flex items-center gap-2">
-                  <span class="w-3" />
-                  <NuxtLink
-                    v-if="group.versions[0]"
-                    :to="versionRoute(group.versions[0].version)"
-                    class="font-mono text-xs transition-colors duration-200 truncate"
-                    :class="
-                      group.versions[0].deprecated
-                        ? 'text-red-400 hover:text-red-300'
-                        : 'text-fg-muted hover:text-fg'
-                    "
-                    :title="
-                      group.versions[0].deprecated
-                        ? `${group.versions[0].version} (deprecated)`
-                        : group.versions[0].version
-                    "
-                  >
-                    {{ group.versions[0].version }}
-                  </NuxtLink>
+                <div class="flex items-center justify-between gap-2">
+                  <div class="flex items-center gap-2 min-w-0">
+                    <span class="w-4 shrink-0" />
+                    <NuxtLink
+                      v-if="group.versions[0]?.version"
+                      :to="versionRoute(group.versions[0]?.version)"
+                      class="font-mono text-xs transition-colors duration-200 truncate"
+                      :class="
+                        group.versions[0]?.deprecated
+                          ? 'text-red-400 hover:text-red-300'
+                          : 'text-fg-muted hover:text-fg'
+                      "
+                      :title="
+                        group.versions[0]?.deprecated
+                          ? `${group.versions[0]?.version} (deprecated)`
+                          : group.versions[0]?.version
+                      "
+                    >
+                      {{ group.versions[0]?.version }}
+                    </NuxtLink>
+                  </div>
+                  <div class="flex items-center gap-2 shrink-0">
+                    <DateTime
+                      v-if="group.versions[0]?.time"
+                      :datetime="group.versions[0]?.time"
+                      class="text-[10px] text-fg-subtle"
+                      year="numeric"
+                      month="short"
+                      day="numeric"
+                    />
+                    <ProvenanceBadge
+                      v-if="group.versions[0]?.hasProvenance"
+                      :package-name="packageName"
+                      :version="group.versions[0]?.version"
+                      compact
+                    />
+                  </div>
                 </div>
                 <div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
                   <span
@@ -573,7 +625,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <!-- Major group versions -->
               <div
                 v-if="expandedMajorGroups.has(group.major) && group.versions.length > 1"
-                class="ml-5 space-y-0.5"
+                class="ml-6 space-y-0.5"
               >
                 <div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
                   <div class="flex items-center justify-between gap-2">

From 9f255bd860ff0bbc932a09e2d06f5948a160fe2a Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 12:42:52 +0000
Subject: [PATCH 2/3] fix: use i18n for deprecated title in multi-version group
 header

---
 app/components/PackageVersions.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
index 37e0511afc..207b07a784 100644
--- a/app/components/PackageVersions.vue
+++ b/app/components/PackageVersions.vue
@@ -547,7 +547,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       "
                       :title="
                         group.versions[0]?.deprecated
-                          ? `${group.versions[0]?.version} (deprecated)`
+                          ? t('package.versions.deprecated_title', {
+                              version: group.versions[0]?.version,
+                            })
                           : group.versions[0]?.version
                       "
                     >

From 198ce60137294d89b7439303fb3fbb0b776c4a1a Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 12:46:52 +0000
Subject: [PATCH 3/3] fix: improve accessibility and add tests for
 OtherVersions changes

- Add visible focus states to expand/collapse buttons
- Add aria-hidden to decorative icons
- Add aria-label to Other versions and major group expand buttons
- Add i18n keys for expand/collapse other versions and major groups
- Add tests for DateTime and ProvenanceBadge in OtherVersions section
- Add accessibility tests for focus states and aria attributes
---
 app/components/PackageVersions.vue           |  25 ++-
 i18n/locales/en.json                         |   4 +
 test/nuxt/components/PackageVersions.spec.ts | 185 +++++++++++++++++++
 3 files changed, 208 insertions(+), 6 deletions(-)

diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
index 207b07a784..3053496193 100644
--- a/app/components/PackageVersions.vue
+++ b/app/components/PackageVersions.vue
@@ -306,7 +306,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <button
             v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
             type="button"
-            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors"
+            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
             :aria-expanded="expandedTags.has(row.tag)"
             :aria-label="
               expandedTags.has(row.tag)
@@ -318,6 +318,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <span
               v-if="loadingTags.has(row.tag)"
               class="i-carbon-rotate-180 w-3 h-3 animate-spin"
+              aria-hidden="true"
             />
             <span
               v-else
@@ -325,6 +326,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               :class="
                 expandedTags.has(row.tag) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'
               "
+              aria-hidden="true"
             />
           </button>
           <span v-else class="w-4" />
@@ -441,18 +443,28 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <div class="pt-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-left"
+          class="flex items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
           :aria-expanded="otherVersionsExpanded"
+          :aria-label="
+            otherVersionsExpanded
+              ? $t('package.versions.collapse_other')
+              : $t('package.versions.expand_other')
+          "
           @click="expandOtherVersions"
         >
           <span
             class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors"
           >
-            <span v-if="otherVersionsLoading" class="i-carbon-rotate-180 w-3 h-3 animate-spin" />
+            <span
+              v-if="otherVersionsLoading"
+              class="i-carbon-rotate-180 w-3 h-3 animate-spin"
+              aria-hidden="true"
+            />
             <span
               v-else
               class="w-3 h-3 transition-transform duration-200"
               :class="otherVersionsExpanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
+              aria-hidden="true"
             />
           </span>
           <span class="text-xs text-fg-muted py-1.5">
@@ -518,12 +530,12 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center gap-2 min-w-0">
                     <button
                       type="button"
-                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0"
+                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
                       :aria-expanded="expandedMajorGroups.has(group.major)"
                       :aria-label="
                         expandedMajorGroups.has(group.major)
-                          ? `Collapse major ${group.major}`
-                          : `Expand major ${group.major}`
+                          ? $t('package.versions.collapse_major', { major: group.major })
+                          : $t('package.versions.expand_major', { major: group.major })
                       "
                       @click="toggleMajorGroup(group.major)"
                     >
@@ -534,6 +546,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                             ? 'i-carbon-chevron-down'
                             : 'i-carbon-chevron-right'
                         "
+                        aria-hidden="true"
                       />
                     </button>
                     <NuxtLink
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 3e16fbd8de..32006c25b3 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -116,6 +116,10 @@
       "title": "Versions",
       "collapse": "Collapse {tag}",
       "expand": "Expand {tag}",
+      "collapse_other": "Collapse other versions",
+      "expand_other": "Expand other versions",
+      "collapse_major": "Collapse major {major}",
+      "expand_major": "Expand major {major}",
       "other_versions": "Other versions",
       "more_tagged": "{count} more tagged",
       "all_covered": "All versions are covered by tags above",
diff --git a/test/nuxt/components/PackageVersions.spec.ts b/test/nuxt/components/PackageVersions.spec.ts
index d1bd5ffb7d..50e8c94b3b 100644
--- a/test/nuxt/components/PackageVersions.spec.ts
+++ b/test/nuxt/components/PackageVersions.spec.ts
@@ -624,6 +624,136 @@ describe('PackageVersions', () => {
         expect(text.includes('1.1.0') || component.findAll('button').length > 2).toBe(true)
       })
     })
+
+    it('shows DateTime for major group versions', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '2.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '1.1.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '2.0.0': createVersion('2.0.0'),
+          },
+          distTags: { latest: '2.0.0' },
+          time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Expand "Other versions"
+      const otherVersionsButton = component
+        .findAll('button')
+        .find(btn => btn.text().includes('Other versions'))
+
+      await otherVersionsButton!.trigger('click')
+
+      await vi.waitFor(() => {
+        // Should have DateTime components for both the main version and other versions
+        const dateTimeComponents = component.findAllComponents({ name: 'DateTime' })
+        expect(dateTimeComponents.length).toBeGreaterThan(1)
+      })
+    })
+
+    it('shows ProvenanceBadge for major group versions with provenance', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '2.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: true },
+        { version: '1.1.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: true },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '2.0.0': createVersion('2.0.0', { hasProvenance: true }),
+          },
+          distTags: { latest: '2.0.0' },
+          time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Expand "Other versions"
+      const otherVersionsButton = component
+        .findAll('button')
+        .find(btn => btn.text().includes('Other versions'))
+
+      await otherVersionsButton!.trigger('click')
+
+      await vi.waitFor(() => {
+        // Should have ProvenanceBadge components for versions with provenance
+        const provenanceBadges = component.findAllComponents({ name: 'ProvenanceBadge' })
+        expect(provenanceBadges.length).toBeGreaterThan(1)
+      })
+    })
+
+    it('renders major group header as clickable link', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '2.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '1.1.0', time: '2024-01-10T12:00:00.000Z', hasProvenance: false },
+        { version: '1.0.0', time: '2024-01-05T12:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '2.0.0': createVersion('2.0.0'),
+          },
+          distTags: { latest: '2.0.0' },
+          time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Expand "Other versions"
+      const otherVersionsButton = component
+        .findAll('button')
+        .find(btn => btn.text().includes('Other versions'))
+
+      await otherVersionsButton!.trigger('click')
+
+      await vi.waitFor(() => {
+        // Find the major group header - should be a link (NuxtLink renders as <a>)
+        const links = component.findAll('a')
+        const majorGroupLink = links.find(l => l.text() === '1.1.0')
+        expect(majorGroupLink?.exists()).toBe(true)
+      })
+    })
+
+    it('shows DateTime and ProvenanceBadge for single version in major group', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '2.0.0', time: '2024-01-15T12:00:00.000Z', hasProvenance: false },
+        { version: '1.0.0', time: '2024-01-05T12:00:00.000Z', hasProvenance: true },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '2.0.0': createVersion('2.0.0'),
+          },
+          distTags: { latest: '2.0.0' },
+          time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Expand "Other versions"
+      const otherVersionsButton = component
+        .findAll('button')
+        .find(btn => btn.text().includes('Other versions'))
+
+      await otherVersionsButton!.trigger('click')
+
+      await vi.waitFor(() => {
+        // Single version group (1.0.0) should still have DateTime
+        const dateTimeComponents = component.findAllComponents({ name: 'DateTime' })
+        expect(dateTimeComponents.length).toBeGreaterThan(1)
+
+        // And ProvenanceBadge for the version with provenance
+        const provenanceBadges = component.findAllComponents({ name: 'ProvenanceBadge' })
+        expect(provenanceBadges.length).toBeGreaterThan(0)
+      })
+    })
   })
 
   describe('loading states', () => {
@@ -746,6 +876,61 @@ describe('PackageVersions', () => {
       expect(expandButton.exists()).toBe(true)
       expect(expandButton.attributes('aria-label')).toMatch(/Expand|Collapse/)
     })
+
+    it('other versions button has aria-label', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const otherVersionsButton = component
+        .findAll('button')
+        .find(btn => btn.text().includes('Other versions'))
+
+      expect(otherVersionsButton?.attributes('aria-label')).toMatch(/Expand other versions/)
+    })
+
+    it('expand buttons have visible focus states', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      const expandButton = component.find('button[aria-expanded]')
+      expect(expandButton.classes().some(c => c.includes('focus-visible'))).toBe(true)
+    })
+
+    it('icons have aria-hidden attribute', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '1.0.0' },
+          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+        },
+      })
+
+      // Find chevron icons inside buttons
+      const chevronIcons = component.findAll('button span.i-carbon-chevron-right')
+      expect(chevronIcons.length).toBeGreaterThan(0)
+      for (const icon of chevronIcons) {
+        expect(icon.attributes('aria-hidden')).toBe('true')
+      }
+    })
   })
 
   describe('error handling', () => {