aria-label i18n

Author: gotson

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>
 

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>

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