💄 Enhance accessibility by adding aria attributes and improving link security with rel attributes across multiple components

Author: HassanZahirnia

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

@@ -4,7 +4,12 @@
 <div
     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"
 >
-    <div class="xs:*:size-5.5 *:size-5">{{ $slot }}</div>
+    <div
+        class="xs:*:size-5.5 *:size-5"
+        aria-hidden="true"
+    >
+        {{ $slot }}
+    </div>
 
     <div>{{ $name }}</div>
 </div>

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

@@ -1,6 +1,7 @@
 <section
     class="mt-5"
-    aria-labelledby="sponsors-title"
+    aria-labelledby="explainer-title"
+    role="region"
 >
     {{-- Part 1 --}}
     <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
                 <div
                     class="2xs:items-start 2xs:text-left flex flex-col items-center gap-1 text-center text-pretty"
                 >
-                    <h3
+                    <p
                         class="text-lg text-gray-600 lg:text-xl dark:text-zinc-400"
                     >
                         Under the hood
-                    </h3>
+                    </p>
                     <h2
+                        id="explainer-title"
                         class="text-2xl font-bold text-gray-800 lg:text-3xl dark:text-white"
                     >
                         How does it work?
@@ -73,6 +75,7 @@ class="text-pretty text-gray-600 sm:max-w-75 dark:text-zinc-400"
                     {{-- Phone wireframe --}}
                     <x-illustrations.phone-wireframe
                         class="w-58 self-center justify-self-center text-[#333333] [grid-area:1/-1] dark:text-gray-500"
+                        aria-hidden="true"
                     />
                     {{-- Schema --}}
                     <div
@@ -133,6 +136,7 @@ class="flex flex-col gap-0.5 text-center font-medium text-gray-700 capitalize da
                                     class="absolute -top-12 right-1/2 w-2.5 translate-x-1/2"
                                     viewBox="0 0 8 60"
                                     fill="none"
+                                    aria-hidden="true"
                                 >
                                     <path
                                         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
                                     class="absolute -top-6 right-1/2 w-2.5 translate-x-1/2"
                                     viewBox="0 0 8 36"
                                     fill="none"
+                                    aria-hidden="true"
                                 >
                                     <path
                                         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"
                                     class="absolute right-1/2 -bottom-6 w-2.5 translate-x-1/2 -scale-y-100"
                                     viewBox="0 0 8 36"
                                     fill="none"
+                                    aria-hidden="true"
                                 >
                                     <path
                                         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"
             <div
                 class="2xs:items-start 2xs:text-left flex flex-col items-center gap-1 text-center text-pretty"
             >
-                <h3 class="text-lg text-gray-600 lg:text-xl dark:text-zinc-400">
+                <p class="text-lg text-gray-600 lg:text-xl dark:text-zinc-400">
                     Step by step
-                </h3>
+                </p>
                 <h2
                     class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
                 >
@@ -352,45 +358,56 @@ class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
             </div>
 
             {{-- Steps --}}
-            <div class="mt-5 flex flex-col gap-3">
-                <div
+            <ol class="mt-5 flex flex-col gap-3">
+                <li
                     class="flex items-center gap-3 rounded-2xl bg-white/50 py-3 pr-5 pl-3 font-medium dark:bg-slate-950/30"
                 >
                     <div
                         class="grid size-10 shrink-0 place-items-center rounded-xl bg-blue-100 dark:bg-blue-500/20"
                     >
-                        <x-icons.home.document class="size-5" />
+                        <x-icons.home.document
+                            class="size-5"
+                            aria-hidden="true"
+                        />
                     </div>
-                    <h6 class="text-gray-400 dark:text-zinc-400">1.</h6>
-                    <h5 class="text-gray-800 dark:text-white">Read the docs</h5>
-                </div>
-                <div
+                    <span class="text-gray-400 dark:text-zinc-400">1.</span>
+                    <span class="text-gray-800 dark:text-white">
+                        Read the docs
+                    </span>
+                </li>
+                <li
                     class="flex items-center gap-3 rounded-2xl bg-white/50 py-3 pr-5 pl-3 font-medium dark:bg-slate-950/30"
                 >
                     <div
                         class="grid size-10 shrink-0 place-items-center rounded-xl bg-violet-100 dark:bg-violet-500/20"
                     >
-                        <x-icons.home.browser class="size-5" />
+                        <x-icons.home.browser
+                            class="size-5"
+                            aria-hidden="true"
+                        />
                     </div>
-                    <h6 class="text-gray-400 dark:text-zinc-400">2.</h6>
-                    <h5 class="text-gray-800 dark:text-white">
+                    <span class="text-gray-400 dark:text-zinc-400">2.</span>
+                    <span class="text-gray-800 dark:text-white">
                         Install the package.
-                    </h5>
-                </div>
-                <div
+                    </span>
+                </li>
+                <li
                     class="flex items-center gap-3 rounded-2xl bg-white/50 py-3 pr-5 pl-3 font-medium dark:bg-slate-950/30"
                 >
                     <div
                         class="grid size-10 shrink-0 place-items-center rounded-xl bg-cyan-100 dark:bg-cyan-500/20"
                     >
-                        <x-icons.home.startup class="size-5" />
+                        <x-icons.home.startup
+                            class="size-5"
+                            aria-hidden="true"
+                        />
                     </div>
-                    <h6 class="text-gray-400 dark:text-zinc-400">3.</h6>
-                    <h5 class="text-gray-800 dark:text-white">
+                    <span class="text-gray-400 dark:text-zinc-400">3.</span>
+                    <span class="text-gray-800 dark:text-white">
                         Build your app.
-                    </h5>
-                </div>
-            </div>
+                    </span>
+                </li>
+            </ol>
         </div>
 
         {{-- Right side --}}
@@ -400,11 +417,9 @@ class="dark:bg-mirage relative z-0 flex flex-col justify-center gap-4 overflow-h
             <div
                 class="2xs:items-start 2xs:text-left flex flex-col items-center gap-1 text-center text-pretty"
             >
-                <h3
-                    class="text-lg text-[#9FA382] lg:text-xl dark:text-zinc-400"
-                >
+                <p class="text-lg text-[#9FA382] lg:text-xl dark:text-zinc-400">
                     Your next app starts here
-                </h3>
+                </p>
                 <h2
                     class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
                 >

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

@@ -15,7 +15,7 @@
     title="{{ $computedTitle }}"
     aria-label="Visit {{ $partnerName }} website"
     target="_blank"
-    rel="sponsored"
+    rel="noopener noreferrer sponsored"
     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"
 >
     <div class="grid h-15 w-35 place-items-center">{{ $logo }}</div>

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

@@ -1,6 +1,7 @@
 <section
     class="mt-2"
     aria-labelledby="hero-title"
+    role="region"
 >
     <div
         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
                 "
                 class="flex flex-wrap justify-center gap-2 lg:flex-col lg:items-end lg:gap-1.5"
             >
-                <h5
+                <p
                     class="w-full text-center font-light lg:w-auto dark:font-extralight"
                 >
                     Try our
                     <span class="font-medium">Demo</span>
                     app:
-                </h5>
+                </p>
                 <div>
                     <a
                         href="https://play.google.com/store/apps/details?id=com.nativephp.kitchensinkapp"
                         target="_blank"
+                        rel="noopener noreferrer"
                         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"
                     >
-                        <x-icons.play-store class="h-4.5 2xl:h-5" />
+                        <x-icons.play-store
+                            class="h-4.5 2xl:h-5"
+                            aria-hidden="true"
+                        />
                         <div>Play Store</div>
                     </a>
                 </div>
                 <div>
                     <a
                         href="https://play.google.com/store/apps/details?id=com.nativephp.kitchensinkapp"
                         target="_blank"
+                        rel="noopener noreferrer"
                         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"
                     >
-                        <x-icons.app-store class="h-4.5 2xl:h-5" />
+                        <x-icons.app-store
+                            class="h-4.5 2xl:h-5"
+                            aria-hidden="true"
+                        />
                         <div>App Store</div>
                     </a>
                 </div>
                 <div>
                     <a
                         href="https://github.com/nativephp"
                         target="_blank"
+                        rel="noopener noreferrer"
                         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"
                     >
-                        <x-icons.github class="h-4.5 2xl:h-5" />
+                        <x-icons.github
+                            class="h-4.5 2xl:h-5"
+                            aria-hidden="true"
+                        />
                         <div>Source code</div>
                     </a>
                 </div>
@@ -77,6 +90,7 @@ class="flex items-center gap-2 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-
                     <img
                         src="{{ Vite::asset('resources/images/home/macbook.webp') }}"
                         alt=""
+                        aria-hidden="true"
                         class="relative z-0 w-full self-center justify-self-center [grid-area:1/-1] dark:brightness-80 dark:contrast-150"
                         width="400"
                         height="250"
@@ -116,11 +130,13 @@ class="grid grow place-items-center bg-[#fdfdfc] dark:bg-[#0a0a0a]"
                             <img
                                 src="{{ Vite::asset('resources/images/home/laravel_welcome_light.webp') }}"
                                 alt=""
+                                aria-hidden="true"
                                 class="w-55 self-center justify-self-center [grid-area:1/-1] dark:opacity-0"
                             />
                             <img
                                 src="{{ Vite::asset('resources/images/home/laravel_welcome_dark.webp') }}"
                                 alt=""
+                                aria-hidden="true"
                                 class="w-55 self-center justify-self-center opacity-0 [grid-area:1/-1] dark:opacity-100"
                             />
                         </div>
@@ -131,6 +147,7 @@ class="w-55 self-center justify-self-center opacity-0 [grid-area:1/-1] dark:opac
                 <img
                     src="{{ Vite::asset('resources/images/home/iphone.webp') }}"
                     alt=""
+                    aria-hidden="true"
                     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"
                     width="92"
                     height="190"
@@ -202,6 +219,7 @@ class="flex items-center gap-2 text-sm 2xl:text-base"
                                 <x-dynamic-component
                                     :component="$feature['icon']"
                                     class="size-5 2xl:size-6"
+                                    aria-hidden="true"
                                 />
                                 <div class="text-gray-700 dark:text-slate-300">
                                     {{ $feature['label'] }}
@@ -222,6 +240,7 @@ class="flex items-center gap-2 text-sm 2xl:text-base"
                                 <x-dynamic-component
                                     :component="$feature['icon']"
                                     class="size-5 2xl:size-6"
+                                    aria-hidden="true"
                                 />
                                 <div class="text-gray-700 dark:text-slate-300">
                                     {{ $feature['label'] }}
@@ -250,6 +269,7 @@ class="flex items-center gap-2 text-sm 2xl:text-base"
                                 <x-dynamic-component
                                     :component="$feature['icon']"
                                     class="size-5 2xl:size-6"
+                                    aria-hidden="true"
                                 />
                                 <div class="text-gray-700 dark:text-slate-300">
                                     {{ $feature['label'] }}
@@ -270,6 +290,7 @@ class="flex items-center gap-2 text-sm 2xl:text-base"
                                 <x-dynamic-component
                                     :component="$feature['icon']"
                                     class="size-5 2xl:size-6"
+                                    aria-hidden="true"
                                 />
                                 <div class="text-gray-700 dark:text-slate-300">
                                     {{ $feature['label'] }}
@@ -341,6 +362,7 @@ class="absolute -top-4 -left-4"
                             }
                         "
                         class="size-4 text-gray-500"
+                        aria-hidden="true"
                     />
                 </div>
 
@@ -416,7 +438,7 @@ class="-mb-1.5 size-1 rounded-full bg-white ring-[3px] ring-black dark:bg-black/
                         <a
                             href="https://www.youtube.com/watch?v=WOTSjPFXQ2k"
                             target="_blank"
-                            rel="noopener"
+                            rel="noopener noreferrer"
                             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]"
                             aria-label="Watch NativePHP introduction video on YouTube"
                         >
@@ -451,7 +473,7 @@ class="text-xs font-normal text-gray-600 2xl:text-sm dark:text-white/50"
                         <a
                             href="https://www.youtube.com/watch?v=WOTSjPFXQ2k"
                             target="_blank"
-                            rel="noopener"
+                            rel="noopener noreferrer"
                             aria-label="Watch Simon Hamp's Laracon EU talk about building mobile apps with PHP"
                         >
                             <img
@@ -490,7 +512,7 @@ class="xs:text-lg xs:mt-5 mx-auto mt-4 max-w-4xl text-center leading-relaxed tex
                 <a
                     href="https://www.php.net"
                     target="_blank"
-                    rel="noopener"
+                    rel="noopener noreferrer"
                     class="inline-block font-medium text-gray-900 transition duration-200 will-change-transform hover:-translate-y-0.5 dark:text-white"
                     aria-label="Learn more about PHP programming language"
                 >
@@ -500,7 +522,7 @@ class="inline-block font-medium text-gray-900 transition duration-200 will-chang
                 <a
                     href="https://laravel.com"
                     target="_blank"
-                    rel="noopener"
+                    rel="noopener noreferrer"
                     class="inline-block font-medium text-gray-900 transition duration-200 will-change-transform hover:-translate-y-0.5 dark:text-white"
                     aria-label="Learn more about Laravel framework"
                 >
@@ -606,7 +628,7 @@ class="absolute -bottom-12 -left-5 -z-20 h-20 w-44 rounded-full bg-transparent b
                 <a
                     href="https://www.youtube.com/watch?v=WOTSjPFXQ2k"
                     target="_blank"
-                    rel="noopener"
+                    rel="noopener noreferrer"
                     class="group relative"
                     aria-label="Watch introduction to NativePHP for Mobile"
                 >