From d40b27982cfff66444d174fd10507185484f2bc2 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 27 Nov 2022 23:29:21 +0000
Subject: [PATCH] fix: use some more semantic elements

---
 components/conversation/ConversationCard.vue | 4 ++--
 components/nav/NavFooter.vue                 | 8 +++++---
 components/notification/NotificationCard.vue | 4 ++--
 components/timeline/TimelinePaginator.vue    | 2 +-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/conversation/ConversationCard.vue b/components/conversation/ConversationCard.vue
index e8bd507d..e79a4f4f 100644
--- a/components/conversation/ConversationCard.vue
+++ b/components/conversation/ConversationCard.vue
@@ -7,11 +7,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div flex flex-col gap-2>
+  <article flex flex-col gap-2>
     <div flex gap-2 flex-wrap text-sm px-2>
       with
       <AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" />
     </div>
     <StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" />
-  </div>
+  </article>
 </template>
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 152f51ab..5ce5f787 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -4,7 +4,7 @@ const buildTimeAgo = useTimeAgo(buildTime)
 </script>
 
 <template>
-  <div p4 text-sm text-secondary-light flex="~ col">
+  <footer p4 text-sm text-secondary-light flex="~ col">
     <div flex="~ gap2">
       <button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
       <button
@@ -13,8 +13,10 @@ const buildTimeAgo = useTimeAgo(buildTime)
         @click="toggleZenMode()"
       />
     </div>
-    <a cursor-pointer hover:underline @click="openPreviewHelp">Show intro</a>
+    <button cursor-pointer hover:underline @click="openPreviewHelp">
+      Show intro
+    </button>
     <div>A Mastodon client made with 🧡</div>
     <div>Built <time :datetime="buildTime" :title="buildTime">{{ buildTimeAgo }}</time> · <a href="https://github.com/elk-zone/elk" target="_blank">GitHub</a></div>
-  </div>
+  </footer>
 </template>
diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
index b2bbfe00..326f102a 100644
--- a/components/notification/NotificationCard.vue
+++ b/components/notification/NotificationCard.vue
@@ -7,7 +7,7 @@ const { notification } = defineProps<{
 </script>
 
 <template>
-  <div flex flex-col>
+  <article flex flex-col>
     <template v-if="notification.type === 'follow'">
       <div flex ml-4 items-center>
         <div i-ri:user-follow-fill mr-3 color-primary />
@@ -57,5 +57,5 @@ const { notification } = defineProps<{
         [DEV] MISSING notification.type: '{{ notification.type }}'
       </div>
     </template>
-  </div>
+  </article>
 </template>
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index 7987ae40..6f56e8d7 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/components/timeline/TimelinePaginator.vue
@@ -11,7 +11,7 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator :paginator="paginator" virtual-scroller>
     <template #default="{ item, active }">
-      <DynamicScrollerItem :item="item" :active="active">
+      <DynamicScrollerItem :item="item" :active="active" tag="article">
         <StatusCard
           :status="item"
           border="b base" py-3