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

@@ -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}
+    </>
+  );
+};

src/utils/formatDatetime.ts

@@ -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;