From 113d583524ca6ec345bc57e7130237b7e8c9b0e3 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 18 Oct 2024 22:46:06 +0200
Subject: [PATCH] feat: :wheelchair: add aria labels to post meta data

---
 src/includes/postmeta.macro.njk | 34 +++++++++++++++++----------------
 src/layouts/blogpost.njk        |  6 +++---
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/includes/postmeta.macro.njk b/src/includes/postmeta.macro.njk
index 1badf1f..6886890 100644
--- a/src/includes/postmeta.macro.njk
+++ b/src/includes/postmeta.macro.njk
@@ -1,18 +1,20 @@
 {% macro postmeta(params) %}
-  <ul class="flex flex-wrap items-center gap-4 *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600">
-    <li>
-      {% lucide "calendar", {"size": "20"} %}
-      <time datetime="{{ params.date | isoDate }}" title="{{ params.date | longDate }}">
-        {{ params.date | readableDate }}
-      </time>
-    </li>
-    <li>
-      {% lucide "user", {"size": "20"} %}
-      <a href="{{ params.author.href }}">{{ params.author.name }}</a>
-    </li>
-    <li>
-      {% lucide "glasses", {"size": "20"} %}
-      {{ params.content | readingtime }}
-    </li>
-  </ul>
+<ul
+  class="flex flex-wrap items-center gap-4 text-base *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600"
+  role="group"
+  aria-label="Published on {{ params.date | readableDate }}, written by {{ params.author.name }}, approximate reading time {{ params.content | readingtime }}"
+>
+  <li aria-label="Published on">
+    {% lucide "calendar", {"size": "20"} %}
+    <time datetime="{{ params.date | isoDate }}">{{ params.date | readableDate }}</time>
+  </li>
+  <li aria-label="Written by">
+    {% lucide "user", {"size": "20"} %}
+    <a href="{{ params.author.href }}">{{ params.author.name }}</a>
+  </li>
+  <li aria-label="Approximate reading time">
+    {% lucide "glasses", {"size": "20"} %}
+    {{ params.content | readingtime }}
+  </li>
+</ul>
 {% endmacro %}
diff --git a/src/layouts/blogpost.njk b/src/layouts/blogpost.njk
index eb014fd..439dc7a 100644
--- a/src/layouts/blogpost.njk
+++ b/src/layouts/blogpost.njk
@@ -4,11 +4,11 @@ layout: base.njk
 
 <article class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
   <h1 class="text-4xl">{{ title }}</h1>
-  <aside class="not-prose space-y-4 text-base">
+  <div class="not-prose space-y-4 text-base">
     {%- from 'postmeta.macro.njk' import postmeta %}
     {{ postmeta({ date: page.date, author: author, content: content}) }}
     {% if tags.length > 0 %}
-      <ul class="flex gap-1">
+      <ul class="flex gap-1" aria-label="Tagged in">
         {% for tag in tags %}
           <li class="inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500">
             {% lucide "tag", {"size": "20"} %}
@@ -17,7 +17,7 @@ layout: base.njk
         {%- endfor %}
       </ul>
     {% endif %}
-  </aside>
+  </div>
 
   {% if image and image.src != '' %}
     <img src="{{ image.src }}" alt="{{ image.alt }}">