diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue index f37d57be0..7f80e8798 100644 --- a/app/components/Button/Base.vue +++ b/app/components/Button/Base.vue @@ -25,6 +25,10 @@ const props = withDefaults( ) const el = useTemplateRef('el') +const slots = defineSlots<{ + default?: () => unknown +}>() +const iconOnly = computed(() => !!props.classicon && !slots.default) const keyboardShortcutsEnabled = useKeyboardShortcuts() @@ -41,8 +45,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))': diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue index 3e8cac4cf..340eb3cc3 100644 --- a/app/components/Link/Base.vue +++ b/app/components/Link/Base.vue @@ -59,6 +59,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) const keyboardShortcutsEnabled = useKeyboardShortcuts() @@ -70,8 +72,14 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts() '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', }" @@ -90,8 +98,14 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts() 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))': diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue index 2e518f9a1..7f9978782 100644 --- a/app/components/Package/Dependencies.vue +++ b/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" - > - {{ $t('package.dependencies.view_vulnerabilities') }} - + /> - {{ $t('package.deprecated.label') }} - + /> - {{ $t('package.downloads.community_distribution') }} - + />
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue index 6f1fa4def..f13638eed 100644 --- a/app/components/Package/WeeklyDownloadStats.vue +++ b/app/components/Package/WeeklyDownloadStats.vue @@ -288,11 +288,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" - > - {{ $t('package.trends.title') }} - + /> diff --git a/app/pages/index.vue b/app/pages/index.vue index 74d38d65d..3329cb9fe 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -92,7 +92,7 @@ defineOgImageComponent('Default', { diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index bb67695b1..f5bfe11a3 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -1123,21 +1123,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" - > - {{ $t('package.stats.view_dependency_graph') }} - + /> - {{ $t('package.stats.inspect_dependency_tree') }} - + />