Fix Clock being read as an absolute time rather than duration (#10706)

* Fix Clock being read as an absolute time rather than duration

* Round durations and update snapshots

src/components/views/audio_messages/Clock.tsx

@@ -15,15 +15,17 @@ limitations under the License.
 */
 
 import React, { HTMLProps } from "react";
+import { Temporal } from "proposal-temporal";
 
 import { formatSeconds } from "../../../DateUtils";
 
 interface Props extends Pick<HTMLProps<HTMLSpanElement>, "aria-live" | "role"> {
     seconds: number;
-    formatFn?: (seconds: number) => string;
+    formatFn: (seconds: number) => string;
 }
 
 /**
+ * Clock which represents time periods rather than absolute time.
  * Simply converts seconds using formatFn.
  * Defaulting to formatSeconds().
  * Note that in this case hours will not be displayed, making it possible to see "82:29".
@@ -43,12 +45,23 @@ export default class Clock extends React.Component<Props> {
         return currentFloor !== nextFloor;
     }
 
+    private calculateDuration(seconds: number): string {
+        return new Temporal.Duration(0, 0, 0, 0, 0, 0, seconds)
+            .round({ smallestUnit: "seconds", largestUnit: "hours" })
+            .toString();
+    }
+
     public render(): React.ReactNode {
+        const { seconds, role } = this.props;
         return (
-            <span aria-live={this.props["aria-live"]} role={this.props.role} className="mx_Clock">
-                {/* formatFn set by defaultProps */}
-                {this.props.formatFn!(this.props.seconds)}
-            </span>
+            <time
+                dateTime={this.calculateDuration(seconds)}
+                aria-live={this.props["aria-live"]}
+                role={role}
+                className="mx_Clock"
+            >
+                {this.props.formatFn(seconds)}
+            </time>
         );
     }
 }