From d761a030bdd7ecb6311146b3e9f6c143115f4827 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Tue, 3 Dec 2024 15:56:11 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20a11y=20PR=20feedback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/@ourworldindata/utils/src/Util.ts    | 12 -------
 packages/@ourworldindata/utils/src/index.ts   |  1 -
 site/gdocs/components/LatestDataInsights.scss |  4 +--
 site/gdocs/components/LatestDataInsights.tsx  | 36 ++++---------------
 4 files changed, 8 insertions(+), 45 deletions(-)

diff --git a/packages/@ourworldindata/utils/src/Util.ts b/packages/@ourworldindata/utils/src/Util.ts
index f494250f699..5c93748b3fd 100644
--- a/packages/@ourworldindata/utils/src/Util.ts
+++ b/packages/@ourworldindata/utils/src/Util.ts
@@ -2000,15 +2000,3 @@ export function getPaginationPageNumbers(
 
     return pageNumbers
 }
-
-/**
- * Convert 0 to "0th", 1 to "1st", etc.
- * */
-export function getOrdinalNumberString(n: number): string {
-    const suffix = ["th", "st", "nd", "rd"]
-    const modulusValue = n % 100
-    return (
-        n +
-        (suffix[(modulusValue - 20) % 10] || suffix[modulusValue] || suffix[0])
-    )
-}
diff --git a/packages/@ourworldindata/utils/src/index.ts b/packages/@ourworldindata/utils/src/index.ts
index 667e656b02d..eacf00917fa 100644
--- a/packages/@ourworldindata/utils/src/index.ts
+++ b/packages/@ourworldindata/utils/src/index.ts
@@ -124,7 +124,6 @@ export {
     formatInlineList,
     lazy,
     getParentVariableIdFromChartConfig,
-    getOrdinalNumberString,
 } from "./Util.js"
 
 export {
diff --git a/site/gdocs/components/LatestDataInsights.scss b/site/gdocs/components/LatestDataInsights.scss
index c8fcf746b3c..9bb6d853d9b 100644
--- a/site/gdocs/components/LatestDataInsights.scss
+++ b/site/gdocs/components/LatestDataInsights.scss
@@ -191,7 +191,7 @@ html:not(.js-enabled) .latest-data-insights__card,
     }
 }
 
-.latest-data-insights__control-dots {
+.latest-data-insights__dots {
     position: absolute;
     display: flex;
     justify-content: center;
@@ -207,7 +207,7 @@ html:not(.js-enabled) .latest-data-insights__card,
     }
 }
 
-.latest-data-insights__control-dot {
+.latest-data-insights__dot {
     background-color: $blue-30;
     touch-action: manipulation;
     display: inline-flex;
diff --git a/site/gdocs/components/LatestDataInsights.tsx b/site/gdocs/components/LatestDataInsights.tsx
index 0792441761d..72ccc6930df 100644
--- a/site/gdocs/components/LatestDataInsights.tsx
+++ b/site/gdocs/components/LatestDataInsights.tsx
@@ -1,12 +1,5 @@
 import * as React from "react"
-import {
-    memo,
-    useState,
-    useCallback,
-    useEffect,
-    useMemo,
-    ComponentPropsWithRef,
-} from "react"
+import { memo, useState, useCallback, useEffect, useMemo } from "react"
 import { useMediaQuery } from "usehooks-ts"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
@@ -24,7 +17,6 @@ import {
     EnrichedBlockImage,
     OwidEnrichedGdocBlock,
     LatestDataInsight,
-    getOrdinalNumberString,
 } from "@ourworldindata/utils"
 import { dataInsightIndexToIdMap } from "../pages/DataInsight.js"
 import Image from "./Image.js"
@@ -55,8 +47,7 @@ export default function LatestDataInsights({
     const [emblaRef, emblaApi] = useEmblaCarousel({ align: "start" }, [
         ClassNames(),
     ])
-    const { selectedIndex, scrollSnaps, onDotButtonClick } =
-        useDotButton(emblaApi)
+    const { selectedIndex, scrollSnaps } = useDotButton(emblaApi)
     const [canScrollPrev, setCanScrollPrev] = useState(false)
     const [canScrollNext, setCanScrollNext] = useState(false)
 
@@ -130,14 +121,12 @@ export default function LatestDataInsights({
                     text=""
                 />
             )}
-            <div className="latest-data-insights__control-dots">
+            <div className="latest-data-insights__dots">
                 {scrollSnaps.map((_, index) => (
-                    <DotButton
+                    <div
                         key={index}
-                        index={index}
-                        onClick={() => onDotButtonClick(index)}
-                        className={cx("latest-data-insights__control-dot", {
-                            "latest-data-insights__control-dot--selected":
+                        className={cx("latest-data-insights__dot", {
+                            "latest-data-insights__dot--selected":
                                 index === selectedIndex,
                         })}
                     />
@@ -252,16 +241,3 @@ function useDotButton(emblaApi: EmblaCarouselType | undefined): {
         onDotButtonClick,
     }
 }
-
-function DotButton({
-    children,
-    index,
-    ...restProps
-}: ComponentPropsWithRef<"button"> & { index: number }) {
-    const label = `Navigate to the ${getOrdinalNumberString(index + 1)} data insight card`
-    return (
-        <button aria-label={label} {...restProps}>
-            {children}
-        </button>
-    )
-}