From 8d9a95060b2f2ea2b23f66606248ea44bea79f0a Mon Sep 17 00:00:00 2001
From: Tempe Techie <95053628+tempe-techie@users.noreply.github.com>
Date: Sun, 6 Oct 2024 09:25:05 +0200
Subject: [PATCH] title attributes added to various HTML elements

---
 components/EmojiPicker.vue                 |  2 +-
 components/chat/ChatFeed.vue               |  1 +
 components/chat/ChatMessage.vue            | 21 +++++++++++++++------
 components/navbars/NavbarDesktop.vue       |  2 +-
 components/referrals/ShareReferralLink.vue |  2 +-
 components/tenor/TenorGifSearch.vue        |  2 +-
 6 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/components/EmojiPicker.vue b/components/EmojiPicker.vue
index 9f9b274b..5f165f74 100644
--- a/components/EmojiPicker.vue
+++ b/components/EmojiPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <button data-bs-toggle="modal" data-bs-target="#emojiModal" class="btn btn-outline-primary me-2 mt-2 btn-sm">
+  <button title="Add emoji to your post" data-bs-toggle="modal" data-bs-target="#emojiModal" class="btn btn-outline-primary me-2 mt-2 btn-sm">
     <i class="bi bi-emoji-smile-fill"></i>
   </button>
 
diff --git a/components/chat/ChatFeed.vue b/components/chat/ChatFeed.vue
index 34f39975..34f84726 100644
--- a/components/chat/ChatFeed.vue
+++ b/components/chat/ChatFeed.vue
@@ -46,6 +46,7 @@
               class="btn btn-outline-primary me-2 mt-2 btn-sm"
               data-bs-toggle="modal"
               :data-bs-target="'#fileUploadModal' + $.uid"
+              title="Upload image to your post"
             >
               <i class="bi bi-file-earmark-image-fill"></i>
               IMG
diff --git a/components/chat/ChatMessage.vue b/components/chat/ChatMessage.vue
index 1a83a9b4..ed2a17a4 100644
--- a/components/chat/ChatMessage.vue
+++ b/components/chat/ChatMessage.vue
@@ -3,7 +3,7 @@
     <div class="card-body row">
 
       <!-- Author profile image -->
-      <div class="col-2 col-md-1 pfp-sizing">
+      <div class="col-2 col-md-1 pfp-sizing" title="Profile image and link to the profile">
         <NuxtLink :to="'/profile/?id=' + String(showDomainOrFullAddress)">
           <ProfileImage
             class="img-fluid rounded-circle pfp-img force-circle"
@@ -16,22 +16,30 @@
 
         <!-- post author and timestamp -->
         <p class="card-subtitle mb-2 text-muted">
-          <NuxtLink class="link-without-color hover-color" :to="'/profile/?id=' + String(showDomainOrFullAddress)">
+          <NuxtLink 
+            class="link-without-color hover-color" 
+            :to="'/profile/?id=' + String(showDomainOrFullAddress)"
+            title="Go to profile page"
+          >
             {{ showDomainOrAddress }}
           </NuxtLink>
           <span v-if="message?.createdAt && !isComment">
             ·
-            <NuxtLink class="link-without-color hover-color" :to="postUrl">
+            <NuxtLink 
+              class="link-without-color hover-color" 
+              :to="postUrl"
+              title="Time since post was created and link to the post page"
+            >
               {{ timeSince }}
             </NuxtLink>
           </span>
-          <span v-if="message?.createdAt && isComment">
+          <span v-if="message?.createdAt && isComment" title="Time since post was created">
             ·
             {{ timeSince }}
           </span>
           <span v-if="message?.url">
             ·
-            <a class="link-without-color hover-color" :href="getArweaveUrl" target="_blank">
+            <a class="link-without-color hover-color" :href="getArweaveUrl" target="_blank" title="Link to post stored on Arweave">
               <span style="font-size: 0.9em;">ⓐ</span>
             </a>
           </span>
@@ -70,7 +78,7 @@
         <p class="card-subtitle mt-3 text-muted">
 
           <!-- Replies count -->
-          <NuxtLink v-if="isMainChatMessage" class="link-without-color hover-color" :to="postUrl">
+          <NuxtLink v-if="isMainChatMessage" class="link-without-color hover-color" :to="postUrl" title="See replies to this post">
             <i class="bi bi-chat"></i>
             {{ message.repliesCount }} replies
           </NuxtLink>
@@ -82,6 +90,7 @@
             :class="{ 'ms-3': isMainChatMessage }"
             data-bs-toggle="modal"
             :data-bs-target="'#deleteModal' + storageId"
+            title="Delete the post"
           >
             <i class="bi bi-trash" /> Delete
           </span>
diff --git a/components/navbars/NavbarDesktop.vue b/components/navbars/NavbarDesktop.vue
index 1900edfd..67117f87 100644
--- a/components/navbars/NavbarDesktop.vue
+++ b/components/navbars/NavbarDesktop.vue
@@ -75,7 +75,7 @@
           </div>
         </li>
 
-        <li class="nav-item cursor-pointer">
+        <li class="nav-item cursor-pointer" title="Toggle between light and dark mode">
           <span class="nav-link" v-if="siteStore.getColorMode === 'dark'" @click="changeColorMode('light')">
             <i class="bi bi-brightness-high"></i>
           </span>
diff --git a/components/referrals/ShareReferralLink.vue b/components/referrals/ShareReferralLink.vue
index cbd8f797..152622e6 100644
--- a/components/referrals/ShareReferralLink.vue
+++ b/components/referrals/ShareReferralLink.vue
@@ -9,7 +9,7 @@
       readonly
     />
 
-    <button class="btn btn-outline-secondary" type="button" id="button-addon2">
+    <button class="btn btn-outline-secondary" type="button" id="button-addon2" title="Copy to clipboard">
       <i v-if="!copied" class="bi bi-clipboard"></i>
       <i v-if="copied" class="bi bi-clipboard-check"></i>
     </button>
diff --git a/components/tenor/TenorGifSearch.vue b/components/tenor/TenorGifSearch.vue
index e15da8f4..c35b2e6e 100644
--- a/components/tenor/TenorGifSearch.vue
+++ b/components/tenor/TenorGifSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <button data-bs-toggle="modal" data-bs-target="#gifModal" class="btn btn-outline-primary me-2 mt-2 btn-sm">
+  <button data-bs-toggle="modal" data-bs-target="#gifModal" class="btn btn-outline-primary me-2 mt-2 btn-sm" title="Add GIF to your post">
     <i class="bi bi-file-earmark-image-fill"></i>
     GIF
   </button>