Skip to content

Commit dc5ec2c

Browse files
HassanZahirniaHassanZahirnia
committed
💄 Refactor footer structure for improved accessibility and organization; update headings and aria labels
1 parent 65f9d68 commit dc5ec2c

File tree

1 file changed

+41
-28
lines changed

1 file changed

+41
-28
lines changed

‎resources/views/components/footer.blade.php

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,10 @@ class="opacity-0"
3737
<a
3838
href="/"
3939
class="transition duration-200 will-change-transform hover:scale-[1.02]"
40-
aria-label="NativePHP homepage"
4140
>
4241
<x-logo
4342
class="h-6"
4443
aria-hidden="true"
45-
alt="NativePHP Logo"
4644
/>
4745
<span class="sr-only">NativePHP homepage</span>
4846
</a>
@@ -107,14 +105,17 @@ class="absolute top-1/2 left-3 -z-10 size-16 -translate-y-1/2 rounded-full bg-cy
107105
<div class="flex items-center gap-5 text-sm">
108106
<div class="flex flex-col items-center gap-2">
109107
{{-- Icon --}}
110-
<x-icons.email-document class="size-7 shrink-0" />
108+
<x-icons.email-document
109+
aria-hidden="true"
110+
class="size-7 shrink-0"
111+
/>
111112

112113
{{-- Title --}}
113-
<h2
114+
<span
114115
class="transition duration-300 will-change-transform group-hover:scale-105"
115116
>
116117
Newsletter
117-
</h2>
118+
</span>
118119
</div>
119120

120121
{{-- Message --}}
@@ -145,6 +146,7 @@ class="leading-relaxed opacity-70 transition duration-300 will-change-transform
145146
)
146147
}
147148
"
149+
aria-hidden="true"
148150
class="size-4 shrink-0"
149151
/>
150152
</a>
@@ -175,15 +177,22 @@ class="flex w-full flex-wrap justify-center gap-x-5 gap-y-3 sm:w-auto lg:justify
175177
"
176178
>
177179
{{-- Column --}}
178-
<div class="flex grow flex-col items-start gap-1 sm:grow-0">
179-
<h2 class="font-medium">Explore</h2>
180+
<section
181+
class="flex grow flex-col items-start gap-1 sm:grow-0"
182+
aria-labelledby="footer-explore-heading"
183+
>
184+
<h3
185+
id="footer-explore-heading"
186+
class="font-medium"
187+
>
188+
Explore
189+
</h3>
180190
<ul
181191
class="flex flex-col items-start text-sm text-gray-500 dark:text-gray-400"
182192
>
183193
<li>
184194
<a
185195
href="{{ route('welcome') }}"
186-
aria-label="Home"
187196
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
188197
>
189198
Home
@@ -192,7 +201,6 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
192201
<li>
193202
<a
194203
href="{{ route('blog') }}"
195-
aria-label="Blog"
196204
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
197205
>
198206
Blog
@@ -201,7 +209,6 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
201209
<li>
202210
<a
203211
href="https://shop.nativephp.com/"
204-
aria-label="NativePHP Shop"
205212
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
206213
>
207214
Shop
@@ -210,7 +217,6 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
210217
<li>
211218
<a
212219
href="https://bifrost.nativephp.com/"
213-
aria-label="Bifrost"
214220
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
215221
>
216222
Bifrost
@@ -219,7 +225,6 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
219225
<li>
220226
<a
221227
href="{{ route('privacy-policy') }}"
222-
aria-label="Privacy Policy"
223228
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
224229
>
225230
Privacy Policy
@@ -228,25 +233,31 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
228233
<li>
229234
<a
230235
href="{{ route('terms-of-service') }}"
231-
aria-label="Terms of Service"
232236
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
233237
>
234238
Terms of Service
235239
</a>
236240
</li>
237241
</ul>
238-
</div>
242+
</section>
239243

240244
{{-- Column --}}
241-
<div class="flex grow flex-col items-start gap-1 sm:grow-0">
242-
<h2 class="font-medium">Mobile</h2>
245+
<section
246+
class="flex grow flex-col items-start gap-1 sm:grow-0"
247+
aria-labelledby="footer-mobile-heading"
248+
>
249+
<h3
250+
id="footer-mobile-heading"
251+
class="font-medium"
252+
>
253+
Mobile
254+
</h3>
243255
<ul
244256
class="flex flex-col items-start text-sm text-gray-500 dark:text-gray-400"
245257
>
246258
<li>
247259
<a
248260
href="/docs/mobile/1/getting-started/introduction"
249-
aria-label="Mobile Documentation"
250261
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
251262
>
252263
Documentation
@@ -255,7 +266,6 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
255266
<li>
256267
<a
257268
href="{{ route('pricing') }}"
258-
aria-label="Pricing"
259269
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
260270
>
261271
Pricing
@@ -264,25 +274,31 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
264274
<li>
265275
<a
266276
href="https://github.com/nativephp"
267-
aria-label="GitHub"
268277
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
269278
>
270279
GitHub
271280
</a>
272281
</li>
273282
</ul>
274-
</div>
283+
</section>
275284

276285
{{-- Column --}}
277-
<div class="flex grow flex-col items-start gap-1 sm:grow-0">
278-
<h2 class="font-medium">Desktop</h2>
286+
<section
287+
class="flex grow flex-col items-start gap-1 sm:grow-0"
288+
aria-labelledby="footer-desktop-heading"
289+
>
290+
<h3
291+
id="footer-desktop-heading"
292+
class="font-medium"
293+
>
294+
Desktop
295+
</h3>
279296
<ul
280297
class="flex flex-col items-start text-sm text-gray-500 dark:text-gray-400"
281298
>
282299
<li>
283300
<a
284301
href="/docs/desktop/1/getting-started/introduction"
285-
aria-label="Desktop Documentation"
286302
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
287303
>
288304
Documentation
@@ -291,7 +307,6 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
291307
<li>
292308
<a
293309
href="{{ route('sponsoring') }}"
294-
aria-label="Sponsoring"
295310
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
296311
>
297312
Sponsoring
@@ -300,14 +315,13 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
300315
<li>
301316
<a
302317
href="https://github.com/nativephp"
303-
aria-label="GitHub"
304318
class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
305319
>
306320
GitHub
307321
</a>
308322
</li>
309323
</ul>
310-
</div>
324+
</section>
311325
</nav>
312326
</div>
313327

@@ -351,8 +365,8 @@ class="flex flex-col flex-wrap items-center gap-2 opacity-0 md:flex-row"
351365
<a
352366
href="https://zahirnia.com"
353367
target="_blank"
368+
rel="noopener noreferrer"
354369
class="group relative font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
355-
aria-label="Hassan's website"
356370
>
357371
Hassan Zahirnia
358372
<div
@@ -369,7 +383,6 @@ class="hidden h-3 w-0.5 bg-gray-300 md:block dark:bg-[#242734]"
369383
href="https://x.com/caneco"
370384
target="_blank"
371385
class="group relative font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
372-
aria-label="Caneco's Twitter profile"
373386
rel="noopener noreferrer"
374387
>
375388
Caneco

0 commit comments

Comments
 (0)