fix(ui): use aria-label instead of sr-only spans for icon-only buttons

sr-only spans made slots.default truthy, breaking auto-detection. aria-label is an equivalent accessible alternative that lets the slot be empty.

Author: NeeshSamsi

app/components/Package/Dependencies.vue

@@ -150,20 +150,18 @@ const numberFormatter = useNumberFormatter()
               :to="packageRoute(dep, getVulnerableDepInfo(dep)!.version)"
               class="shrink-0"
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
+              :aria-label="$t('package.dependencies.view_vulnerabilities')"
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
               classicon="i-lucide:shield-check"
-            >
-              <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
-            </LinkBase>
+            />
             <LinkBase
               v-if="getDeprecatedDepInfo(dep)"
               :to="packageRoute(dep, getDeprecatedDepInfo(dep)!.version)"
               class="shrink-0 text-purple-700 dark:text-purple-500"
+              :aria-label="$t('package.deprecated.label')"
               :title="getDeprecatedDepInfo(dep)!.message"
               classicon="i-lucide:octagon-alert"
-            >
-              <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
-            </LinkBase>
+            />
             <LinkBase
               :to="packageRoute(dep, version)"
               class="block truncate"

app/components/Package/Versions.vue

@@ -476,12 +476,11 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
       <ButtonBase
         variant="secondary"
         class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 -m-1 p-1 rounded"
+        :aria-label="$t('package.downloads.community_distribution')"
         :title="$t('package.downloads.community_distribution')"
         classicon="i-lucide:file-stack"
         @click="openDistributionModal"
-      >
-        <span class="sr-only">{{ $t('package.downloads.community_distribution') }}</span>
-      </ButtonBase>
+      />
     </template>
     <div class="space-y-0.5 min-w-0">
       <!-- Semver range filter -->

app/components/Package/WeeklyDownloadStats.vue

@@ -264,11 +264,10 @@ const config = computed(() => {
           type="button"
           @click="openChartModal"
           class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
+          :aria-label="$t('package.trends.title')"
           :title="$t('package.trends.title')"
           classicon="i-lucide:chart-line"
-        >
-          <span class="sr-only">{{ $t('package.trends.title') }}</span>
-        </ButtonBase>
+        />
         <span v-else-if="isLoadingWeeklyDownloads" class="min-w-6 min-h-6 -m-1 p-1" />
       </template>
 

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

@@ -1003,21 +1003,19 @@ const showSkeleton = shallowRef(false)
                   variant="button-secondary"
                   size="small"
                   :to="`https://npmgraph.js.org/?q=${pkg.name}`"
+                  :aria-label="$t('package.stats.view_dependency_graph')"
                   :title="$t('package.stats.view_dependency_graph')"
                   classicon="i-lucide:network -rotate-90"
-                >
-                  <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
-                </LinkBase>
+                />
 
                 <LinkBase
                   variant="button-secondary"
                   size="small"
                   :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
+                  :aria-label="$t('package.stats.inspect_dependency_tree')"
                   :title="$t('package.stats.inspect_dependency_tree')"
                   classicon="i-lucide:table"
-                >
-                  <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
-                </LinkBase>
+                />
               </ButtonGroup>
             </dd>
           </div>