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 1/2] 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>}
           />
         ))}
       </>

From 957cd9b8958ccca7417685115788f5490f7c61ee Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Tue, 16 May 2023 09:43:12 +0200
Subject: [PATCH 2/2] docs: add changeset file

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .changeset/clever-coins-deny.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/clever-coins-deny.md

diff --git a/.changeset/clever-coins-deny.md b/.changeset/clever-coins-deny.md
new file mode 100644
index 0000000000..0c1e2ade26
--- /dev/null
+++ b/.changeset/clever-coins-deny.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Use the semantic time tag for rendering world clocks on homepage headers.