forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
refactor(a11y): add headings to call to action cards (#799)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Nathan Knowler
Daniel Roe
and committed by
GitHub
e386954e
6662ee33
+13
-12
+13
-12
app/components/CallToAction.vue
+13
-12
app/components/CallToAction.vue
···
34
34
</h2>
35
35
36
36
<div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
37
-
<a
37
+
<div
38
38
v-for="link in socialLinks"
39
39
:key="link.id"
40
-
:href="link.href"
41
-
target="_blank"
42
-
rel="noopener noreferrer"
43
-
class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
40
+
class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
44
41
>
45
-
<div class="flex gap-2">
42
+
<h3 class="z-1 flex gap-2">
46
43
<span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
47
44
<span class="font-medium text-fg">
48
45
{{ link.titleKey }}
49
46
</span>
50
-
</div>
51
-
<p class="text-sm text-fg-muted leading-relaxed">
47
+
</h3>
48
+
<p class="z-1 text-sm text-fg-muted leading-relaxed">
52
49
{{ link.descriptionKey }}
53
50
</p>
54
-
<span
55
-
class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
51
+
<a
52
+
:href="link.href"
53
+
target="_blank"
54
+
rel="noopener noreferrer"
55
+
class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
56
56
>
57
57
{{ link.ctaKey }}
58
58
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
59
-
</span>
60
-
</a>
59
+
<span class="absolute z-0 inset-0" aria-hidden="true" />
60
+
</a>
61
+
</div>
61
62
</div>
62
63
</div>
63
64
</template>