From df031449ca4beb5be84ba0352548f4e89da6874f Mon Sep 17 00:00:00 2001
From: eris <femmediscord@gmail.com>
Date: Mon, 1 Aug 2022 17:47:46 +0000
Subject: [PATCH] Update timeline menu content with screenreader accessible
 labels

---
 .../timeline_menu/timeline_menu_content.vue   | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
index 2e7c2bce..2e5d3ce9 100644
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ b/src/components/timeline_menu/timeline_menu_content.vue
@@ -9,7 +9,11 @@
           fixed-width
           class="fa-scale-110 fa-old-padding "
           icon="home"
-        /><span :title="$t('nav.home_timeline_description')">{{ $t("nav.home_timeline") }}</span>
+        />
+        <span
+          :title="$t('nav.home_timeline_description')"
+          :aria-label="$t('nav.home_timeline_description')"
+        >{{ $t("nav.home_timeline") }}</span>
       </router-link>
     </li>
     <li v-if="currentUser">
@@ -21,7 +25,11 @@
           fixed-width
           class="fa-scale-110 fa-old-padding "
           icon="circle"
-        /><span :title="$t('nav.bubble_timeline_description')">{{ $t("nav.bubble_timeline") }}</span>
+        />
+        <span
+          :title="$t('nav.bubble_timeline_description')"
+          :aria-label="$t('nav.bubble_timeline_description')"
+        >{{ $t("nav.bubble_timeline") }}</span>
       </router-link>
     </li>
     <li v-if="currentUser || !privateMode">
@@ -33,7 +41,11 @@
           fixed-width
           class="fa-scale-110 fa-old-padding "
           icon="users"
-        /><span :title="$t('nav.public_timeline_description')">{{ $t("nav.public_tl") }}</span>
+        />
+        <span
+          :title="$t('nav.public_timeline_description')"
+          :aria-label="$t('nav.public_timeline_description')"
+        >{{ $t("nav.public_tl") }}</span>
       </router-link>
     </li>
     <li v-if="federating && (currentUser || !privateMode)">
@@ -45,7 +57,11 @@
           fixed-width
           class="fa-scale-110 fa-old-padding "
           icon="globe"
-        /><span :title="$t('nav.twkn_timeline_description')">{{ $t("nav.twkn") }}</span>
+        />
+        <span
+          :title="$t('nav.twkn_timeline_description')"
+          :aria-label="$t('nav.twkn_timeline_description')"
+        >{{ $t("nav.twkn") }}</span>
       </router-link>
     </li>
     <li v-if="currentUser">
@@ -57,7 +73,11 @@
           fixed-width
           class="fa-scale-110 fa-old-padding "
           icon="bookmark"
-        />{{ $t("nav.bookmarks") }}
+        />
+        <span
+          :title="$t('nav.bookmarks')"
+          :aria-label="$t('nav.bookmarks')"
+        >{{ $t("nav.bookmarks") }}</span>
       </router-link>
     </li>
     <li v-if="currentUser">
@@ -69,7 +89,11 @@
           fixed-width
           class="fa-scale-110 fa-old-padding "
           icon="envelope"
-        />{{ $t("nav.dms") }}
+        />
+        <span
+          :title="$t('nav.dms')"
+          :aria-label="$t('nav.dms')"
+        >{{ $t("nav.dms") }}</span>
       </router-link>
     </li>
   </ul>