From 187bf250e6496554fca0b070a5aba55484f7fc0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 7 Sep 2025 13:41:34 +0200
Subject: [PATCH] feat(i18n,a11y): change last update logic (#4935)

---------

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 .../components/VPDocFooterLastUpdated.vue     | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index 5ec3cfeb..576a87d4 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -1,26 +1,38 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, onMounted } from 'vue'
+import { useNavigatorLanguage } from '@vueuse/core'
+import { computed, onMounted, shallowRef, useTemplateRef, watchEffect } from 'vue'
 import { useData } from '../composables/data'
 
-const { theme, page, lang } = useData()
+const { theme, page, lang: pageLang } = useData()
+const { language: browserLang } = useNavigatorLanguage()
 
-const date = computed(
-  () => new Date(page.value.lastUpdated!)
-)
+const timeRef = useTemplateRef('timeRef')
+
+const date = computed(() => new Date(page.value.lastUpdated!))
 const isoDatetime = computed(() => date.value.toISOString())
-const datetime = ref('')
+const datetime = shallowRef('')
 
 // set time on mounted hook to avoid hydration mismatch due to
 // potential differences in timezones of the server and clients
 onMounted(() => {
   watchEffect(() => {
+    const lang = theme.value.lastUpdated?.formatOptions?.forceLocale
+      ? pageLang.value
+      : browserLang.value
+
     datetime.value = new Intl.DateTimeFormat(
-      theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
+      lang,
       theme.value.lastUpdated?.formatOptions ?? {
-        dateStyle: 'short',
-        timeStyle: 'short'
+        dateStyle: 'medium',
+        timeStyle: 'medium'
       }
     ).format(date.value)
+
+    if (lang && pageLang.value !== lang) {
+      timeRef.value?.setAttribute('lang', lang)
+    } else {
+      timeRef.value?.removeAttribute('lang')
+    }
   })
 })
 </script>
@@ -28,7 +40,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>