✨ a11y PR feedback

owid · Dec 3, 2024 · d761a03 · d761a03
1 parent bc93bbe
commit d761a03
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
-    )
-}