Commit 71beb64

HPCesia <me@hpcesia.com>
2026-03-11 08:03:08
Improve a11y of post list
1 parent b7863b1
Changed files (2)
src
pages
styles
article
src/pages/posts/index.astro
@@ -1,8 +1,8 @@
 ---
 import { getCollection } from "astro:content";
-import GlobalLayout from "@/layouts/GlobalLayout.astro";
 import { DateTime } from "luxon";
 import { SITE_CONFIG } from "@/config";
+import GlobalLayout from "@/layouts/GlobalLayout.astro";
 
 const posts = await getCollection("posts");
 const sortedPosts = posts.sort(
@@ -30,24 +30,26 @@ const postsByYear = sortedPosts.reduce(
         .map(([year, posts]) => (
           <section>
             <h2>{year}</h2>
-            <ul class="text-lg lg:text-xl">
-              {posts.map((post) => {
-                const dt = DateTime.fromJSDate(post.data.date, {
-                  zone: SITE_CONFIG.timeZone,
-                });
-                return (
-                  <li class="grid grid-rows-1 grid-cols-[1fr_auto] gap-2">
-                    <a href={`/posts/${post.id}`}>{post.data.title}</a>
-                    <time
-                      datetime={dt.toISO()}
-                      class="text-sm lg:text-base text-neutral-600 dark:text-neutral-400"
-                    >
-                      {dt.toISODate()}
-                    </time>
-                  </li>
-                );
-              })}
-            </ul>
+            <nav>
+              <ol class="text-lg lg:text-xl no-counter">
+                {posts.map((post) => {
+                  const dt = DateTime.fromJSDate(post.data.date, {
+                    zone: SITE_CONFIG.timeZone,
+                  });
+                  return (
+                    <li class="grid grid-rows-1 grid-cols-[1fr_auto] gap-2">
+                      <a href={`/posts/${post.id}`}>{post.data.title}</a>
+                      <time
+                        datetime={dt.toISO()}
+                        class="text-sm lg:text-base text-neutral-600 dark:text-neutral-400"
+                      >
+                        {dt.toISODate()}
+                      </time>
+                    </li>
+                  );
+                })}
+              </ol>
+            </nav>
           </section>
         ))
     }
src/styles/article/list.css
@@ -47,7 +47,7 @@ ul {
   }
 }
 
-ol:not([role="doc-toc"] *) > li {
+ol:not([role="doc-toc"] *, .no-counter) > li {
   @apply pl-[2em];
 
   &::before {