From e3e42dbf2c3b50e040d228830f116f6ed2ee8df4 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Tue, 29 Jul 2025 12:32:28 +0800
Subject: [PATCH] aria-label i18n

---
 .../src/fragments/fragment/LocaleSelector.vue   |  7 +++++++
 .../src/fragments/fragment/ThemeSelector.vue    |  8 +++++++-
 next-ui/src/pages/server/announcements.vue      | 17 +++++++++--------
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/next-ui/src/fragments/fragment/LocaleSelector.vue b/next-ui/src/fragments/fragment/LocaleSelector.vue
index ff28be0a..e3c0b0fc 100644
--- a/next-ui/src/fragments/fragment/LocaleSelector.vue
+++ b/next-ui/src/fragments/fragment/LocaleSelector.vue
@@ -4,6 +4,13 @@
       <v-btn
         v-bind="props"
         icon="i-mdi:translate"
+        :aria-label="
+          $formatMessage({
+            description: 'Locale selector button: aria-label',
+            defaultMessage: 'language selector',
+            id: 'dQ9kx9',
+          })
+        "
       />
     </template>
 
diff --git a/next-ui/src/fragments/fragment/ThemeSelector.vue b/next-ui/src/fragments/fragment/ThemeSelector.vue
index e8a18871..14a02616 100644
--- a/next-ui/src/fragments/fragment/ThemeSelector.vue
+++ b/next-ui/src/fragments/fragment/ThemeSelector.vue
@@ -1,7 +1,13 @@
 <template>
   <v-btn
     :icon="themeIcon"
-    aria-label="theme selector"
+    :aria-label="
+      $formatMessage({
+        description: 'Theme selector button: aria-label',
+        defaultMessage: 'theme selector',
+        id: '0XDhyR',
+      })
+    "
     @click="cycleTheme()"
   />
 </template>
diff --git a/next-ui/src/pages/server/announcements.vue b/next-ui/src/pages/server/announcements.vue
index ea79fb58..2bf9f5fe 100644
--- a/next-ui/src/pages/server/announcements.vue
+++ b/next-ui/src/pages/server/announcements.vue
@@ -36,17 +36,11 @@
       >
         <!--  Workaround for https://github.com/vuetifyjs/vuetify/issues/21439  -->
         <v-btn
-          v-tooltip:start="
-            $formatMessage({
-              description: 'Announcements view: mark all as read button tooltip',
-              defaultMessage: 'Mark all as read',
-              id: 'da/wb0',
-            })
-          "
+          v-tooltip:start="$formatMessage(markAllReadMessage)"
           color="success"
           size="x-large"
           icon="i-mdi:check-all"
-          aria-label="mark all read"
+          :aria-label="$formatMessage(markAllReadMessage)"
         />
       </v-fab>
     </template>
@@ -56,6 +50,7 @@
 <script lang="ts" setup>
 import { useAnnouncements, useMarkAnnouncementsRead } from '@/colada/announcements'
 import EmptyStateNetworkError from '@/components/EmptyStateNetworkError.vue'
+import { defineMessage } from 'vue-intl'
 
 const { data: announcements, error, unreadCount, isPending } = useAnnouncements()
 
@@ -69,6 +64,12 @@ function markAllRead() {
 function markRead(id: string) {
   markAnnouncementsRead([id])
 }
+
+const markAllReadMessage = defineMessage({
+  description: 'Announcements view: mark all as read button tooltip',
+  defaultMessage: 'Mark all as read',
+  id: 'da/wb0',
+})
 </script>
 
 <route lang="yaml">