Skip to content

Commit 91a865c

Browse files
danielroedanielroe
committed
fix: ensure links have discernible text
1 parent 21eb54e commit 91a865c

6 files changed

Lines changed: 72 additions & 64 deletions

File tree

‎app/components/PackageDependencies.vue‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,17 @@ const sortedOptionalDependencies = computed(() => {
5656
>
5757
<h2
5858
id="dependencies-heading"
59-
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
59+
class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
6060
>
61-
{{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
6261
<a
6362
href="#dependencies"
64-
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
65-
:aria-label="$t('package.dependencies.anchor_link')"
63+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
6664
>
67-
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
65+
{{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
66+
<span
67+
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
68+
aria-hidden="true"
69+
/>
6870
</a>
6971
</h2>
7072
<ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
@@ -122,15 +124,17 @@ const sortedOptionalDependencies = computed(() => {
122124
>
123125
<h2
124126
id="peer-dependencies-heading"
125-
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
127+
class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
126128
>
127-
{{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
128129
<a
129130
href="#peer-dependencies"
130-
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
131-
:aria-label="$t('package.peer_dependencies.anchor_link')"
131+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
132132
>
133-
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
133+
{{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
134+
<span
135+
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
136+
aria-hidden="true"
137+
/>
134138
</a>
135139
</h2>
136140
<ul
@@ -188,16 +192,19 @@ const sortedOptionalDependencies = computed(() => {
188192
>
189193
<h2
190194
id="optional-dependencies-heading"
191-
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
195+
class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
192196
>
193-
{{
194-
$t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
195-
}}
196197
<a
197198
href="#optional-dependencies"
198-
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
199+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
199200
>
200-
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
201+
{{
202+
$t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
203+
}}
204+
<span
205+
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
206+
aria-hidden="true"
207+
/>
201208
</a>
202209
</h2>
203210
<ul

‎app/components/PackageMaintainers.vue‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -159,17 +159,16 @@ watch(
159159
aria-labelledby="maintainers-heading"
160160
class="scroll-mt-20"
161161
>
162-
<h2
163-
id="maintainers-heading"
164-
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
165-
>
166-
{{ $t('package.maintainers.title') }}
162+
<h2 id="maintainers-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
167163
<a
168164
href="#maintainers"
169-
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
170-
:aria-label="$t('package.maintainers.anchor_link')"
165+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
171166
>
172-
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
167+
{{ $t('package.maintainers.title') }}
168+
<span
169+
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
170+
aria-hidden="true"
171+
/>
173172
</a>
174173
</h2>
175174
<ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">

‎app/components/PackageVersions.vue‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -311,17 +311,16 @@ function getTagVersions(tag: string): VersionDisplay[] {
311311
aria-labelledby="versions-heading"
312312
class="overflow-hidden scroll-mt-20"
313313
>
314-
<h2
315-
id="versions-heading"
316-
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
317-
>
318-
{{ $t('package.versions.title') }}
314+
<h2 id="versions-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
319315
<a
320316
href="#versions"
321-
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
322-
:aria-label="$t('package.versions.anchor_link')"
317+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
323318
>
324-
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
319+
{{ $t('package.versions.title') }}
320+
<span
321+
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
322+
aria-hidden="true"
323+
/>
325324
</a>
326325
</h2>
327326

‎app/components/PackageWeeklyDownloadStats.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -146,15 +146,16 @@ const config = computed(() => {
146146
<div class="space-y-8">
147147
<section id="downloads" class="scroll-mt-20">
148148
<div class="flex items-center justify-between mb-3">
149-
<h2
150-
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider"
151-
>
152-
{{ $t('package.downloads.title') }}
149+
<h2 class="group text-xs text-fg-subtle uppercase tracking-wider">
153150
<a
154151
href="#downloads"
155-
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
152+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
156153
>
157-
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
154+
{{ $t('package.downloads.title') }}
155+
<span
156+
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
157+
aria-hidden="true"
158+
/>
158159
</a>
159160
</h2>
160161
<button

‎app/pages/[...package].vue‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -669,16 +669,16 @@ defineOgImageComponent('Package', {
669669
<!-- Install command with package manager selector -->
670670
<section id="install" aria-labelledby="install-heading" class="area-install scroll-mt-20">
671671
<div class="flex flex-wrap items-center justify-between mb-3">
672-
<h2
673-
id="install-heading"
674-
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider"
675-
>
676-
{{ $t('package.install.title') }}
672+
<h2 id="install-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
677673
<a
678674
href="#install"
679-
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
675+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
680676
>
681-
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
677+
{{ $t('package.install.title') }}
678+
<span
679+
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
680+
aria-hidden="true"
681+
/>
682682
</a>
683683
</h2>
684684
<!-- Package manager tabs -->
@@ -783,16 +783,16 @@ defineOgImageComponent('Package', {
783783
aria-labelledby="readme-heading"
784784
class="area-readme min-w-0 scroll-mt-20"
785785
>
786-
<h2
787-
id="readme-heading"
788-
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-4"
789-
>
790-
{{ $t('package.readme.title') }}
786+
<h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-4">
791787
<a
792788
href="#readme"
793-
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
789+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
794790
>
795-
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
791+
{{ $t('package.readme.title') }}
792+
<span
793+
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
794+
aria-hidden="true"
795+
/>
796796
</a>
797797
</h2>
798798
<!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
@@ -829,14 +829,17 @@ defineOgImageComponent('Package', {
829829
>
830830
<h2
831831
id="keywords-heading"
832-
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
832+
class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
833833
>
834-
{{ $t('package.keywords_title') }}
835834
<a
836835
href="#keywords"
837-
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
836+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
838837
>
839-
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
838+
{{ $t('package.keywords_title') }}
839+
<span
840+
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
841+
aria-hidden="true"
842+
/>
840843
</a>
841844
</h2>
842845
<ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
@@ -867,14 +870,17 @@ defineOgImageComponent('Package', {
867870
>
868871
<h2
869872
id="compatibility-heading"
870-
class="group inline-flex items-center gap-1.5 text-xs text-fg-subtle uppercase tracking-wider mb-3"
873+
class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
871874
>
872-
{{ $t('package.compatibility') }}
873875
<a
874876
href="#compatibility"
875-
class="opacity-0 group-hover:opacity-100 text-fg-subtle hover:text-fg-muted transition-opacity duration-200 no-underline"
877+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
876878
>
877-
<span class="i-carbon-link w-3 h-3 block" aria-hidden="true" />
879+
{{ $t('package.compatibility') }}
880+
<span
881+
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
882+
aria-hidden="true"
883+
/>
878884
</a>
879885
</h2>
880886
<dl class="space-y-2">

‎i18n/locales/en.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,6 @@
128128
},
129129
"versions": {
130130
"title": "Versions",
131-
"anchor_link": "Link to versions section",
132131
"collapse": "Collapse {tag}",
133132
"expand": "Expand {tag}",
134133
"collapse_other": "Collapse other versions",
@@ -142,14 +141,12 @@
142141
},
143142
"dependencies": {
144143
"title": "Dependencies ({count})",
145-
"anchor_link": "Link to dependencies section",
146144
"list_label": "Package dependencies",
147145
"show_all": "show all {count} deps",
148146
"optional": "optional"
149147
},
150148
"peer_dependencies": {
151149
"title": "Peer Dependencies ({count})",
152-
"anchor_link": "Link to peer dependencies section",
153150
"list_label": "Package peer dependencies",
154151
"show_all": "show all {count} peer deps"
155152
},
@@ -160,7 +157,6 @@
160157
},
161158
"maintainers": {
162159
"title": "Maintainers",
163-
"anchor_link": "Link to maintainers section",
164160
"list_label": "Package maintainers",
165161
"you": "(you)",
166162
"via": "via {teams}",

0 commit comments

Comments
 (0)