Keep accessible text honest and sleep between ticks

The visually-hidden text was written as HH:MM:SS but only refreshed when
the minute changed, so assistive technology was given seconds that could
be up to 59s stale. Format that text to the minute instead, matching the
rate at which it is actually refreshed, rather than announcing a
precision the value does not hold. Announcing every second would flood a
polite live region, so the refresh rate stays as it was.

Also drop aria-label from the <time> element: for an atomic live region
the label wins over the contents in the accessible name computation, so
it shadowed the very text it was meant to caption.

tick() re-armed via requestAnimationFrame, waking ~60x/sec to do nothing
in 59 of every 60 calls. Schedule the next tick on the second boundary
instead; measured within 2ms of the boundary with no drift.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U3vf9sKKuCRHkwhBhGLpY1

Author: accuser

index.html

@@ -10,7 +10,7 @@
 	</head>
 	<body>
 		<div class="container">
-			<time id="clock" aria-live="polite" aria-atomic="true" aria-label="Current time">
+			<time id="clock" aria-live="polite" aria-atomic="true">
 				<span class="visually-hidden" id="clock-text"></span>
 				<template id="template">
 					<div>

src/clock.js

@@ -17,7 +17,22 @@ const start = (clock, template = clock.children[1]) => {
 	 * @param {Date} datetime - datetime to format
 	 * @return {string} the formatted datetime
 	 */
-	const formatTime = (datetime) => datetime.toLocaleTimeString('en-GB', { "hour12": false });
+	const formatTime = (datetime) => datetime.toLocaleTimeString('en-GB', { hour12: false });
+
+	/**
+	 * Format the time to the minute, for the accessible text. Announcing every
+	 * second would flood assistive technology, so the text is deliberately no
+	 * more precise than the rate at which it is refreshed.
+	 *
+	 * @param {Date} datetime - datetime to format
+	 * @return {string} the formatted datetime
+	 */
+	const formatMinute = (datetime) =>
+		datetime.toLocaleTimeString('en-GB', {
+			hour12: false,
+			hour: '2-digit',
+			minute: '2-digit',
+		});
 
 	const time = formatTime(new Date());
 
@@ -42,11 +57,11 @@ const start = (clock, template = clock.children[1]) => {
 		if (time !== lastTime) {
 			clock.setAttribute('datetime', date);
 
-			// Only update accessible text when the minute changes (not every second)
-			const currentMinute = time.substring(0, 5); // "HH:MM"
-			if (currentMinute !== lastMinute) {
-				clock.children.item(0).textContent = time;
-				lastMinute = currentMinute;
+			const minute = formatMinute(datetime);
+
+			if (minute !== lastMinute) {
+				clock.children.item(0).textContent = minute;
+				lastMinute = minute;
 			}
 
 			for (let i = 0; i < time.length; i++) {
@@ -56,8 +71,9 @@ const start = (clock, template = clock.children[1]) => {
 			lastTime = time;
 		}
 
-		requestAnimationFrame(tick);
+		// Sleep until the next second boundary rather than waking every frame
+		setTimeout(tick, 1000 - (Date.now() % 1000));
 	};
 
-	requestAnimationFrame(tick);
+	tick();
 };