Merge pull request #215 from midudev/fix-accessibility-issues

Fix accessibility issues

src/components/cardSpotlight.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  let div: HTMLDivElement;
+  let domElement: HTMLElement;
   let focused = false;
   let position = { x: 0, y: 0 };
   let opacity = 0;
 
   const handleMouseMove = (e: MouseEvent) => {
-    if (!div || focused) return;
+    if (!domElement || focused) return;
 
-    const rect = div.getBoundingClientRect();
+    const rect = domElement.getBoundingClientRect();
 
     position = {
       x: e.clientX - rect.left,
@@ -34,9 +34,8 @@
   };
 </script>
 
-<div
-  aria-hidden="true"
-  bind:this={div}
+<article
+  bind:this={domElement}
   on:mousemove={handleMouseMove}
   on:focus={handleFocus}
   on:blur={handleBlur}
@@ -52,4 +51,4 @@
 		`}
   />
   <slot />
-</div>
+</article>

src/components/navbar.svelte

@@ -27,13 +27,15 @@
       name: 'Extensions',
       url: 'https://github.com/pheralb/svgl?tab=readme-ov-file#-extensions',
       icon: ArrowUpRight,
-      external: true
+      external: true,
+      label: "Go to the SVGL's extensions section"
     },
     {
       name: 'Submit logo',
       url: 'https://github.com/pheralb/svgl#-getting-started',
       icon: ArrowUpRight,
-      external: true
+      external: true,
+      label: "Go to the SVGL's getting started section"
     }
   ];
 </script>
@@ -48,7 +50,7 @@
 >
   <div class="flex items-center justify-between mx-auto">
     <div class="flex items-center space-x-2">
-      <a href="/">
+      <a href="/" aria-label="Back to the SVGL home page">
         <div class="flex items-center space-x-2 hover:opacity-80 transition-opacity">
           <svelte:component this={Logo} />
           <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
@@ -64,6 +66,7 @@
           <a
             href={link.url}
             target={link.external ? '_blank' : ''}
+            aria-label={link.label ?? link.name}
             class={cn(
               'flex items-center hover:opacity-80 transition-opacity text-[15px] pl-2 md:pl-3 group',
               currentPath === link.url &&

src/components/svgCard.svelte

@@ -179,7 +179,7 @@
       </p>
       <a
         href={`/directory/${svgInfo.category.toLowerCase()}`}
-        class="text-sm lowercase text-neutral-500 hover:underline font-mono">{svgInfo.category}</a
+        class="text-sm lowercase text-neutral-400 hover:underline font-mono">{svgInfo.category}</a
       >
     </div>
     <!-- Actions -->