From b6b7f1642c05a5c87bab8c96f57ca700a84d5cdc Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Mon, 15 May 2023 22:53:04 +0200
Subject: [PATCH] feat(home): improve world clock accessibility

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .../HeaderWorldClock/HeaderWorldClock.test.tsx  |  2 +-
 .../HeaderWorldClock/HeaderWorldClock.tsx       | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx
index 03f19fb046..6cb4de5a98 100644
--- a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx
+++ b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx
@@ -103,6 +103,6 @@ describe('HeaderWorldClock with custom Time Format', () => {
       />,
     );
 
-    expect(rendered.getByText('09:10')).toBeInTheDocument();
+    expect(rendered.getByText('09:10')).toHaveAttribute('datetime', '09:10');
   });
 });
diff --git a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.tsx b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.tsx
index a45a51e0ad..394af1a27b 100644
--- a/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.tsx
+++ b/plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.tsx
@@ -23,8 +23,9 @@ const timeFormat: Intl.DateTimeFormatOptions = {
 };
 
 type TimeObj = {
-  time: string;
   label: string;
+  value: string;
+  dateTime: string;
 };
 
 /** @public */
@@ -65,8 +66,14 @@ function getTimes(
       label = 'GMT';
     }
 
-    const time = d.toLocaleTimeString(lang, options);
-    clocks.push({ time, label });
+    const value = d.toLocaleTimeString(lang, options);
+    const dateTime = d.toLocaleTimeString(lang, {
+      timeZone: options.timeZone,
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
+    clocks.push({ label, value, dateTime });
   }
 
   return clocks;
@@ -129,9 +136,9 @@ export const HeaderWorldClock = (props: {
       <>
         {clocks.map(clock => (
           <HeaderLabel
-            label={clock.label}
-            value={clock.time}
             key={clock.label}
+            label={clock.label}
+            value={<time dateTime={clock.dateTime}>{clock.value}</time>}
           />
         ))}
       </>