feat: ♿ add aria labels to post meta data

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">
+<ul
-    <li>
+  class="flex flex-wrap items-center gap-4 text-base *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600"
-      {% lucide "calendar", {"size": "20"} %}
+  role="group"
-      <time datetime="{{ params.date | isoDate }}" title="{{ params.date | longDate }}">
+  aria-label="Published on {{ params.date | readableDate }}, written by {{ params.author.name }}, approximate reading time {{ params.content | readingtime }}"
-        {{ params.date | readableDate }}
+>
-      </time>
+  <li aria-label="Published on">
-    </li>
+    {% lucide "calendar", {"size": "20"} %}
-    <li>
+    <time datetime="{{ params.date | isoDate }}">{{ params.date | readableDate }}</time>
-      {% lucide "user", {"size": "20"} %}
+  </li>
-      <a href="{{ params.author.href }}">{{ params.author.name }}</a>
+  <li aria-label="Written by">
-    </li>
+    {% lucide "user", {"size": "20"} %}
-    <li>
+    <a href="{{ params.author.href }}">{{ params.author.name }}</a>
-      {% lucide "glasses", {"size": "20"} %}
+  </li>
-      {{ params.content | readingtime }}
+  <li aria-label="Approximate reading time">
-    </li>
+    {% lucide "glasses", {"size": "20"} %}
-  </ul>
+    {{ params.content | readingtime }}
+  </li>
+</ul>
 {% endmacro %}

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 }}">