diff --git a/client/src/components/Conversations/Conversations.tsx b/client/src/components/Conversations/Conversations.tsx
index c7eb4d53ef..f55af35f10 100644
--- a/client/src/components/Conversations/Conversations.tsx
+++ b/client/src/components/Conversations/Conversations.tsx
@@ -99,6 +99,9 @@ const DateLabel: FC<{ groupName: string; isFirst?: boolean }> = memo(({ groupNam
const localize = useLocalize();
return (
@@ -394,4 +397,5 @@ const Conversations: FC = ({
);
};
+export { DateLabel };
export default memo(Conversations);
diff --git a/client/src/components/Conversations/__tests__/DateLabel.test.tsx b/client/src/components/Conversations/__tests__/DateLabel.test.tsx
new file mode 100644
index 0000000000..ccd9bc4126
--- /dev/null
+++ b/client/src/components/Conversations/__tests__/DateLabel.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { DateLabel } from '../Conversations';
+
+jest.mock('~/hooks', () => ({
+ useLocalize: () => (key: string, params?: Record) => {
+ const translations: Record = {
+ com_a11y_chats_date_section: `Chats from ${params?.date ?? ''}`,
+ com_ui_date_today: 'Today',
+ com_ui_date_yesterday: 'Yesterday',
+ com_ui_date_previous_7_days: 'Previous 7 days',
+ };
+ return translations[key] ?? key;
+ },
+}));
+
+describe('DateLabel', () => {
+ it('provides accessible heading name via aria-label', () => {
+ render();
+ expect(screen.getByRole('heading', { level: 2, name: 'Chats from Today' })).toBeInTheDocument();
+ });
+
+ it('renders visible text as the localized group name', () => {
+ render();
+ expect(screen.getByText('Today')).toBeInTheDocument();
+ });
+
+ it('sets aria-label with the full accessible phrase', () => {
+ const { container } = render();
+ const heading = container.querySelector('h2');
+ expect(heading).toHaveAttribute('aria-label', 'Chats from Yesterday');
+ });
+
+ it('uses raw groupName for unrecognized translation keys', () => {
+ render();
+ expect(
+ screen.getByRole('heading', { level: 2, name: 'Chats from Unknown Group' }),
+ ).toBeInTheDocument();
+ });
+
+ it('applies mt-0 for the first date header', () => {
+ const { container } = render();
+ const heading = container.querySelector('h2');
+ expect(heading).toHaveClass('mt-0');
+ expect(heading).not.toHaveClass('mt-2');
+ });
+
+ it('applies mt-2 for non-first date headers', () => {
+ const { container } = render();
+ const heading = container.querySelector('h2');
+ expect(heading).toHaveClass('mt-2');
+ expect(heading).not.toHaveClass('mt-0');
+ });
+});
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 9f641fdb16..67111586ff 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -2,6 +2,7 @@
"chat_direction_left_to_right": "Left to Right",
"chat_direction_right_to_left": "Right to Left",
"com_a11y_ai_composing": "The AI is still composing.",
+ "com_a11y_chats_date_section": "Chats from {{date}}",
"com_a11y_end": "The AI has finished their reply.",
"com_a11y_selected": "selected",
"com_a11y_start": "The AI has started their reply.",