fix(ui): improve design of buttons/links with icons

app/components/Button/Base.vue

@@ -18,6 +18,8 @@ const props = withDefaults(
 )
 
 const el = useTemplateRef('el')
+const slots = useSlots()
+const iconOnly = computed(() => !!props.classicon && !slots.default)
 
 defineExpose({
   focus: () => el.value?.focus(),
@@ -32,8 +34,14 @@ defineExpose({
     :class="{
       'inline-flex': !block,
       'flex': block,
-      'text-sm px-4 py-2': size === 'medium',
-      'text-xs px-2 py-0.5': size === 'small',
+      'text-sm py-2': size === 'medium' && !iconOnly,
+      'text-sm p-2': size === 'medium' && !!iconOnly,
+      'px-4': size === 'medium' && !classicon && !iconOnly,
+      'ps-3 pe-4': size === 'medium' && !!classicon && !iconOnly,
+      'text-xs py-0.5': size === 'small' && !iconOnly,
+      'text-xs p-0.5': size === 'small' && !!iconOnly,
+      'px-2': size === 'small' && !classicon && !iconOnly,
+      'ps-1.5 pe-2': size === 'small' && !!classicon && !iconOnly,
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':

app/components/Link/Base.vue

@@ -55,6 +55,8 @@ const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
+const slots = useSlots()
+const iconOnly = computed(() => !!props.classicon && !slots.default)
 </script>
 
 <template>
@@ -65,8 +67,14 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
       'inline-flex': !block,
       'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
-      'text-sm px-4 py-2': isButtonMedium,
-      'text-xs px-2 py-0.5': isButtonSmall,
+      'text-sm py-2': isButtonMedium && !iconOnly,
+      'text-sm p-2': isButtonMedium && !!iconOnly,
+      'px-4': isButtonMedium && !classicon && !iconOnly,
+      'ps-3 pe-4': isButtonMedium && !!classicon && !iconOnly,
+      'text-xs py-0.5': isButtonSmall && !iconOnly,
+      'text-xs p-0.5': isButtonSmall && !!iconOnly,
+      'px-2': isButtonSmall && !classicon && !iconOnly,
+      'ps-1.5 pe-2': isButtonSmall && !!classicon && !iconOnly,
       'text-bg bg-fg': variant === 'button-primary',
       'bg-transparent text-fg': variant === 'button-secondary',
     }"
@@ -85,8 +93,14 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
         isLink,
       'justify-center font-mono border border-border rounded-md transition-all duration-200':
         isButton,
-      'text-sm px-4 py-2': isButtonMedium,
-      'text-xs px-2 py-0.5': isButtonSmall,
+      'text-sm py-2': isButtonMedium && !iconOnly,
+      'text-sm p-2': isButtonMedium && iconOnly,
+      'px-4': isButtonMedium && !classicon && !iconOnly,
+      'ps-3 pe-4': isButtonMedium && !!classicon && !iconOnly,
+      'text-xs py-0.5': isButtonSmall && !iconOnly,
+      'text-xs p-0.5': isButtonSmall && iconOnly,
+      'px-2': isButtonSmall && !classicon && !iconOnly,
+      'ps-1.5 pe-2': isButtonSmall && !!classicon && !iconOnly,
       'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'button-secondary',
       'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':

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/index.vue

@@ -92,7 +92,7 @@ defineOgImageComponent('Default', {
                 <ButtonBase
                   type="submit"
                   variant="primary"
-                  class="absolute inset-ie-2 border-transparent"
+                  class="absolute inset-ie-2 border-transparent max-sm:p-2"
                   classicon="i-lucide:search"
                 >
                   <span class="sr-only sm:not-sr-only">

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>