Skip to content

Commit bb41019

Browse files
HassanZahirniaHassanZahirnia
committed
♿️ Improve accessibility
1 parent cc281a4 commit bb41019

File tree

1 file changed

+44
-35
lines changed

1 file changed

+44
-35
lines changed

‎resources/views/components/bifrost-product-hunt-banner.blade.php‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
<a
22
href="https://www.producthunt.com/"
33
onclick="fathom.trackEvent('alert_click');"
4-
class="group relative z-30 flex flex-wrap items-center justify-center gap-x-2 gap-y-2.5 overflow-hidden bg-gray-100 px-5 py-2.5 text-center text-sm tracking-tight text-pretty select-none [--blue-ribbon:#3B63FE] [--product-hunt:#FF6154] sm:text-base dark:bg-gray-950/50"
4+
class="group relative z-30 flex flex-wrap items-center justify-center gap-x-2 gap-y-2.5 overflow-hidden bg-gray-100 px-5 py-2 text-center text-sm tracking-tight text-pretty select-none [--blue-ribbon:#3B63FE] [--product-hunt:#FF6154] sm:text-base dark:bg-gray-950/50"
5+
aria-label="Bifrost dropped on Product Hunt. Please upvote."
56
>
6-
{{-- Left arrows --}}
7-
<div class="hidden flex-row-reverse gap-2 min-[31rem]:flex">
7+
{{-- Decorative left arrows --}}
8+
<div
9+
class="hidden flex-row-reverse gap-2 min-[31rem]:flex"
10+
aria-hidden="true"
11+
>
812
<svg
913
x-data="{
1014
init() {
1115
gsap.to($el, {
12-
keyframes: {
13-
autoAlpha: [0, 1, 0],
14-
y: [0, -10],
15-
},
16+
keyframes: { autoAlpha: [0, 1, 0], y: [0, -10] },
1617
repeat: -1,
1718
ease: 'sine.in',
1819
duration: 2,
@@ -23,6 +24,8 @@ class="group relative z-30 flex flex-wrap items-center justify-center gap-x-2 ga
2324
class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
2425
viewBox="0 0 9 16"
2526
fill="none"
27+
aria-hidden="true"
28+
focusable="false"
2629
>
2730
<path
2831
d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
@@ -33,10 +36,7 @@ class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
3336
x-data="{
3437
init() {
3538
gsap.to($el, {
36-
keyframes: {
37-
autoAlpha: [0, 1, 0],
38-
y: [8, 0],
39-
},
39+
keyframes: { autoAlpha: [0, 1, 0], y: [8, 0] },
4040
repeat: -1,
4141
ease: 'sine.in',
4242
duration: 2,
@@ -47,6 +47,8 @@ class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
4747
class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
4848
viewBox="0 0 9 16"
4949
fill="none"
50+
aria-hidden="true"
51+
focusable="false"
5052
>
5153
<path
5254
d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
@@ -55,22 +57,24 @@ class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
5557
</svg>
5658
</div>
5759

58-
{{-- Label --}}
59-
<div
60+
{{-- Text: part 1 --}}
61+
<span
6062
class="transition duration-200 ease-out will-change-transform group-hover:translate-x-0.5 dark:text-slate-200"
6163
>
6264
Bifrost dropped on
63-
</div>
65+
</span>
6466

65-
{{-- Product Hunt --}}
66-
<div
67+
{{-- Product Hunt badge --}}
68+
<span
6769
class="flex items-center gap-1.5 rounded-full bg-white/50 py-1 pr-3 pl-1 transition duration-200 ease-out will-change-transform group-hover:scale-95 dark:bg-black/50"
6870
>
6971
<svg
7072
xmlns="http://www.w3.org/2000/svg"
7173
class="size-6 shrink-0"
7274
viewBox="0 0 21 20"
7375
fill="none"
76+
aria-hidden="true"
77+
focusable="false"
7478
>
7579
<path
7680
fill-rule="evenodd"
@@ -89,25 +93,25 @@ class="text-[var(--product-hunt)]"
8993
<span class="font-medium whitespace-nowrap text-[var(--product-hunt)]">
9094
Product Hunt
9195
</span>
92-
</div>
96+
</span>
9397

94-
{{-- Label --}}
95-
<div
98+
{{-- Text: part 2 --}}
99+
<span
96100
class="w-full transition duration-200 ease-out will-change-transform group-hover:-translate-x-0.5 xs:w-auto dark:text-slate-200"
97101
>
98102
Please upvote!
99-
</div>
103+
</span>
100104

101-
{{-- Right arrows --}}
102-
<div class="hidden gap-2 min-[31rem]:flex">
105+
{{-- Decorative right arrows --}}
106+
<div
107+
class="hidden gap-2 min-[31rem]:flex"
108+
aria-hidden="true"
109+
>
103110
<svg
104111
x-data="{
105112
init() {
106113
gsap.to($el, {
107-
keyframes: {
108-
autoAlpha: [0, 1, 0],
109-
y: [0, -10],
110-
},
114+
keyframes: { autoAlpha: [0, 1, 0], y: [0, -10] },
111115
repeat: -1,
112116
ease: 'sine.in',
113117
duration: 2,
@@ -118,6 +122,8 @@ class="w-full transition duration-200 ease-out will-change-transform group-hover
118122
class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
119123
viewBox="0 0 9 16"
120124
fill="none"
125+
aria-hidden="true"
126+
focusable="false"
121127
>
122128
<path
123129
d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
@@ -128,10 +134,7 @@ class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
128134
x-data="{
129135
init() {
130136
gsap.to($el, {
131-
keyframes: {
132-
autoAlpha: [0, 1, 0],
133-
y: [8, 0],
134-
},
137+
keyframes: { autoAlpha: [0, 1, 0], y: [8, 0] },
135138
repeat: -1,
136139
ease: 'sine.in',
137140
duration: 2,
@@ -142,6 +145,8 @@ class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
142145
class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
143146
viewBox="0 0 9 16"
144147
fill="none"
148+
aria-hidden="true"
149+
focusable="false"
145150
>
146151
<path
147152
d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
@@ -150,15 +155,19 @@ class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
150155
</svg>
151156
</div>
152157

153-
{{-- Left blur --}}
154-
<div class="absolute -top-5 right-1/2 -z-10 translate-x-1/2">
158+
{{-- Decorative blurs --}}
159+
<div
160+
class="absolute -top-5 right-1/2 -z-10 translate-x-1/2"
161+
aria-hidden="true"
162+
>
155163
<div
156164
class="h-12 w-40 -translate-x-20 rotate-30 rounded-full bg-[var(--product-hunt)] blur-[30px] dark:bg-red-500/60"
157165
></div>
158166
</div>
159-
160-
{{-- Right blur --}}
161-
<div class="absolute -top-5 right-1/2 -z-10 translate-x-1/2">
167+
<div
168+
class="absolute -top-5 right-1/2 -z-10 translate-x-1/2"
169+
aria-hidden="true"
170+
>
162171
<div
163172
class="h-12 w-40 translate-x-20 rotate-30 rounded-full bg-[var(--blue-ribbon)] blur-[30px] dark:bg-blue-400/60"
164173
></div>

0 commit comments

Comments
 (0)