From 57c3f796d41ed180dcdf5ff763193ed5c06f54cf Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Sat, 26 Nov 2022 15:53:26 +0630
Subject: [PATCH] feat(a11y): improve voiceover a11y for datetime component

Remove formatDatetime function. Created a JSX function component (FormattedDatetime) inside Datetime
component. This component returns formatted date and time with better voiceover enhancements.
---
 src/components/Datetime.tsx | 30 +++++++++++++++++++++++++++---
 src/utils/formatDatetime.ts | 14 --------------
 2 files changed, 27 insertions(+), 17 deletions(-)
 delete mode 100644 src/utils/formatDatetime.ts

diff --git a/src/components/Datetime.tsx b/src/components/Datetime.tsx
index c9399a0..edb1323 100644
--- a/src/components/Datetime.tsx
+++ b/src/components/Datetime.tsx
@@ -1,5 +1,3 @@
-import formatDatetime from "@utils/formatDatetime";
-
 export interface Props {
   datetime: string;
   size?: "sm" | "lg";
@@ -9,18 +7,44 @@ export interface Props {
 export default function Datetime({ datetime, size = "sm", className }: Props) {
   return (
     <div className={`opacity-80 flex items-center space-x-2 ${className}`}>
+      <span className="sr-only">Posted on:</span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className={`${
           size === "sm" ? "scale-90" : "scale-100"
         } w-6 h-6 inline-block fill-skin-base`}
+        aria-hidden="true"
       >
         <path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path>
         <path d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"></path>
       </svg>
       <span className={`italic ${size === "sm" ? "text-sm" : "text-base"}`}>
-        {formatDatetime(datetime)}
+        <FormattedDatetime datetime={datetime} />
       </span>
     </div>
   );
 }
+
+const FormattedDatetime = ({ datetime }: { datetime: string }) => {
+  const myDatetime = new Date(datetime);
+
+  const date = myDatetime.toLocaleDateString([], {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+  const time = myDatetime.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+
+  return (
+    <>
+      {date}
+      <span aria-hidden="true"> | </span>
+      <span className="sr-only">&nbsp;at&nbsp;</span>
+      {time}
+    </>
+  );
+};
diff --git a/src/utils/formatDatetime.ts b/src/utils/formatDatetime.ts
deleted file mode 100644
index 60791ac..0000000
--- a/src/utils/formatDatetime.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-const formatDatetime = (datetime: string) => {
-  const myDatetime = new Date(datetime);
-  return (
-    myDatetime.toLocaleDateString([], {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    }) +
-    " | " +
-    myDatetime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
-  );
-};
-
-export default formatDatetime;