feat(i18n,a11y): change last update logic

src/client/theme-default/components/VPDocFooterLastUpdated.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, onMounted } from 'vue'
+import { ref, computed, watchEffect, onMounted, useTemplateRef } from 'vue'
 import { useData } from '../composables/data'
+import { useNavigatorLanguage } from '@vueuse/core'
 
 const { theme, page, lang } = useData()
+const { language } = useNavigatorLanguage()
+
+const timeRef = useTemplateRef('timeRef')
 
 const date = computed(
   () => new Date(page.value.lastUpdated!)
@@ -14,13 +18,20 @@ const datetime = ref('')
 // potential differences in timezones of the server and clients
 onMounted(() => {
   watchEffect(() => {
+    const browserLang = theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : language.value
     datetime.value = new Intl.DateTimeFormat(
-      theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
+      browserLang,
       theme.value.lastUpdated?.formatOptions ?? {
-        dateStyle: 'short',
+        dateStyle: 'medium',
-        timeStyle: 'short'
+        timeStyle: 'medium'
       }
     ).format(date.value)
+    if (browserLang && lang.value !== browserLang) {
+      timeRef.value?.setAttribute('lang', browserLang)
+    }
+    else {
+      timeRef.value?.removeAttribute('lang')
+    }
   })
 })
 </script>
@@ -28,7 +39,7 @@ onMounted(() => {
 <template>
   <p class="VPLastUpdated">
     {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
-    <time :datetime="isoDatetime">{{ datetime }}</time>
+    <time ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>