From 78da5a88bd4fb34020ab360e652ef27726d23df0 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Thu, 1 Feb 2024 17:48:04 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20(grapher)=20pass=20numeric=20sli?=
 =?UTF-8?q?der=20values=20when=20possible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/timeline/TimelineComponent.tsx  | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.tsx b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.tsx
index 4a038817821..2c8d09f486e 100644
--- a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.tsx
+++ b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.tsx
@@ -455,7 +455,8 @@ const TimelineHandle = ({
     onBlur?: React.FocusEventHandler<HTMLDivElement>
 }): JSX.Element => {
     return (
-        // @ts-expect-error aria-value* fields expect a number, but we're passing a string
+        // @ts-expect-error aria-value* fields expect a number, but if we're dealing with daily data,
+        // the numeric representation of a date is meaningless, so we pass the formatted date string instead.
         <div
             className={classNames("handle", type)}
             style={{
@@ -463,9 +464,9 @@ const TimelineHandle = ({
             }}
             role="slider"
             tabIndex={0}
-            aria-valuemin={formattedMinTime}
-            aria-valuenow={formattedCurrTime}
-            aria-valuemax={formattedMaxTime}
+            aria-valuemin={castToNumberIfPossible(formattedMinTime)}
+            aria-valuenow={castToNumberIfPossible(formattedCurrTime)}
+            aria-valuemax={castToNumberIfPossible(formattedMaxTime)}
             aria-label={label}
             onFocus={onFocus}
             onBlur={onBlur}
@@ -489,3 +490,11 @@ const TimelineHandle = ({
         </div>
     )
 }
+
+function castToNumberIfPossible(s: string): string | number {
+    return isNumber(s) ? +s : s
+}
+
+function isNumber(s: string): boolean {
+    return /^\d+$/.test(s)
+}