Skip to content

Commit 3167f29

Browse files
HassanZahirniaHassanZahirnia
committed
💄 Enhance accessibility by adding aria attributes and improving link security with rel attributes across multiple components
1 parent 998dbce commit 3167f29

File tree

8 files changed

+97
-47
lines changed

8 files changed

+97
-47
lines changed

‎resources/views/components/home/category-pill.blade.php

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@
44
<div
55
class="dark:bg-cloud/30 xs:text-base xs:pr-5 xs:pl-4 inline-flex items-center gap-2 rounded-xl bg-white/50 py-2.5 pr-4.5 pl-3.5 text-sm text-slate-600 transition duration-200 will-change-transform dark:text-gray-400"
66
>
7-
<div class="xs:*:size-5.5 *:size-5">{{ $slot }}</div>
7+
<div
8+
class="xs:*:size-5.5 *:size-5"
9+
aria-hidden="true"
10+
>
11+
{{ $slot }}
12+
</div>
813

914
<div>{{ $name }}</div>
1015
</div>

‎resources/views/components/home/explainer.blade.php

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<section
22
class="mt-5"
3-
aria-labelledby="sponsors-title"
3+
aria-labelledby="explainer-title"
4+
role="region"
45
>
56
{{-- Part 1 --}}
67
<div class="flex flex-col gap-5 lg:flex-row">
@@ -14,12 +15,13 @@ class="dark:bg-mirage relative flex flex-col items-center gap-5 overflow-hidden
1415
<div
1516
class="2xs:items-start 2xs:text-left flex flex-col items-center gap-1 text-center text-pretty"
1617
>
17-
<h3
18+
<p
1819
class="text-lg text-gray-600 lg:text-xl dark:text-zinc-400"
1920
>
2021
Under the hood
21-
</h3>
22+
</p>
2223
<h2
24+
id="explainer-title"
2325
class="text-2xl font-bold text-gray-800 lg:text-3xl dark:text-white"
2426
>
2527
How does it work?
@@ -73,6 +75,7 @@ class="text-pretty text-gray-600 sm:max-w-75 dark:text-zinc-400"
7375
{{-- Phone wireframe --}}
7476
<x-illustrations.phone-wireframe
7577
class="w-58 self-center justify-self-center text-[#333333] [grid-area:1/-1] dark:text-gray-500"
78+
aria-hidden="true"
7679
/>
7780
{{-- Schema --}}
7881
<div
@@ -133,6 +136,7 @@ class="flex flex-col gap-0.5 text-center font-medium text-gray-700 capitalize da
133136
class="absolute -top-12 right-1/2 w-2.5 translate-x-1/2"
134137
viewBox="0 0 8 60"
135138
fill="none"
139+
aria-hidden="true"
136140
>
137141
<path
138142
d="M4 0.113249L1.11325 3L4 5.88675L6.88675 3L4 0.113249ZM3.64645 53.3536C3.84171 53.5488 4.15829 53.5488 4.35356 53.3536L7.53554 50.1716C7.7308 49.9763 7.7308 49.6597 7.53554 49.4645C7.34027 49.2692 7.02369 49.2692 6.82843 49.4645L4 52.2929L1.17157 49.4645C0.976313 49.2692 0.65973 49.2692 0.464468 49.4645C0.269206 49.6597 0.269206 49.9763 0.464468 50.1716L3.64645 53.3536ZM4 3L3.5 3L3.5 53L4 53L4.5 53L4.5 3L4 3Z"
@@ -157,6 +161,7 @@ class="flex flex-col gap-0.5 text-center font-medium text-gray-700 capitalize da
157161
class="absolute -top-6 right-1/2 w-2.5 translate-x-1/2"
158162
viewBox="0 0 8 36"
159163
fill="none"
164+
aria-hidden="true"
160165
>
161166
<path
162167
d="M3.875 35.8868L6.76175 33L3.875 30.1132L0.988249 33L3.875 35.8868ZM4.22855 0.646446C4.03329 0.451183 3.71671 0.451183 3.52145 0.646446L0.339465 3.82843C0.144203 4.02369 0.144203 4.34027 0.339465 4.53553C0.534727 4.7308 0.851309 4.7308 1.04657 4.53553L3.875 1.70711L6.70343 4.53553C6.89869 4.7308 7.21527 4.7308 7.41053 4.53553C7.60579 4.34027 7.60579 4.02369 7.41053 3.82843L4.22855 0.646446ZM3.875 33L4.375 33L4.375 1L3.875 1L3.375 1L3.375 33L3.875 33Z"
@@ -169,6 +174,7 @@ class="absolute -top-6 right-1/2 w-2.5 translate-x-1/2"
169174
class="absolute right-1/2 -bottom-6 w-2.5 translate-x-1/2 -scale-y-100"
170175
viewBox="0 0 8 36"
171176
fill="none"
177+
aria-hidden="true"
172178
>
173179
<path
174180
d="M3.875 35.8868L6.76175 33L3.875 30.1132L0.988249 33L3.875 35.8868ZM4.22855 0.646446C4.03329 0.451183 3.71671 0.451183 3.52145 0.646446L0.339465 3.82843C0.144203 4.02369 0.144203 4.34027 0.339465 4.53553C0.534727 4.7308 0.851309 4.7308 1.04657 4.53553L3.875 1.70711L6.70343 4.53553C6.89869 4.7308 7.21527 4.7308 7.41053 4.53553C7.60579 4.34027 7.60579 4.02369 7.41053 3.82843L4.22855 0.646446ZM3.875 33L4.375 33L4.375 1L3.875 1L3.375 1L3.375 33L3.875 33Z"
@@ -341,9 +347,9 @@ class="dark:bg-mirage w-full rounded-2xl bg-gray-200/60 p-8 md:p-10 lg:max-w-md"
341347
<div
342348
class="2xs:items-start 2xs:text-left flex flex-col items-center gap-1 text-center text-pretty"
343349
>
344-
<h3 class="text-lg text-gray-600 lg:text-xl dark:text-zinc-400">
350+
<p class="text-lg text-gray-600 lg:text-xl dark:text-zinc-400">
345351
Step by step
346-
</h3>
352+
</p>
347353
<h2
348354
class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
349355
>
@@ -352,45 +358,56 @@ class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
352358
</div>
353359

354360
{{-- Steps --}}
355-
<div class="mt-5 flex flex-col gap-3">
356-
<div
361+
<ol class="mt-5 flex flex-col gap-3">
362+
<li
357363
class="flex items-center gap-3 rounded-2xl bg-white/50 py-3 pr-5 pl-3 font-medium dark:bg-slate-950/30"
358364
>
359365
<div
360366
class="grid size-10 shrink-0 place-items-center rounded-xl bg-blue-100 dark:bg-blue-500/20"
361367
>
362-
<x-icons.home.document class="size-5" />
368+
<x-icons.home.document
369+
class="size-5"
370+
aria-hidden="true"
371+
/>
363372
</div>
364-
<h6 class="text-gray-400 dark:text-zinc-400">1.</h6>
365-
<h5 class="text-gray-800 dark:text-white">Read the docs</h5>
366-
</div>
367-
<div
373+
<span class="text-gray-400 dark:text-zinc-400">1.</span>
374+
<span class="text-gray-800 dark:text-white">
375+
Read the docs
376+
</span>
377+
</li>
378+
<li
368379
class="flex items-center gap-3 rounded-2xl bg-white/50 py-3 pr-5 pl-3 font-medium dark:bg-slate-950/30"
369380
>
370381
<div
371382
class="grid size-10 shrink-0 place-items-center rounded-xl bg-violet-100 dark:bg-violet-500/20"
372383
>
373-
<x-icons.home.browser class="size-5" />
384+
<x-icons.home.browser
385+
class="size-5"
386+
aria-hidden="true"
387+
/>
374388
</div>
375-
<h6 class="text-gray-400 dark:text-zinc-400">2.</h6>
376-
<h5 class="text-gray-800 dark:text-white">
389+
<span class="text-gray-400 dark:text-zinc-400">2.</span>
390+
<span class="text-gray-800 dark:text-white">
377391
Install the package.
378-
</h5>
379-
</div>
380-
<div
392+
</span>
393+
</li>
394+
<li
381395
class="flex items-center gap-3 rounded-2xl bg-white/50 py-3 pr-5 pl-3 font-medium dark:bg-slate-950/30"
382396
>
383397
<div
384398
class="grid size-10 shrink-0 place-items-center rounded-xl bg-cyan-100 dark:bg-cyan-500/20"
385399
>
386-
<x-icons.home.startup class="size-5" />
400+
<x-icons.home.startup
401+
class="size-5"
402+
aria-hidden="true"
403+
/>
387404
</div>
388-
<h6 class="text-gray-400 dark:text-zinc-400">3.</h6>
389-
<h5 class="text-gray-800 dark:text-white">
405+
<span class="text-gray-400 dark:text-zinc-400">3.</span>
406+
<span class="text-gray-800 dark:text-white">
390407
Build your app.
391-
</h5>
392-
</div>
393-
</div>
408+
</span>
409+
</li>
410+
</ol>
394411
</div>
395412

396413
{{-- Right side --}}
@@ -400,11 +417,9 @@ class="dark:bg-mirage relative z-0 flex flex-col justify-center gap-4 overflow-h
400417
<div
401418
class="2xs:items-start 2xs:text-left flex flex-col items-center gap-1 text-center text-pretty"
402419
>
403-
<h3
404-
class="text-lg text-[#9FA382] lg:text-xl dark:text-zinc-400"
405-
>
420+
<p class="text-lg text-[#9FA382] lg:text-xl dark:text-zinc-400">
406421
Your next app starts here
407-
</h3>
422+
</p>
408423
<h2
409424
class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
410425
>

‎resources/views/components/home/featured-partner-card.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
title="{{ $computedTitle }}"
1616
aria-label="Visit {{ $partnerName }} website"
1717
target="_blank"
18-
rel="sponsored"
18+
rel="noopener noreferrer sponsored"
1919
class="dark:hover:ring-cloud/70 flex flex-col gap-x-6 gap-y-2 rounded-2xl bg-white/50 p-7 text-pretty transition duration-200 will-change-transform hover:-translate-y-0.5 hover:bg-white/70 hover:shadow-lg hover:ring-1 hover:shadow-gray-200/70 hover:ring-black/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 lg:flex-row lg:items-center lg:py-5 dark:bg-slate-950/30 dark:hover:bg-slate-950/80 dark:hover:shadow-transparent"
2020
>
2121
<div class="grid h-15 w-35 place-items-center">{{ $logo }}</div>

‎resources/views/components/home/hero.blade.php

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<section
22
class="mt-2"
33
aria-labelledby="hero-title"
4+
role="region"
45
>
56
<div
67
class="relative z-0 flex flex-col overflow-hidden rounded-2xl bg-gradient-to-t from-[#E0E5EB] to-[#F9F9F9] px-5 pt-8 pb-10 ring-1 ring-zinc-200/50 lg:px-10 lg:pt-8 lg:pb-17 xl:pt-10 dark:from-slate-950 dark:to-slate-900 dark:ring-slate-800"
@@ -29,40 +30,52 @@ class="order-last mt-7 flex justify-center text-xs lg:order-first lg:mt-0 lg:-mb
2930
"
3031
class="flex flex-wrap justify-center gap-2 lg:flex-col lg:items-end lg:gap-1.5"
3132
>
32-
<h5
33+
<p
3334
class="w-full text-center font-light lg:w-auto dark:font-extralight"
3435
>
3536
Try our
3637
<span class="font-medium">Demo</span>
3738
app:
38-
</h5>
39+
</p>
3940
<div>
4041
<a
4142
href="https://play.google.com/store/apps/details?id=com.nativephp.kitchensinkapp"
4243
target="_blank"
44+
rel="noopener noreferrer"
4345
class="flex items-center gap-2 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-md transition duration-200 will-change-transform hover:scale-98 hover:bg-white dark:bg-slate-500/25 dark:hover:bg-slate-500/40"
4446
>
45-
<x-icons.play-store class="h-4.5 2xl:h-5" />
47+
<x-icons.play-store
48+
class="h-4.5 2xl:h-5"
49+
aria-hidden="true"
50+
/>
4651
<div>Play Store</div>
4752
</a>
4853
</div>
4954
<div>
5055
<a
5156
href="https://play.google.com/store/apps/details?id=com.nativephp.kitchensinkapp"
5257
target="_blank"
58+
rel="noopener noreferrer"
5359
class="flex items-center gap-2 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-md transition duration-200 will-change-transform hover:scale-98 hover:bg-white dark:bg-slate-500/25 dark:hover:bg-slate-500/40"
5460
>
55-
<x-icons.app-store class="h-4.5 2xl:h-5" />
61+
<x-icons.app-store
62+
class="h-4.5 2xl:h-5"
63+
aria-hidden="true"
64+
/>
5665
<div>App Store</div>
5766
</a>
5867
</div>
5968
<div>
6069
<a
6170
href="https://github.com/nativephp"
6271
target="_blank"
72+
rel="noopener noreferrer"
6373
class="flex items-center gap-2 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-md transition duration-200 will-change-transform hover:scale-98 hover:bg-white dark:bg-slate-500/25 dark:hover:bg-slate-500/40"
6474
>
65-
<x-icons.github class="h-4.5 2xl:h-5" />
75+
<x-icons.github
76+
class="h-4.5 2xl:h-5"
77+
aria-hidden="true"
78+
/>
6679
<div>Source code</div>
6780
</a>
6881
</div>
@@ -77,6 +90,7 @@ class="flex items-center gap-2 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-
7790
<img
7891
src="{{ Vite::asset('resources/images/home/macbook.webp') }}"
7992
alt=""
93+
aria-hidden="true"
8094
class="relative z-0 w-full self-center justify-self-center [grid-area:1/-1] dark:brightness-80 dark:contrast-150"
8195
width="400"
8296
height="250"
@@ -116,11 +130,13 @@ class="grid grow place-items-center bg-[#fdfdfc] dark:bg-[#0a0a0a]"
116130
<img
117131
src="{{ Vite::asset('resources/images/home/laravel_welcome_light.webp') }}"
118132
alt=""
133+
aria-hidden="true"
119134
class="w-55 self-center justify-self-center [grid-area:1/-1] dark:opacity-0"
120135
/>
121136
<img
122137
src="{{ Vite::asset('resources/images/home/laravel_welcome_dark.webp') }}"
123138
alt=""
139+
aria-hidden="true"
124140
class="w-55 self-center justify-self-center opacity-0 [grid-area:1/-1] dark:opacity-100"
125141
/>
126142
</div>
@@ -131,6 +147,7 @@ class="w-55 self-center justify-self-center opacity-0 [grid-area:1/-1] dark:opac
131147
<img
132148
src="{{ Vite::asset('resources/images/home/iphone.webp') }}"
133149
alt=""
150+
aria-hidden="true"
134151
class="relative z-2 -ml-15 w-18 sm:-ml-18 sm:w-23 2xl:-ml-25 2xl:w-30 dark:brightness-80 dark:contrast-150"
135152
width="92"
136153
height="190"
@@ -202,6 +219,7 @@ class="flex items-center gap-2 text-sm 2xl:text-base"
202219
<x-dynamic-component
203220
:component="$feature['icon']"
204221
class="size-5 2xl:size-6"
222+
aria-hidden="true"
205223
/>
206224
<div class="text-gray-700 dark:text-slate-300">
207225
{{ $feature['label'] }}
@@ -222,6 +240,7 @@ class="flex items-center gap-2 text-sm 2xl:text-base"
222240
<x-dynamic-component
223241
:component="$feature['icon']"
224242
class="size-5 2xl:size-6"
243+
aria-hidden="true"
225244
/>
226245
<div class="text-gray-700 dark:text-slate-300">
227246
{{ $feature['label'] }}
@@ -250,6 +269,7 @@ class="flex items-center gap-2 text-sm 2xl:text-base"
250269
<x-dynamic-component
251270
:component="$feature['icon']"
252271
class="size-5 2xl:size-6"
272+
aria-hidden="true"
253273
/>
254274
<div class="text-gray-700 dark:text-slate-300">
255275
{{ $feature['label'] }}
@@ -270,6 +290,7 @@ class="flex items-center gap-2 text-sm 2xl:text-base"
270290
<x-dynamic-component
271291
:component="$feature['icon']"
272292
class="size-5 2xl:size-6"
293+
aria-hidden="true"
273294
/>
274295
<div class="text-gray-700 dark:text-slate-300">
275296
{{ $feature['label'] }}
@@ -341,6 +362,7 @@ class="absolute -top-4 -left-4"
341362
}
342363
"
343364
class="size-4 text-gray-500"
365+
aria-hidden="true"
344366
/>
345367
</div>
346368

@@ -416,7 +438,7 @@ class="-mb-1.5 size-1 rounded-full bg-white ring-[3px] ring-black dark:bg-black/
416438
<a
417439
href="https://www.youtube.com/watch?v=WOTSjPFXQ2k"
418440
target="_blank"
419-
rel="noopener"
441+
rel="noopener noreferrer"
420442
class="relative -top-5 grid size-10 place-items-center rounded-full bg-black/20 text-white ring-1 ring-white/10 backdrop-blur-sm transition duration-300 ease-in-out will-change-transform group-hover:scale-110 group-hover:text-[#d4fd7d] dark:bg-slate-500/20 dark:group-hover:text-[#9c90f0]"
421443
aria-label="Watch NativePHP introduction video on YouTube"
422444
>
@@ -451,7 +473,7 @@ class="text-xs font-normal text-gray-600 2xl:text-sm dark:text-white/50"
451473
<a
452474
href="https://www.youtube.com/watch?v=WOTSjPFXQ2k"
453475
target="_blank"
454-
rel="noopener"
476+
rel="noopener noreferrer"
455477
aria-label="Watch Simon Hamp's Laracon EU talk about building mobile apps with PHP"
456478
>
457479
<img
@@ -490,7 +512,7 @@ class="xs:text-lg xs:mt-5 mx-auto mt-4 max-w-4xl text-center leading-relaxed tex
490512
<a
491513
href="https://www.php.net"
492514
target="_blank"
493-
rel="noopener"
515+
rel="noopener noreferrer"
494516
class="inline-block font-medium text-gray-900 transition duration-200 will-change-transform hover:-translate-y-0.5 dark:text-white"
495517
aria-label="Learn more about PHP programming language"
496518
>
@@ -500,7 +522,7 @@ class="inline-block font-medium text-gray-900 transition duration-200 will-chang
500522
<a
501523
href="https://laravel.com"
502524
target="_blank"
503-
rel="noopener"
525+
rel="noopener noreferrer"
504526
class="inline-block font-medium text-gray-900 transition duration-200 will-change-transform hover:-translate-y-0.5 dark:text-white"
505527
aria-label="Learn more about Laravel framework"
506528
>
@@ -606,7 +628,7 @@ class="absolute -bottom-12 -left-5 -z-20 h-20 w-44 rounded-full bg-transparent b
606628
<a
607629
href="https://www.youtube.com/watch?v=WOTSjPFXQ2k"
608630
target="_blank"
609-
rel="noopener"
631+
rel="noopener noreferrer"
610632
class="group relative"
611633
aria-label="Watch introduction to NativePHP for Mobile"
612634
>

0 commit comments

Comments
 (0)