From dc45e3960d089d9f3451026f9bfdeaf6efee82ff Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Wed, 21 Oct 2026 15:37:59 -0400
Subject: [PATCH] fix(a11y): screen readers hear how long ago each sidebar chat
 was updated (#32851)

---
 .../components/layout/Sidebar/ChatItem.svelte   | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 11f626ff0c..3249ecbedf 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -16,6 +16,8 @@
 
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
+	import dayjs, { getDayjsLocale } from '$lib/dayjs';
+	import relativeTime from 'dayjs/plugin/relativeTime';
 	import type { ChatParticipant } from '$lib/apis/folders';
 	import { goto, invalidate, invalidateAll } from '$app/navigation';
 	import { onMount, getContext, createEventDispatcher, tick } from 'svelte';
@@ -62,6 +64,8 @@
 	import { createMessagesList } from '$lib/utils';
 	import { getOutputText } from '$lib/components/chat/Messages/structuredOutput';
 
+	dayjs.extend(relativeTime);
+
 	const i18n = getContext('i18n');
 
 	const dispatch = createEventDispatcher();
@@ -575,9 +579,20 @@
 		</div>
 	</div>
 
+	{#if updatedAt ?? createdAt}
+		<span class="sr-only">
+			{dayjs(((updatedAt ?? createdAt) as number) * 1000)
+				.locale(getDayjsLocale($i18n.language))
+				.fromNow()}
+		</span>
+	{/if}
+
 	<!-- Time ago indicator -->
 	{#if (updatedAt ?? createdAt) && !showInlineActions && !($mobile && !readonly)}
-		<div class="shrink-0 self-center text-[0.625rem] text-gray-400 dark:text-gray-500 pl-2">
+		<div
+			class="shrink-0 self-center text-[0.625rem] text-gray-400 dark:text-gray-500 pl-2"
+			aria-hidden="true"
+		>
 			{formatTimeAgo((updatedAt ?? createdAt) as number)}
 		</div>
 	{/if}