Skip to content

Commit 925dfba

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Enhance footer structure with improved accessibility, semantic elements, and better navigation organization
1 parent 84f2c52 commit 925dfba

File tree

1 file changed

+132
-49
lines changed

1 file changed

+132
-49
lines changed

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

Lines changed: 132 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<footer class="mx-auto w-full max-w-screen-lg px-5 pb-5 pt-10">
22
{{-- Sponsor list --}}
3-
<div
3+
<section
44
x-init="
55
() => {
66
if (reducedMotion) return
@@ -21,9 +21,16 @@
2121
}
2222
"
2323
class="grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5 text-dolphin"
24-
aria-label="Our sponsors"
25-
role="region"
24+
aria-labelledby="sponsors-heading"
2625
>
26+
<!-- Added visually hidden heading for better document structure -->
27+
<h2
28+
id="sponsors-heading"
29+
class="sr-only"
30+
>
31+
Our Sponsors
32+
</h2>
33+
2734
<div
2835
class="flex h-24 flex-col place-items-center items-center justify-center rounded-xl bg-[#F4E7E2]/50 px-5 opacity-0 motion-reduce:opacity-100"
2936
>
@@ -56,6 +63,7 @@ class="flex h-24 flex-col items-center justify-center rounded-xl bg-[#F4E7E2]/50
5663
</div>
5764
<div
5865
class="flex h-24 flex-col items-center justify-center rounded-xl bg-[#F4E7E2]/50 px-5 opacity-0 motion-reduce:opacity-100"
66+
aria-label="Lunar - Sponsor"
5967
>
6068
<x-sponsors.lunar footer />
6169
</div>
@@ -84,8 +92,9 @@ class="transition duration-300 will-change-transform hover:scale-105 motion-redu
8492
}
8593
"
8694
class="flex h-24 flex-col items-center justify-center gap-2 rounded-xl px-5"
87-
aria-label="Become a sponsor"
88-
rel="noopener"
95+
aria-label="Become a sponsor of Filament"
96+
rel="noopener noreferrer"
97+
title="Support Filament by becoming a sponsor"
8998
>
9099
<svg
91100
xmlns="http://www.w3.org/2000/svg"
@@ -172,7 +181,7 @@ class="text-sm will-change-transform"
172181
</a>
173182
</div>
174183
</div>
175-
</div>
184+
</section>
176185

177186
<div
178187
class="flex flex-col items-stretch gap-x-20 gap-y-5 px-6 pt-10 lg:flex-row lg:items-start lg:justify-between min-[1060px]:px-0"
@@ -292,66 +301,140 @@ class="w-[1.6rem]"
292301
</div>
293302

294303
{{-- Right side links --}}
295-
<div
304+
<nav
296305
class="flex flex-1 flex-wrap justify-center gap-x-10 gap-y-3 lg:justify-around"
306+
aria-label="Footer navigation"
297307
>
298308
<div class="flex grow flex-col items-start gap-1 sm:grow-0">
299-
<div class="font-afacad text-xl font-medium text-midnight">
309+
<h2 class="font-afacad text-xl font-medium text-midnight">
300310
Explore
301-
</div>
302-
<div
311+
</h2>
312+
<ul
303313
class="flex flex-col items-start text-sm *:inline-block *:px-px *:py-1.5 *:text-hurricane *:transition *:duration-300 *:will-change-transform hover:*:translate-x-1 hover:*:text-black motion-reduce:*:transition-none motion-reduce:*:hover:transform-none"
304314
>
305-
<a href="{{ route('home') }}">Home</a>
306-
<a href="{{ route('docs') }}">Documentation</a>
307-
<a href="{{ route('api-docs') }}">PHP API Documentation</a>
308-
<a href="{{ route('use-cases.admin-panel') }}">
309-
Build an Admin Panel
310-
</a>
311-
</div>
315+
<li>
316+
<a
317+
href="{{ route('home') }}"
318+
aria-label="Go to homepage"
319+
>
320+
Home
321+
</a>
322+
</li>
323+
<li>
324+
<a
325+
href="{{ route('docs') }}"
326+
aria-label="View documentation"
327+
>
328+
Documentation
329+
</a>
330+
</li>
331+
<li>
332+
<a
333+
href="{{ route('api-docs') }}"
334+
aria-label="View PHP API documentation"
335+
>
336+
PHP API Documentation
337+
</a>
338+
</li>
339+
<li>
340+
<a
341+
href="{{ route('use-cases.admin-panel') }}"
342+
aria-label="Learn how to build an admin panel"
343+
>
344+
Build an Admin Panel
345+
</a>
346+
</li>
347+
</ul>
312348
</div>
313349
<div class="flex grow flex-col items-start gap-1 sm:grow-0">
314-
<div class="font-afacad text-xl font-medium text-midnight">
350+
<h2 class="font-afacad text-xl font-medium text-midnight">
315351
Community
316-
</div>
317-
<div
352+
</h2>
353+
<ul
318354
class="flex flex-col items-start text-sm *:inline-block *:px-px *:py-1.5 *:text-hurricane *:transition *:duration-300 *:will-change-transform hover:*:translate-x-1 hover:*:text-black motion-reduce:*:transition-none motion-reduce:*:hover:transform-none"
319355
>
320-
<a href="{{ route('plugins') }}">Plugins</a>
321-
<a href="{{ route('articles') }}">Content</a>
322-
<a href="{{ route('team') }}">Meet Our Team</a>
323-
<a
324-
href="https://github.com/filamentphp/filament?sponsor=1"
325-
target="_blank"
326-
>
327-
Sponsor
328-
</a>
329-
</div>
356+
<li>
357+
<a
358+
href="{{ route('plugins') }}"
359+
aria-label="Browse available plugins"
360+
>
361+
Plugins
362+
</a>
363+
</li>
364+
<li>
365+
<a
366+
href="{{ route('articles') }}"
367+
aria-label="Read articles and tutorials"
368+
>
369+
Content
370+
</a>
371+
</li>
372+
<li>
373+
<a
374+
href="{{ route('team') }}"
375+
aria-label="Learn about the Filament team members"
376+
>
377+
Meet Our Team
378+
</a>
379+
</li>
380+
<li>
381+
<a
382+
href="https://github.com/filamentphp/filament?sponsor=1"
383+
target="_blank"
384+
rel="noopener"
385+
aria-label="Sponsor Filament on GitHub"
386+
>
387+
Sponsor
388+
</a>
389+
</li>
390+
</ul>
330391
</div>
331392
<div class="flex grow flex-col items-start gap-1 sm:grow-0">
332-
<div class="font-afacad text-xl font-medium text-midnight">
393+
<h2 class="font-afacad text-xl font-medium text-midnight">
333394
Support
334-
</div>
335-
<div
395+
</h2>
396+
<ul
336397
class="flex flex-col items-start text-sm *:inline-block *:px-px *:py-1.5 *:text-hurricane *:transition *:duration-300 *:will-change-transform hover:*:translate-x-1 hover:*:text-black motion-reduce:*:transition-none motion-reduce:*:hover:transform-none"
337398
>
338-
<a href="https://shop.filamentphp.com">Shop</a>
339-
<a
340-
href="https://status.filamentphp.com"
341-
target="_blank"
342-
>
343-
Status
344-
</a>
345-
<a
346-
href="https://github.com/filamentphp/filament/discussions/new"
347-
target="_blank"
348-
>
349-
Help
350-
</a>
351-
<a href="{{ route('consulting') }}">Consulting</a>
352-
</div>
399+
<li>
400+
<a
401+
href="https://shop.filamentphp.com"
402+
aria-label="Visit the Filament shop"
403+
>
404+
Shop
405+
</a>
406+
</li>
407+
<li>
408+
<a
409+
href="https://status.filamentphp.com"
410+
target="_blank"
411+
rel="noopener"
412+
aria-label="Check Filament service status"
413+
>
414+
Status
415+
</a>
416+
</li>
417+
<li>
418+
<a
419+
href="https://github.com/filamentphp/filament/discussions/new"
420+
target="_blank"
421+
rel="noopener"
422+
aria-label="Get help with Filament"
423+
>
424+
Help
425+
</a>
426+
</li>
427+
<li>
428+
<a
429+
href="{{ route('consulting') }}"
430+
aria-label="Learn about consulting services"
431+
>
432+
Consulting
433+
</a>
434+
</li>
435+
</ul>
353436
</div>
354-
</div>
437+
</nav>
355438
</div>
356439

357440
{{-- Divider --}}

0 commit comments

Comments
 (0)