Skip to content

Commit 68008ac

Browse files
knowlerknowler
committed
refactor(a11y): add headings to call to action cards
1 parent 50f9c68 commit 68008ac

1 file changed

Lines changed: 42 additions & 39 deletions

File tree

‎app/components/CallToAction.vue‎

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -13,74 +13,77 @@ const socialLinks = {
1313
</h2>
1414

1515
<div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
16-
<a
17-
:href="socialLinks.github"
18-
target="_blank"
19-
rel="noopener noreferrer"
20-
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"
16+
<div
17+
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"
2118
>
22-
<div class="flex gap-2">
19+
<h3 class="z-1 flex gap-2">
2320
<span class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
2421
<span class="font-medium text-fg">
2522
{{ $t('about.get_involved.contribute.title') }}
2623
</span>
27-
</div>
28-
<p class="text-sm text-fg-muted leading-relaxed">
29-
{{ $t('about.get_involved.contribute.description') }}
24+
</h3>
25+
<p class="z-1 inline text-sm text-fg-muted leading-relaxed">
26+
{{ $t('about.get_involved.contribute.description') }}
3027
</p>
31-
<span
32-
class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
28+
<a
29+
:href="socialLinks.github"
30+
target="_blank"
31+
rel="noopener noreferrer"
32+
class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
3333
>
3434
{{ $t('about.get_involved.contribute.cta') }}
3535
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
36-
</span>
37-
</a>
36+
<span class="absolute z-0 inset-0" aria-hidden="true" />
37+
</a>
38+
</div>
3839

39-
<a
40-
:href="socialLinks.discord"
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+
<div
41+
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"
4442
>
45-
<div class="flex gap-2">
43+
<h3 class="z-1 flex gap-2">
4644
<span class="i-carbon:chat shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
4745
<span class="font-medium text-fg">
4846
{{ $t('about.get_involved.community.title') }}
4947
</span>
50-
</div>
51-
<p class="text-sm text-fg-muted leading-relaxed">
52-
{{ $t('about.get_involved.community.description') }}
48+
</h3>
49+
<p class="z-1 inline text-sm text-fg-muted leading-relaxed">
50+
{{ $t('about.get_involved.community.description') }}
5351
</p>
54-
<span
55-
class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
52+
<a
53+
:href="socialLinks.discord"
54+
target="_blank"
55+
rel="noopener noreferrer"
56+
class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
5657
>
5758
{{ $t('about.get_involved.community.cta') }}
5859
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
59-
</span>
60-
</a>
60+
<span class="absolute z-0 inset-0" aria-hidden="true" />
61+
</a>
62+
</div>
6163

62-
<a
63-
:href="socialLinks.bluesky"
64-
target="_blank"
65-
rel="noopener noreferrer"
66-
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"
64+
<div
65+
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"
6766
>
68-
<div class="flex gap-2">
67+
<h3 class="z-1 flex gap-2">
6968
<span class="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
7069
<span class="font-medium text-fg">
7170
{{ $t('about.get_involved.follow.title') }}
7271
</span>
73-
</div>
74-
<p class="text-sm text-fg-muted leading-relaxed">
75-
{{ $t('about.get_involved.follow.description') }}
72+
</h3>
73+
<p class="z-1 inline text-sm text-fg-muted leading-relaxed">
74+
{{ $t('about.get_involved.follow.description') }}
7675
</p>
77-
<span
78-
class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
76+
<a
77+
:href="socialLinks.bluesky"
78+
target="_blank"
79+
rel="noopener noreferrer"
80+
class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
7981
>
8082
{{ $t('about.get_involved.follow.cta') }}
8183
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
82-
</span>
83-
</a>
84+
<span class="absolute z-0 inset-0" aria-hidden="true" />
85+
</a>
86+
</div>
8487
</div>
8588
</div>
8689
</template>

0 commit comments

Comments
 (0)