fix: ♿ Improved accessability for blog page

src/lib/components/molecules/BlogPost.svelte

@@ -12,10 +12,13 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
   class="mb-4 flex h-min w-full cursor-pointer items-center justify-between rounded-md border border-secondary/20 bg-secondary/5 py-8 shadow-md ring-neutral backdrop-blur-sm transition first:mt-0 last:mb-0 focus-visible:outline-none focus-visible:ring-2 dark:bg-secondary/10 lg:py-0 lg:hover:-translate-y-0.5 lg:focus-visible:-translate-y-0.5"
+  tabindex="0"
   in:fade={{ delay: 150 * i, duration: 500, easing: quintOut }}
   on:click
+  on:keydown
 >
   <div>
     <p class="text-1xl m-0 p-2 font-bold text-secondary sm:text-3xl">

src/routes/blog/+page.svelte

@@ -30,6 +30,17 @@
     }
   };
 
+  const handleKeyDown = async (post: Post, event: KeyboardEvent) => {
+    if (event.key != "Enter") {
+      return;
+    }
+
+    const target = event.target as Element;
+    if (!target.classList.contains("tag")) {
+      await goto(`blog/posts/${post.slug}`);
+    }
+  };
+
   $: filteredPosts = posts.filter((post: Post) => {
     return (
       post?.hidden === false &&
@@ -75,6 +86,7 @@
             tags={post?.tags}
             published={post.published}
             on:click={(event) => handleClick(post, event)}
+            on:keydown={(event) => handleKeyDown(post, event)}
           />
         {/each}
         <Paginator