fix: blog post listing axe

Author: matej-marcisovsky

apps/ui/locales/en.json

@@ -112,6 +112,7 @@
     "title": "Blog",
     "description": "Tutorials, product updates, and engineering insights.",
     "loadMore": "Load More Articles",
+    "postsListAriaLabel": "Blog posts",
     "seeAllRelated": "See all {category} articles",
     "articles": "Articles",
     "relatedPosts": "Related Posts",

apps/ui/src/components/blog/BlogPostRow.tsx

@@ -3,7 +3,11 @@ import {
   AuthorAvatars,
 } from "@/components/elementary/AuthorAvatars"
 import { HeroContainerBorder } from "@/components/elementary/HeroContainer"
-import { type BlogCategory, combineAuthors } from "@/lib/blog-utils"
+import {
+  BLOG_DATE_FORMAT,
+  type BlogCategory,
+  combineAuthors,
+} from "@/lib/blog-utils"
 import { formatDate } from "@/lib/dates"
 import { Link } from "@/lib/navigation"
 import { cn } from "@/lib/styles"
@@ -31,7 +35,7 @@ export function BlogPostRow({
 
   return (
     <HeroContainerBorder asChild>
-      <div
+      <li
         className={cn(
           "group/blog-post-row relative grid items-center gap-x-4 gap-y-3 px-5 py-4 transition-[border-color] duration-300 sm:px-8",
           "grid-cols-[auto_auto_auto_1fr] lg:grid-cols-[1fr_7rem_10rem_9rem]",
@@ -64,10 +68,15 @@ export function BlogPostRow({
           )}
         </div>
 
-        <span className="text-strapi-gray-400 col-span-4 text-left text-sm whitespace-nowrap sm:col-span-1 sm:text-right lg:text-base">
-          {publishedAt ? formatDate(publishedAt, "MMMM D, YYYY") : ""}
-        </span>
-      </div>
+        {publishedAt ? (
+          <time
+            dateTime={formatDate(publishedAt, "YYYY-MM-DD")}
+            className="text-strapi-gray-400 col-span-4 text-left text-sm whitespace-nowrap sm:col-span-1 sm:text-right lg:text-base"
+          >
+            {formatDate(publishedAt, BLOG_DATE_FORMAT)}
+          </time>
+        ) : null}
+      </li>
     </HeroContainerBorder>
   )
 }

apps/ui/src/components/blog/BlogPostsList.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import type { Locale } from "next-intl"
+import { type Locale, useTranslations } from "next-intl"
 import { useState, useTransition } from "react"
 
 import { type BlogPost, getBlogPostPublishDate } from "@/lib/blog-utils"
@@ -40,6 +40,7 @@ export function BlogPostsList({
   excludeCategorySlugs,
   excludeSlugs,
 }: BlogPostsListProps) {
+  const t = useTranslations("blog")
   const [posts, setPosts] = useState<readonly BlogPost[]>(initialPosts)
   const [offset, setOffset] = useState(initialOffset)
   const [hasMore, setHasMore] = useState(initialOffset < total)
@@ -66,19 +67,26 @@ export function BlogPostsList({
 
   return (
     <div className="flex flex-col gap-4">
-      {posts
-        .filter((post) => typeof post.slug === "string" && post.slug.length > 0)
-        .map((post) => (
-          <BlogPostRow
-            key={post.documentId}
-            title={post.title ?? ""}
-            slug={post.slug as string}
-            publishedAt={getBlogPostPublishDate(post)}
-            author={post.author}
-            coauthors={post.coauthors ?? undefined}
-            category={post.category}
-          />
-        ))}
+      <ul
+        aria-label={t("postsListAriaLabel")}
+        className="flex list-none flex-col gap-4 pl-0"
+      >
+        {posts
+          .filter(
+            (post) => typeof post.slug === "string" && post.slug.length > 0
+          )
+          .map((post) => (
+            <BlogPostRow
+              key={post.documentId}
+              title={post.title ?? ""}
+              slug={post.slug as string}
+              publishedAt={getBlogPostPublishDate(post)}
+              author={post.author}
+              coauthors={post.coauthors ?? undefined}
+              category={post.category}
+            />
+          ))}
+      </ul>
 
       {hasMore && (
         <div className="flex justify-center py-10">