feat: update versions page download count tooltip/title (npmx-dev#2695)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Willow (GHOST) <git@willow.sh>

Author: 3 people

app/pages/package/[[org]]/[name]/versions.vue

@@ -119,8 +119,8 @@ const groupDownloadsMap = computed(() => {
   return map
 })
 
-function getDownloadsAriaLabel(downloads: number): string {
-  return `${numberFormatter.value.format(downloads)} ${t('package.downloads.title')}`
+function getDownloadsAriaLabel(downloads: number, version: string): string {
+  return `${numberFormatter.value.format(downloads)} ${t('package.downloads.version_distribution_title', { version })}`
 }
 
 // ─── Phase 2: full metadata (fired automatically after phase 1 completes) ────
@@ -374,9 +374,19 @@ const flatItems = computed<FlatItem[]>(() => {
             <span
               v-if="getVersionDownloads(latestTagRow!.version)"
               class="w-28 grid grid-flow-col auto-cols-max items-center gap-1 text-xs text-fg-muted tabular-nums justify-end"
-              :aria-label="getDownloadsAriaLabel(getVersionDownloads(latestTagRow!.version)!)"
+              :aria-label="
+                getDownloadsAriaLabel(
+                  getVersionDownloads(latestTagRow!.version)!,
+                  latestTagRow!.version,
+                )
+              "
               dir="ltr"
-              :title="getDownloadsAriaLabel(getVersionDownloads(latestTagRow!.version)!)"
+              :title="
+                getDownloadsAriaLabel(
+                  getVersionDownloads(latestTagRow!.version)!,
+                  latestTagRow!.version,
+                )
+              "
             >
               <span>{{ numberFormatter.format(getVersionDownloads(latestTagRow!.version)!) }}</span>
               <span class="i-lucide:chart-line" aria-hidden="true"></span>
@@ -443,9 +453,9 @@ const flatItems = computed<FlatItem[]>(() => {
             <span
               v-if="getVersionDownloads(row.version)"
               class="w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0 relative z-10"
-              :aria-label="getDownloadsAriaLabel(getVersionDownloads(row.version)!)"
+              :aria-label="getDownloadsAriaLabel(getVersionDownloads(row.version)!, row.version)"
               dir="ltr"
-              :title="getDownloadsAriaLabel(getVersionDownloads(row.version)!)"
+              :title="getDownloadsAriaLabel(getVersionDownloads(row.version)!, row.version)"
             >
               <span>{{ numberFormatter.format(getVersionDownloads(row.version)!) }}</span>
               <span class="i-lucide:chart-line" aria-hidden="true"></span>
@@ -533,9 +543,13 @@ const flatItems = computed<FlatItem[]>(() => {
                     <span
                       v-if="groupDownloadsMap.has(item.groupKey)"
                       class="ms-auto w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0"
-                      :aria-label="getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!)"
+                      :aria-label="
+                        getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!, item.label)
+                      "
                       dir="ltr"
-                      :title="getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!)"
+                      :title="
+                        getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!, item.label)
+                      "
                     >
                       <span>{{
                         numberFormatter.format(groupDownloadsMap.get(item.groupKey)!)
@@ -624,8 +638,12 @@ const flatItems = computed<FlatItem[]>(() => {
                       <span
                         v-if="getVersionDownloads(item.version)"
                         class="w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0 relative z-10"
-                        :aria-label="getDownloadsAriaLabel(getVersionDownloads(item.version)!)"
-                        :title="getDownloadsAriaLabel(getVersionDownloads(item.version)!)"
+                        :aria-label="
+                          getDownloadsAriaLabel(getVersionDownloads(item.version)!, item.version)
+                        "
+                        :title="
+                          getDownloadsAriaLabel(getVersionDownloads(item.version)!, item.version)
+                        "
                         dir="ltr"
                       >
                         <span>{{
@@ -673,9 +691,13 @@ const flatItems = computed<FlatItem[]>(() => {
                   <span
                     v-if="groupDownloadsMap.has(item.groupKey)"
                     class="ms-auto w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0"
-                    :aria-label="getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!)"
+                    :aria-label="
+                      getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!, item.label)
+                    "
                     dir="ltr"
-                    :title="getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!)"
+                    :title="
+                      getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!, item.label)
+                    "
                   >
                     <span>{{ numberFormatter.format(groupDownloadsMap.get(item.groupKey)!) }}</span>
                     <span class="i-lucide:chart-line" aria-hidden="true"></span>

i18n/locales/en.json

@@ -716,6 +716,7 @@
     },
     "downloads": {
       "title": "Weekly Downloads",
+      "version_distribution_title": "weekly downloads for version {version}",
       "community_distribution": "View community adoption distribution",
       "subtitle": "Across all versions",
       "sparkline_nav_hint": "Use ← →"

i18n/locales/zh-CN.json

@@ -711,6 +711,7 @@
     },
     "downloads": {
       "title": "每周下载量",
+      "version_distribution_title": "{version} 版本的每周下载量",
       "community_distribution": "查看社区采用分布",
       "subtitle": "涵盖所有版本",
       "sparkline_nav_hint": "使用 ← →"

i18n/locales/zh-TW.json

@@ -659,6 +659,7 @@
     },
     "downloads": {
       "title": "每週下載量",
+      "version_distribution_title": "{version} 每週下載量",
       "community_distribution": "檢視社群採用分布",
       "subtitle": "所有版本",
       "sparkline_nav_hint": "使用 ← →"

i18n/schema.json

@@ -2152,6 +2152,9 @@
             "title": {
               "type": "string"
             },
+            "version_distribution_title": {
+              "type": "string"
+            },
             "community_distribution": {
               "type": "string"
             },