From 07b8028c6ef72f8b8da90985b244fa8a8a2f94f4 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 8 Nov 2024 19:27:29 -0500
Subject: [PATCH 01/11] =?UTF-8?q?=E2=9C=A8=20add=20lang=3D"en"=20to=20<Htm?=
 =?UTF-8?q?l>=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/DataCatalog/DataCatalogPage.tsx | 5 +++--
 site/Html.tsx                        | 8 +++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/site/DataCatalog/DataCatalogPage.tsx b/site/DataCatalog/DataCatalogPage.tsx
index aae88809d3e..0af03953dac 100644
--- a/site/DataCatalog/DataCatalogPage.tsx
+++ b/site/DataCatalog/DataCatalogPage.tsx
@@ -4,6 +4,7 @@ import { SiteHeader } from "../SiteHeader.js"
 import { SiteFooter } from "../SiteFooter.js"
 import { SiteFooterContext, TagGraphRoot } from "@ourworldindata/utils"
 import { DataCatalogInstantSearchWrapper } from "./DataCatalog.js"
+import { Html } from "../Html.js"
 
 declare global {
     interface Window {
@@ -18,7 +19,7 @@ export const DataCatalogPage = (props: {
     const { baseUrl, tagGraph } = props
 
     return (
-        <html>
+        <Html>
             <Head
                 canonicalUrl={`${baseUrl}/charts`}
                 pageTitle="Data Catalog"
@@ -47,6 +48,6 @@ export const DataCatalogPage = (props: {
                     hideDonationFlag
                 />
             </body>
-        </html>
+        </Html>
     )
 }
diff --git a/site/Html.tsx b/site/Html.tsx
index f013b713974..a3373f270a9 100644
--- a/site/Html.tsx
+++ b/site/Html.tsx
@@ -7,5 +7,11 @@ import React, { HtmlHTMLAttributes } from "react"
  * See the <script> tag in Head.tsx / NoJSDetector.tsx for the client-side JavaScript that removes this class.
  */
 export const Html = (props: HtmlHTMLAttributes<Element>) => {
-    return <html {...props} className={cx("js-disabled", props.className)} />
+    return (
+        <html
+            {...props}
+            lang="en"
+            className={cx("js-disabled", props.className)}
+        />
+    )
 }

From 37db8577369ebf3162e381616969574550ecf46c Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 8 Nov 2024 19:33:58 -0500
Subject: [PATCH 02/11] =?UTF-8?q?=E2=9C=A8=20improve=20button=20aria-label?=
 =?UTF-8?q?s=20and=20roles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/src/Button/Button.tsx                | 13 ++++++++++++-
 packages/@ourworldindata/utils/src/Util.ts          | 12 ++++++++++++
 packages/@ourworldindata/utils/src/index.ts         |  1 +
 site/gdocs/components/DataInsightsNewsletter.tsx    |  2 ++
 site/gdocs/components/LatestDataInsights.tsx        | 10 ++++++++--
 5 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/@ourworldindata/components/src/Button/Button.tsx b/packages/@ourworldindata/components/src/Button/Button.tsx
index a0499f90fbc..ee31c825453 100644
--- a/packages/@ourworldindata/components/src/Button/Button.tsx
+++ b/packages/@ourworldindata/components/src/Button/Button.tsx
@@ -14,11 +14,15 @@ type ButtonCommonProps = {
 type WithHrefProps = {
     href: string
     onClick?: never
+    ariaLabel?: never
+    type?: never
 }
 
 type WithOnClickProps = {
     onClick?: () => void
     href?: never
+    ariaLabel: string
+    type?: "button" | "submit"
 }
 
 export type ButtonProps =
@@ -31,6 +35,8 @@ export const Button = ({
     href,
     onClick,
     text,
+    ariaLabel,
+    type = "button",
     icon = faArrowRight,
 }: ButtonProps) => {
     const classes = cx("owid-btn", `owid-btn--${theme}`, className)
@@ -44,7 +50,12 @@ export const Button = ({
     }
 
     return (
-        <button className={classes} onClick={onClick}>
+        <button
+            aria-label={ariaLabel}
+            type={type}
+            className={classes}
+            onClick={onClick}
+        >
             {text} {icon && <FontAwesomeIcon icon={icon} />}
         </button>
     )
diff --git a/packages/@ourworldindata/utils/src/Util.ts b/packages/@ourworldindata/utils/src/Util.ts
index 5c93748b3fd..f494250f699 100644
--- a/packages/@ourworldindata/utils/src/Util.ts
+++ b/packages/@ourworldindata/utils/src/Util.ts
@@ -2000,3 +2000,15 @@ 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 eacf00917fa..667e656b02d 100644
--- a/packages/@ourworldindata/utils/src/index.ts
+++ b/packages/@ourworldindata/utils/src/index.ts
@@ -124,6 +124,7 @@ export {
     formatInlineList,
     lazy,
     getParentVariableIdFromChartConfig,
+    getOrdinalNumberString,
 } from "./Util.js"
 
 export {
diff --git a/site/gdocs/components/DataInsightsNewsletter.tsx b/site/gdocs/components/DataInsightsNewsletter.tsx
index 050eeb294e8..0f1651ff9ce 100644
--- a/site/gdocs/components/DataInsightsNewsletter.tsx
+++ b/site/gdocs/components/DataInsightsNewsletter.tsx
@@ -73,8 +73,10 @@ export default function DataInsightsNewsletter({
                         />
                         <input type="hidden" name="group[85302][16]" value="" />
                         <Button
+                            ariaLabel="Subscribe to the Daily Data Insights newsletter"
                             theme="solid-vermillion"
                             text="Subscribe"
+                            type="submit"
                             icon={null}
                             onClick={() =>
                                 analytics.logSiteClick(
diff --git a/site/gdocs/components/LatestDataInsights.tsx b/site/gdocs/components/LatestDataInsights.tsx
index 3ef6beec7b6..0792441761d 100644
--- a/site/gdocs/components/LatestDataInsights.tsx
+++ b/site/gdocs/components/LatestDataInsights.tsx
@@ -24,6 +24,7 @@ import {
     EnrichedBlockImage,
     OwidEnrichedGdocBlock,
     LatestDataInsight,
+    getOrdinalNumberString,
 } from "@ourworldindata/utils"
 import { dataInsightIndexToIdMap } from "../pages/DataInsight.js"
 import Image from "./Image.js"
@@ -111,6 +112,7 @@ export default function LatestDataInsights({
             </div>
             {canScrollPrev && (
                 <Button
+                    ariaLabel="Scroll to the previous data insight card"
                     className="latest-data-insights__control-button latest-data-insights__control-button--prev"
                     theme="solid-blue"
                     onClick={scrollPrev}
@@ -120,6 +122,7 @@ export default function LatestDataInsights({
             )}
             {canScrollNext && (
                 <Button
+                    ariaLabel="Scroll to the next data insight card"
                     className="latest-data-insights__control-button latest-data-insights__control-button--next"
                     theme="solid-blue"
                     onClick={scrollNext}
@@ -131,6 +134,7 @@ export default function LatestDataInsights({
                 {scrollSnaps.map((_, index) => (
                     <DotButton
                         key={index}
+                        index={index}
                         onClick={() => onDotButtonClick(index)}
                         className={cx("latest-data-insights__control-dot", {
                             "latest-data-insights__control-dot--selected":
@@ -251,10 +255,12 @@ function useDotButton(emblaApi: EmblaCarouselType | undefined): {
 
 function DotButton({
     children,
+    index,
     ...restProps
-}: ComponentPropsWithRef<"button">) {
+}: ComponentPropsWithRef<"button"> & { index: number }) {
+    const label = `Navigate to the ${getOrdinalNumberString(index + 1)} data insight card`
     return (
-        <button type="button" {...restProps}>
+        <button aria-label={label} {...restProps}>
             {children}
         </button>
     )

From 92513753bec0702d295d527ee15e4aa120c5af4e Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 8 Nov 2024 19:35:53 -0500
Subject: [PATCH 03/11] =?UTF-8?q?=E2=9C=A8=20improve=20SiteFooter=20contra?=
 =?UTF-8?q?st=20and=20tab=20order?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/src/styles/mixins.scss         | 13 +++++++++
 site/SiteFooter.tsx                           | 16 ++++++-----
 site/css/footer.scss                          | 27 ++++++++++++-------
 3 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/packages/@ourworldindata/components/src/styles/mixins.scss b/packages/@ourworldindata/components/src/styles/mixins.scss
index 8bc0753e640..4d747a29eb7 100644
--- a/packages/@ourworldindata/components/src/styles/mixins.scss
+++ b/packages/@ourworldindata/components/src/styles/mixins.scss
@@ -24,6 +24,19 @@
     }
 }
 
+@mixin owid-link-40 {
+    color: $blue-40;
+    text-decoration: underline;
+    text-underline-offset: 4px;
+
+    &:visited {
+        color: $blue-30;
+    }
+    &:hover {
+        text-decoration: none;
+    }
+}
+
 @mixin cancel-link-styles {
     color: $blue-90;
     text-decoration: none;
diff --git a/site/SiteFooter.tsx b/site/SiteFooter.tsx
index e17488b26aa..f0f9b21dd56 100644
--- a/site/SiteFooter.tsx
+++ b/site/SiteFooter.tsx
@@ -240,7 +240,15 @@ export const SiteFooter = (props: SiteFooterProps) => (
                                 Please consult our full{" "}
                                 <a href="/about#legal">legal disclaimer</a>.
                             </p>
-                            <p>
+                            <p className="legal--last-paragraph">
+                                <span>
+                                    Our World In Data is a project of the{" "}
+                                    <a href="https://global-change-data-lab.org/">
+                                        Global Change Data Lab
+                                    </a>
+                                    , a registered charity in England and Wales
+                                    (Charity Number 1186433).
+                                </span>
                                 <a
                                     href="https://global-change-data-lab.org/"
                                     className="partner-logo gcdl-logo"
@@ -260,12 +268,6 @@ export const SiteFooter = (props: SiteFooterProps) => (
                                         />
                                     </picture>
                                 </a>
-                                Our World In Data is a project of the{" "}
-                                <a href="https://global-change-data-lab.org/">
-                                    Global Change Data Lab
-                                </a>
-                                , a registered charity in England and Wales
-                                (Charity Number 1186433).
                             </p>
                         </div>
                     </div>
diff --git a/site/css/footer.scss b/site/css/footer.scss
index 9abd591e6ae..9b731fa3182 100644
--- a/site/css/footer.scss
+++ b/site/css/footer.scss
@@ -1,7 +1,7 @@
 .site-footer {
     background-color: $oxford-blue;
     padding: 3rem 0;
-    color: $blue-50;
+    color: scale-color($blue-50, $lightness: 5%);
 
     @include sm-only {
         text-align: center;
@@ -14,12 +14,7 @@
     }
 
     a {
-        color: inherit;
-        transition: color 150ms ease;
-
-        &:hover {
-            color: $blue-30;
-        }
+        @include owid-link-40;
     }
 
     ul {
@@ -47,12 +42,26 @@
 
     .legal {
         font-size: 0.875rem;
-        color: $blue-60;
+        color: scale-color($blue-50, $lightness: 5%);
         text-align: left;
 
         p {
             margin: 0 0 1rem;
         }
+
+        .legal--last-paragraph {
+            display: flex;
+            span {
+                flex: 7;
+            }
+            .partner-logo {
+                flex: 1;
+                text-align: right;
+                img {
+                    max-width: 48px;
+                }
+            }
+        }
     }
 
     .partner-logo {
@@ -63,7 +72,7 @@
             opacity 150ms ease,
             filter 150ms ease;
         filter: grayscale(1);
-        opacity: 0.5;
+        opacity: 0.9;
 
         &:hover {
             filter: grayscale(0);

From 010cfd4178f7fdbe477d9b6f572a9d69055e7356 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 8 Nov 2024 19:36:04 -0500
Subject: [PATCH 04/11] =?UTF-8?q?=E2=9C=A8=20improve=20cookie=20notice=20c?=
 =?UTF-8?q?ontrast?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/css/cookie-notice.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/site/css/cookie-notice.scss b/site/css/cookie-notice.scss
index d07972ce60c..fcbbc387e60 100644
--- a/site/css/cookie-notice.scss
+++ b/site/css/cookie-notice.scss
@@ -30,6 +30,9 @@
 
     .cookie-notice__text {
         margin: 0;
+        a {
+            @include owid-link-90;
+        }
 
         @include lg-up {
             text-align: left;

From 84069093123e133231341b92e9521ea62e76b95e Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 8 Nov 2024 19:36:47 -0500
Subject: [PATCH 05/11] =?UTF-8?q?=E2=9C=A8=20improve=20deep-link=20accessi?=
 =?UTF-8?q?bility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/gdocs/components/AllCharts.tsx          | 6 +++++-
 site/gdocs/components/ArticleBlock.tsx       | 6 +++++-
 site/gdocs/components/KeyInsights.tsx        | 6 +++++-
 site/gdocs/components/ResearchAndWriting.tsx | 6 +++++-
 site/gdocs/components/centered-article.scss  | 3 +++
 site/owid.scss                               | 3 +++
 6 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/site/gdocs/components/AllCharts.tsx b/site/gdocs/components/AllCharts.tsx
index dc2f95713e5..60ae1250c13 100644
--- a/site/gdocs/components/AllCharts.tsx
+++ b/site/gdocs/components/AllCharts.tsx
@@ -53,7 +53,11 @@ export function AllCharts(props: AllChartsProps) {
                 id={ALL_CHARTS_ID}
             >
                 {heading}
-                <a className="deep-link" href={`#${ALL_CHARTS_ID}`} />
+                <a
+                    className="deep-link"
+                    aria-labelledby={ALL_CHARTS_ID}
+                    href={`#${ALL_CHARTS_ID}`}
+                />
             </h1>
             <RelatedCharts
                 showKeyChartsOnly={true}
diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
index bd33ba3e209..f84aee194b8 100644
--- a/site/gdocs/components/ArticleBlock.tsx
+++ b/site/gdocs/components/ArticleBlock.tsx
@@ -402,7 +402,11 @@ export default function ArticleBlock({
                     ) : null}
                     {renderSpans(text, shouldRenderLinks)}
                     {shouldRenderLinks && (
-                        <a className="deep-link" href={`#${id}`} />
+                        <a
+                            className="deep-link"
+                            aria-labelledby={id}
+                            href={`#${id}`}
+                        />
                     )}
                 </h3>
             )
diff --git a/site/gdocs/components/KeyInsights.tsx b/site/gdocs/components/KeyInsights.tsx
index 118833f1b58..d64f0fee9da 100644
--- a/site/gdocs/components/KeyInsights.tsx
+++ b/site/gdocs/components/KeyInsights.tsx
@@ -322,7 +322,11 @@ export const KeyInsights = ({
                 id={KEY_INSIGHTS_ID}
             >
                 {heading}
-                <a className="deep-link" href={`#${KEY_INSIGHTS_ID}`} />
+                <a
+                    className="deep-link"
+                    aria-labelledby={KEY_INSIGHTS_ID}
+                    href={`#${KEY_INSIGHTS_ID}`}
+                />
             </h1>
             <div className={KEY_INSIGHTS_CLASS_NAME}>
                 <div>
diff --git a/site/gdocs/components/ResearchAndWriting.tsx b/site/gdocs/components/ResearchAndWriting.tsx
index 0c0fdccb519..5a205409617 100644
--- a/site/gdocs/components/ResearchAndWriting.tsx
+++ b/site/gdocs/components/ResearchAndWriting.tsx
@@ -202,7 +202,11 @@ export function ResearchAndWriting(props: ResearchAndWritingProps) {
                 id={slug}
             >
                 {heading || RESEARCH_AND_WRITING_DEFAULT_HEADING}
-                <a className="deep-link" href={`#${slug}`} />
+                <a
+                    className="deep-link"
+                    aria-labelledby={slug}
+                    href={`#${slug}`}
+                />
             </h1>
             <div className="span-cols-12 research-and-writing-row">
                 <div
diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
index bf6649d6569..51da3c03584 100644
--- a/site/gdocs/components/centered-article.scss
+++ b/site/gdocs/components/centered-article.scss
@@ -304,6 +304,7 @@ h1.article-block__heading {
     a.deep-link {
         margin-top: 16px;
         height: 16px;
+        width: 16px;
         @include sm-only {
             margin-top: 10px;
         }
@@ -313,6 +314,7 @@ h2.article-block__heading {
     a.deep-link {
         margin-top: 11px;
         height: 14px;
+        width: 14px;
         @include sm-only {
             margin-top: 10px;
         }
@@ -322,6 +324,7 @@ h3.article-block__heading {
     a.deep-link {
         margin-top: 8px;
         height: 12px;
+        width: 12px;
         @include sm-only {
             margin-top: 10px;
         }
diff --git a/site/owid.scss b/site/owid.scss
index 0f3c09229c2..c9cc53fee87 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -203,6 +203,9 @@ main {
             no-repeat left;
         background-size: contain;
     }
+    &:focus {
+        opacity: 1;
+    }
 }
 
 h2:hover .deep-link,

From 19c0788e790a9ccd75960b087b3f5f60a9bd6f28 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 8 Nov 2024 19:37:09 -0500
Subject: [PATCH 06/11] =?UTF-8?q?=E2=9C=A8=20topic=20page=20accessibility?=
 =?UTF-8?q?=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/blocks/AllChartsListItem.tsx      | 6 +++++-
 site/blocks/ExpandableParagraph.tsx    | 4 ++++
 site/gdocs/components/KeyInsights.scss | 4 ++++
 site/gdocs/components/PillRow.scss     | 2 +-
 site/gdocs/components/topic-page.scss  | 1 +
 5 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/site/blocks/AllChartsListItem.tsx b/site/blocks/AllChartsListItem.tsx
index 42d586375a1..2473a59ead9 100644
--- a/site/blocks/AllChartsListItem.tsx
+++ b/site/blocks/AllChartsListItem.tsx
@@ -18,7 +18,11 @@ export const AllChartsListItem = ({
                 href={`${BAKED_BASE_URL}/grapher/${chart.slug}`}
                 onClick={onClick}
             >
-                <GrapherImage slug={chart.slug} noFormatting />
+                <GrapherImage
+                    slug={chart.slug}
+                    alt={`A thumbnail of the "${chart.title}" chart`}
+                    noFormatting
+                />
                 <span>{chart.title}</span>
             </a>
             {chart.variantName ? (
diff --git a/site/blocks/ExpandableParagraph.tsx b/site/blocks/ExpandableParagraph.tsx
index 46ed47be1e7..f7b2cb081ba 100644
--- a/site/blocks/ExpandableParagraph.tsx
+++ b/site/blocks/ExpandableParagraph.tsx
@@ -64,6 +64,10 @@ export const ExpandableParagraph = (
         <div className={cx("expandable-paragraph", className)}>
             <div
                 style={contentStyles}
+                // inert isn't supported in react@17
+                // prevents focus on elements that are not visible
+                // ideally would only apply to elements below the fold but that's hard
+                {...{ inert: isClosed ? "true" : undefined }}
                 ref={containerRef}
                 // Either pass children or dangerouslySetInnerHTML
                 {...propsWithoutStyles}
diff --git a/site/gdocs/components/KeyInsights.scss b/site/gdocs/components/KeyInsights.scss
index 5c8ea9e5e17..2d6c86ca192 100644
--- a/site/gdocs/components/KeyInsights.scss
+++ b/site/gdocs/components/KeyInsights.scss
@@ -85,6 +85,10 @@ $slide-content-height: $grapher-height;
             color: $blue-90;
             letter-spacing: -0.2px;
         }
+        &:focus {
+            border-color: $gray-50;
+            outline: none;
+        }
     }
 
     .slides {
diff --git a/site/gdocs/components/PillRow.scss b/site/gdocs/components/PillRow.scss
index bc171a1e774..3568a4a911f 100644
--- a/site/gdocs/components/PillRow.scss
+++ b/site/gdocs/components/PillRow.scss
@@ -7,7 +7,7 @@
         padding: 8px 0;
     }
     p {
-        color: $blue-60;
+        color: $blue-65;
         margin: 0 9px 0 0;
         line-height: 32px;
         white-space: nowrap;
diff --git a/site/gdocs/components/topic-page.scss b/site/gdocs/components/topic-page.scss
index 69a8fedf1f6..cf40470a9f6 100644
--- a/site/gdocs/components/topic-page.scss
+++ b/site/gdocs/components/topic-page.scss
@@ -30,6 +30,7 @@
     }
     .topic-page-header__byline a {
         @include owid-link-60;
+        color: scale-color($blue-60, $lightness: -5%);
         &:visited {
             color: inherit;
         }

From afdfd3ea72db156c6f2097ec6bdebfc9fb659278 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 8 Nov 2024 19:54:46 -0500
Subject: [PATCH 07/11] =?UTF-8?q?=E2=9C=A8=20add=20universal=20focus=20ind?=
 =?UTF-8?q?icator=20rule=20experiment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/css/forms.scss | 3 ---
 site/owid.scss      | 7 +++++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/site/css/forms.scss b/site/css/forms.scss
index 71bb40a6d8b..faaea1ac2cd 100644
--- a/site/css/forms.scss
+++ b/site/css/forms.scss
@@ -117,9 +117,6 @@ $checkbox-check-height: 4px;
     &:hover {
         opacity: 0.85;
     }
-    &:focus {
-        outline: 4px solid $highlight-color;
-    }
 }
 
 %owid-button {
diff --git a/site/owid.scss b/site/owid.scss
index c9cc53fee87..f217bd94074 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -138,6 +138,13 @@ http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-s
     }
 }
 
+/* Focus indicator
+--------------------------------------------- */
+*:focus {
+    outline: 2px dotted $blue-60;
+    outline-offset: 2px;
+}
+
 /* Blog posts and blog index page (on /blog)
 --------------------------------------------- */
 

From e2a39ee018170232499f95566043dc06e6cc8422 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Mon, 11 Nov 2024 16:19:03 -0500
Subject: [PATCH 08/11] =?UTF-8?q?=E2=9C=A8=20improve=20focus=20outline=20i?=
 =?UTF-8?q?n=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/css/footer.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/css/footer.scss b/site/css/footer.scss
index 9b731fa3182..7fdb5bec673 100644
--- a/site/css/footer.scss
+++ b/site/css/footer.scss
@@ -22,7 +22,7 @@
         margin-bottom: 1rem;
 
         a {
-            display: block;
+            display: inline-block;
             text-decoration: none;
 
             @include sm-only {

From 3f5c2e5025662db1a57e92e29cd2fd263021d1f0 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Mon, 11 Nov 2024 16:19:19 -0500
Subject: [PATCH 09/11] =?UTF-8?q?=E2=9C=A8=20use=20focus-visible=20and=20f?=
 =?UTF-8?q?ix=20normalize=20override=20for=20firefox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/owid.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/site/owid.scss b/site/owid.scss
index f217bd94074..503bff4983a 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -140,7 +140,12 @@ http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-s
 
 /* Focus indicator
 --------------------------------------------- */
-*:focus {
+// Override normalize.css on Firefox
+button:-moz-focusring {
+    outline: 2px dotted $blue-60;
+}
+
+*:focus-visible {
     outline: 2px dotted $blue-60;
     outline-offset: 2px;
 }

From bc93bbeb1536e1de1cd6885392733cb84767ac96 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 15 Nov 2024 12:16:39 -0500
Subject: [PATCH 10/11] =?UTF-8?q?=E2=9C=A8=20solid=20outline=20everywhere?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/@ourworldindata/grapher/src/footer/Footer.tsx |  1 +
 site/owid.scss                                         | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
index f731f5978bf..ef9538bb9ba 100644
--- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx
+++ b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
@@ -432,6 +432,7 @@ export class Footer<
                 <a
                     className="learn-more-about-data"
                     data-track-note="chart_click_sources"
+                    tabIndex={0}
                     onClick={action((e) => {
                         e.stopPropagation()
 
diff --git a/site/owid.scss b/site/owid.scss
index 503bff4983a..800fdfb1b29 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -141,12 +141,14 @@ http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-s
 /* Focus indicator
 --------------------------------------------- */
 // Override normalize.css on Firefox
-button:-moz-focusring {
-    outline: 2px dotted $blue-60;
+button:-moz-focusring,
+[type="button"]::-moz-focus-inner {
+    outline: 2px solid $blue-60;
 }
 
-*:focus-visible {
-    outline: 2px dotted $blue-60;
+*:focus-visible,
+[type="button"]:focus-visible {
+    outline: 2px solid $blue-60;
     outline-offset: 2px;
 }
 

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 11/11] =?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>
-    )
-}
