owid · ikesau · Dec 4, 2024 · Nov 9, 2024 · Nov 9, 2024 · Nov 9, 2024
diff --git 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/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/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/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
@@ -124,6 +124,7 @@ export {
     formatInlineList,
     lazy,
     getParentVariableIdFromChartConfig,
+    getOrdinalNumberString,
 } from "./Util.js"
 
 export {

diff --git 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
@@ -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)}
+        />
+    )
 }
diff --git 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/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
@@ -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/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;

diff --git 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,20 +14,15 @@
     }
 
     a {
-        color: inherit;
-        transition: color 150ms ease;
-
-        &:hover {
-            color: $blue-30;
-        }
+        @include owid-link-40;
     }
 
     ul {
         list-style-type: none;
         margin-bottom: 1rem;
 
         a {
-            display: block;
+            display: inline-block;
             text-decoration: none;
 
             @include sm-only {
@@ -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);

diff --git 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/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
@@ -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/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/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/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/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>
     )

diff --git 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;