update accessibility

src/lib/components/appwrite-network/map.svelte

@@ -114,6 +114,7 @@
                         <g
                             role="tooltip"
                             class="animate-fade-in outline-none"
+                            aria-label={`${marker.city} (${marker.code})`}
                             onmouseover={() =>
                                 handleSetActiveTooltip(
                                     marker.city,

src/lib/components/marketing/platforms.svelte

@@ -116,12 +116,12 @@
                                                 'lg:border-l': i === 0
                                             }
                                         )}
-                                        aria-hidden={i < platforms.length - 1}
                                     >
                                         <img
                                             src={platform.icon}
                                             alt={platform.name}
                                             class="h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
+                                            aria-hidden={i < platforms.length - 1}
                                         />
 
                                         <div
@@ -130,6 +130,7 @@
                                                 'bg-gradient-to-tl from-transparent to-transparent',
                                                 'hover:from-(--primary-color,_#fff)/4 hover:to-(--secondary-color,_transparent)/10'
                                             )}
+                                            aria-hidden={i < platforms.length - 1}
                                         >
                                             <Noise opacity={0.1} />
                                         </div>

src/routes/(marketing)/(components)/bento/(animations)/auth.svelte

@@ -49,7 +49,7 @@
 >
     <div class="space-y-3 px-3 pt-2 pb-4">
         <div class="flex items-center gap-2">
-            <img src="/images/icons/illustrated/dark/auth.png" alt="Auth" class="size-7" />
+            <img src="/images/icons/illustrated/dark/auth.png" alt="Auth icon" class="size-7" />
             <h3 class="font-aeonik-pro text-label text-primary">Auth</h3>
         </div>
         <p class="text-sub-body text-primary max-w-lg font-medium">

src/routes/(marketing)/(components)/bento/(animations)/functions.svelte

@@ -94,7 +94,7 @@
         <div class="flex items-center gap-2">
             <img
                 src="/images/icons/illustrated/dark/functions.png"
-                alt="Functions"
+                alt="Functions icon"
                 class="size-7"
             />
             <h3 class="font-aeonik-pro text-label text-primary">Functions</h3>

src/routes/(marketing)/(components)/bento/(animations)/messaging.svelte

@@ -58,7 +58,7 @@
         <div class="flex items-center gap-2">
             <img
                 src="/images/icons/illustrated/dark/messaging.png"
-                alt="Messaging"
+                alt="Messaging icon"
                 class="size-7"
             />
             <h3 class="font-aeonik-pro text-label text-primary">Messaging</h3>

src/routes/(marketing)/(components)/bento/(animations)/realtime.svelte

@@ -64,7 +64,11 @@
 >
     <div class="space-y-3 px-3 pt-2 pb-4">
         <div class="flex items-center gap-2">
-            <img src="/images/icons/illustrated/dark/realtime.png" alt="Realtime" class="size-7" />
+            <img
+                src="/images/icons/illustrated/dark/realtime.png"
+                alt="Realtime icon"
+                class="size-7"
+            />
             <h3 class="font-aeonik-pro text-label text-primary">Realtime</h3>
         </div>
         <p class="text-sub-body text-primary max-w-lg font-medium">

src/routes/(marketing)/(components)/bento/(animations)/sites.svelte

@@ -104,7 +104,7 @@
 >
     <div class="space-y-3 px-3 pt-2 pb-4">
         <div class="flex items-center gap-2">
-            <img src="/images/icons/illustrated/dark/sites.png" alt="Sites" class="size-7" />
+            <img src="/images/icons/illustrated/dark/sites.png" alt="Sites icon" class="size-7" />
             <h3 class="font-aeonik-pro text-label text-primary">Sites</h3>
         </div>
         <p class="text-sub-body text-primary max-w-lg font-medium">

src/routes/(marketing)/(components)/bento/(animations)/storage.svelte

@@ -62,7 +62,11 @@
 >
     <div class="space-y-3 px-3 pt-2 pb-4">
         <div class="flex items-center gap-2">
-            <img src="/images/icons/illustrated/dark/storage.png" alt="Storage" class="size-7" />
+            <img
+                src="/images/icons/illustrated/dark/storage.png"
+                alt="Storage icon"
+                class="size-7"
+            />
             <h3 class="font-aeonik-pro text-label text-primary">Storage</h3>
         </div>
         <p class="text-sub-body text-primary max-w-lg font-medium">