From 6d600d00441901c2787c37de88fc7cbd2a7ffd30 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Mon, 22 Jan 2024 21:04:10 +0000
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=89=20add=20aria=20labels=20to=20n?=
 =?UTF-8?q?av=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/SiteMobileCategory.tsx   | 3 +++
 site/SiteMobileMenu.tsx       | 1 +
 site/SiteNavigation.tsx       | 4 ++++
 site/SiteNavigationToggle.tsx | 3 +++
 4 files changed, 11 insertions(+)

diff --git a/site/SiteMobileCategory.tsx b/site/SiteMobileCategory.tsx
index f5bb4451cf8..b4be790be57 100644
--- a/site/SiteMobileCategory.tsx
+++ b/site/SiteMobileCategory.tsx
@@ -28,6 +28,9 @@ export const SiteMobileCategory = ({
             ref={categoryRef}
         >
             <SiteNavigationToggle
+                ariaLabel={
+                    isActive ? `Collapse ${category}` : `Expand ${category}`
+                }
                 isActive={isActive}
                 onToggle={() => toggleCategory(category)}
                 dropdown={
diff --git a/site/SiteMobileMenu.tsx b/site/SiteMobileMenu.tsx
index 1166fbbe3ea..09fd1d1b94f 100644
--- a/site/SiteMobileMenu.tsx
+++ b/site/SiteMobileMenu.tsx
@@ -51,6 +51,7 @@ export const SiteMobileMenu = ({
                 </li>
                 <li>
                     <SiteNavigationToggle
+                        ariaLabel="Toggle resources menu"
                         isActive={menu === Menu.Resources}
                         onToggle={() =>
                             toggleMenu(
diff --git a/site/SiteNavigation.tsx b/site/SiteNavigation.tsx
index 0f799f90694..5cd2b2111ad 100644
--- a/site/SiteNavigation.tsx
+++ b/site/SiteNavigation.tsx
@@ -128,6 +128,7 @@ export const SiteNavigation = ({
                         })}
                     >
                         <SiteNavigationToggle
+                            ariaLabel="Toggle menu"
                             isActive={isActiveMobileMenu}
                             onToggle={() => toggleMenu(Menu.Topics)}
                             className="SiteNavigationToggle--mobile-menu hide-sm-up"
@@ -149,6 +150,7 @@ export const SiteNavigation = ({
                             <ul>
                                 <li>
                                     <SiteNavigationToggle
+                                        ariaLabel="Toggle topics menu"
                                         isActive={menu === Menu.Topics}
                                         onToggle={() => toggleMenu(Menu.Topics)}
                                         dropdown={
@@ -172,6 +174,7 @@ export const SiteNavigation = ({
                                 </li>
                                 <li className="with-relative-dropdown">
                                     <SiteNavigationToggle
+                                        ariaLabel="Toggle resources menu"
                                         isActive={menu === Menu.Resources}
                                         onToggle={() =>
                                             toggleMenu(Menu.Resources)
@@ -194,6 +197,7 @@ export const SiteNavigation = ({
                                 onActivate={setSearchAsActiveMenu}
                             />
                             <SiteNavigationToggle
+                                ariaLabel="Toggle subscribe menu"
                                 isActive={menu === Menu.Subscribe}
                                 onToggle={() => toggleMenu(Menu.Subscribe)}
                                 dropdown={
diff --git a/site/SiteNavigationToggle.tsx b/site/SiteNavigationToggle.tsx
index debc80c2e5c..2d3ae0e08da 100644
--- a/site/SiteNavigationToggle.tsx
+++ b/site/SiteNavigationToggle.tsx
@@ -4,6 +4,7 @@ import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons"
 import cx from "classnames"
 
 export const SiteNavigationToggle = ({
+    ariaLabel,
     children,
     isActive,
     onToggle,
@@ -11,6 +12,7 @@ export const SiteNavigationToggle = ({
     dropdown,
     className,
 }: {
+    ariaLabel: string
     children: React.ReactNode
     isActive: boolean
     onToggle: () => void
@@ -25,6 +27,7 @@ export const SiteNavigationToggle = ({
             })}
         >
             <button
+                aria-label={ariaLabel}
                 onClick={onToggle}
                 className={cx("SiteNavigationToggle__button", {
                     active: isActive,

From 7533890632b982cc5bf2742339a1c7fb7365e0f9 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Mon, 22 Jan 2024 21:18:08 +0000
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8E=89=20add=20aria=20labels=20to=20a?=
 =?UTF-8?q?ll=20site=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/CookieNotice.tsx                        |  2 ++
 site/DonateForm.tsx                          |  1 +
 site/Feedback.tsx                            | 15 ++++++++++---
 site/NewsletterSubscription.tsx              |  7 +++++-
 site/NotFoundPage.tsx                        |  6 ++++-
 site/SiteNavigationTopics.tsx                |  1 +
 site/blocks/CookiePreferences.tsx            |  1 +
 site/blocks/ExpandableParagraph.tsx          |  1 +
 site/blocks/GalleryArrow.tsx                 |  1 +
 site/blocks/KeyInsights.tsx                  | 23 ++++++++++++++++++--
 site/gdocs/components/BlockErrorBoundary.tsx |  1 +
 site/gdocs/components/ChartStory.tsx         |  2 ++
 site/gdocs/components/TableOfContents.tsx    |  1 +
 site/gdocs/pages/DataInsight.tsx             |  1 +
 site/search/SearchPanel.tsx                  |  5 ++++-
 15 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/site/CookieNotice.tsx b/site/CookieNotice.tsx
index ddc9b220b50..226548dba6f 100644
--- a/site/CookieNotice.tsx
+++ b/site/CookieNotice.tsx
@@ -42,6 +42,7 @@ export const CookieNotice = ({
                 </div>
                 <div className="actions">
                     <button
+                        aria-label="Reject cookies"
                         className="button"
                         onClick={() =>
                             dispatch({
@@ -55,6 +56,7 @@ export const CookieNotice = ({
                         No thanks
                     </button>
                     <button
+                        aria-label="Accept cookies"
                         className="button accept"
                         onClick={() =>
                             dispatch({
diff --git a/site/DonateForm.tsx b/site/DonateForm.tsx
index 3501c61eecc..9813ad40996 100644
--- a/site/DonateForm.tsx
+++ b/site/DonateForm.tsx
@@ -352,6 +352,7 @@ export class DonateForm extends React.Component {
                 />
                 <div className="donation-payment">
                     <button
+                        aria-label="Submit donation"
                         type="submit"
                         className="donation-submit"
                         disabled={this.isLoading || this.isSubmitting}
diff --git a/site/Feedback.tsx b/site/Feedback.tsx
index 38e4cb2fc3b..5f66b920a7c 100644
--- a/site/Feedback.tsx
+++ b/site/Feedback.tsx
@@ -189,7 +189,7 @@ export class FeedbackForm extends React.Component<{
                             messages we are not able to reply to all.
                         </p>
                     </div>
-                    <div className="actions">
+                    <div aria-label="Close feedback form" className="actions">
                         <button onClick={this.onClose}>Close</button>
                     </div>
                 </div>
@@ -276,7 +276,11 @@ export class FeedbackForm extends React.Component<{
                     ) : undefined}
                 </div>
                 <div className="footer">
-                    <button type="submit" disabled={loading}>
+                    <button
+                        aria-label="Submit feedback"
+                        type="submit"
+                        disabled={loading}
+                    >
                         Send message
                     </button>
                 </div>
@@ -330,11 +334,16 @@ export class FeedbackPrompt extends React.Component {
                     </div>
                 </div>
                 {this.isOpen ? (
-                    <button className="prompt" onClick={this.toggleOpen}>
+                    <button
+                        aria-label="Close feedback form"
+                        className="prompt"
+                        onClick={this.toggleOpen}
+                    >
                         <FontAwesomeIcon icon={faTimes} /> Close
                     </button>
                 ) : (
                     <button
+                        aria-label="Open feedback form"
                         className="prompt"
                         data-track-note="page_open_feedback"
                         onClick={this.toggleOpen}
diff --git a/site/NewsletterSubscription.tsx b/site/NewsletterSubscription.tsx
index 0fa8872bc02..3813bd1969e 100644
--- a/site/NewsletterSubscription.tsx
+++ b/site/NewsletterSubscription.tsx
@@ -35,7 +35,11 @@ export const NewsletterSubscription = ({
                 </>
             )}
             {isOpen ? (
-                <button className="prompt" onClick={() => setIsOpen(false)}>
+                <button
+                    aria-label="Close subscription form"
+                    className="prompt"
+                    onClick={() => setIsOpen(false)}
+                >
                     <FontAwesomeIcon icon={faTimes} /> Close
                 </button>
             ) : (
@@ -136,6 +140,7 @@ export const NewsletterSubscriptionForm = ({
                     name="EMAIL"
                 />
                 <button
+                    aria-label="Subscribe to newsletter"
                     type="submit"
                     disabled={!isSubmittable}
                     onClick={() =>
diff --git a/site/NotFoundPage.tsx b/site/NotFoundPage.tsx
index 699bea81f13..dcff09f206a 100644
--- a/site/NotFoundPage.tsx
+++ b/site/NotFoundPage.tsx
@@ -32,7 +32,11 @@ export const NotFoundPage = (props: { baseUrl: string }) => {
                             />
                             <FontAwesomeIcon icon={faSearch} />
                         </div>
-                        <button className="btn" type="submit">
+                        <button
+                            aria-label="Submit search"
+                            className="btn"
+                            type="submit"
+                        >
                             Search
                         </button>
                     </form>
diff --git a/site/SiteNavigationTopics.tsx b/site/SiteNavigationTopics.tsx
index f147a6eb46a..0970b7ddc7a 100644
--- a/site/SiteNavigationTopics.tsx
+++ b/site/SiteNavigationTopics.tsx
@@ -60,6 +60,7 @@ export const SiteNavigationTopics = ({
                     {topics.map((category) => (
                         <li key={category.slug}>
                             <button
+                                aria-label={`Toggle ${category}`}
                                 onClick={() => {
                                     setActiveCategory(category)
                                 }}
diff --git a/site/blocks/CookiePreferences.tsx b/site/blocks/CookiePreferences.tsx
index aa594c390ed..5323c47c1e6 100644
--- a/site/blocks/CookiePreferences.tsx
+++ b/site/blocks/CookiePreferences.tsx
@@ -121,6 +121,7 @@ export const CookiePreferences = ({
                 </div>
             ) : (
                 <button
+                    aria-label="Save cookie preferences"
                     className="owid-button"
                     onClick={() =>
                         dispatch({
diff --git a/site/blocks/ExpandableParagraph.tsx b/site/blocks/ExpandableParagraph.tsx
index 0b0237c2673..0ed303a4d81 100644
--- a/site/blocks/ExpandableParagraph.tsx
+++ b/site/blocks/ExpandableParagraph.tsx
@@ -73,6 +73,7 @@ export const ExpandableParagraph = (
             />
 
             <button
+                aria-label="Expand paragraph"
                 className={cx(
                     "expandable-paragraph__expand-button",
                     `expandable-paragraph__expand-button--${buttonVariant}`
diff --git a/site/blocks/GalleryArrow.tsx b/site/blocks/GalleryArrow.tsx
index e23b90dad7b..1632aea9b7a 100644
--- a/site/blocks/GalleryArrow.tsx
+++ b/site/blocks/GalleryArrow.tsx
@@ -22,6 +22,7 @@ export const GalleryArrow = ({
 
     return (
         <button
+            aria-label={`Go to ${direction} slide`}
             disabled={disabled}
             onClick={onClick}
             className={classes.join(" ")}
diff --git a/site/blocks/KeyInsights.tsx b/site/blocks/KeyInsights.tsx
index 32607dae7f2..e3cbf6ca8e2 100644
--- a/site/blocks/KeyInsights.tsx
+++ b/site/blocks/KeyInsights.tsx
@@ -15,6 +15,11 @@ export const KEY_INSIGHTS_SLIDE_CONTENT_CLASS_NAME = "content"
 
 type scrollVisibilityApiType = React.ContextType<typeof VisibilityContext>
 
+export enum ArrowDirection {
+    prev = "prev",
+    next = "next",
+}
+
 const Thumb = ({
     title,
     onClick,
@@ -27,6 +32,7 @@ const Thumb = ({
 }) => {
     return (
         <button
+            aria-label="Go to slide"
             onClick={onClick}
             role="tab"
             aria-selected={selected}
@@ -206,15 +212,18 @@ const Arrow = ({
     disabled,
     onClick,
     className,
+    direction,
 }: {
     children: React.ReactNode
     disabled: boolean
     onClick: VoidFunction
     className?: string
+    direction: ArrowDirection
 }) => {
     const classes = ["arrow", className]
     return (
         <button
+            aria-label={`Scroll to ${direction} slide`}
             disabled={disabled}
             onClick={onClick}
             className={classes.join(" ")}
@@ -243,7 +252,12 @@ const LeftArrow = () => {
     }, [isFirstItemVisible, visibleItemsWithoutSeparators])
 
     return !disabled ? (
-        <Arrow disabled={false} onClick={() => scrollPrev()} className="left">
+        <Arrow
+            disabled={false}
+            onClick={() => scrollPrev()}
+            className="left"
+            direction={ArrowDirection.prev}
+        >
             <FontAwesomeIcon icon={faAngleRight} flip="horizontal" />
         </Arrow>
     ) : null
@@ -263,7 +277,12 @@ const RightArrow = () => {
     }, [isLastItemVisible, visibleItemsWithoutSeparators])
 
     return !disabled ? (
-        <Arrow disabled={false} onClick={() => scrollNext()} className="right">
+        <Arrow
+            disabled={false}
+            onClick={() => scrollNext()}
+            className="right"
+            direction={ArrowDirection.next}
+        >
             <FontAwesomeIcon icon={faAngleRight} />
         </Arrow>
     ) : null
diff --git a/site/gdocs/components/BlockErrorBoundary.tsx b/site/gdocs/components/BlockErrorBoundary.tsx
index 7f9a1a2ddaa..48c122d6222 100644
--- a/site/gdocs/components/BlockErrorBoundary.tsx
+++ b/site/gdocs/components/BlockErrorBoundary.tsx
@@ -48,6 +48,7 @@ export const BlockErrorFallback = ({
                     {resetErrorBoundary ? (
                         <div>
                             <button
+                                aria-label="Reload content"
                                 style={{ margin: "10px" }}
                                 onClick={resetErrorBoundary}
                             >
diff --git a/site/gdocs/components/ChartStory.tsx b/site/gdocs/components/ChartStory.tsx
index c3b20da06d5..e2f92a37ccb 100644
--- a/site/gdocs/components/ChartStory.tsx
+++ b/site/gdocs/components/ChartStory.tsx
@@ -39,6 +39,7 @@ export default function ChartStory({
                 {`Chart ${currentIndex + 1} of ${items.length}`}
             </div>
             <button
+                aria-label="Go to previous slide"
                 disabled={currentIndex === 0}
                 className={
                     "chart-story__nav-arrow chart-story__nav-arrow--left span-cols-1 align-center "
@@ -58,6 +59,7 @@ export default function ChartStory({
                 {renderSpans(currentSlide.narrative.value)}
             </div>
             <button
+                aria-label="Go to next slide"
                 disabled={currentIndex === maxSlide}
                 className={
                     "chart-story__nav-arrow chart-story__nav-arrow--right span-cols-1 col-start-8 align-center"
diff --git a/site/gdocs/components/TableOfContents.tsx b/site/gdocs/components/TableOfContents.tsx
index addba3d5e46..d5c9499df78 100644
--- a/site/gdocs/components/TableOfContents.tsx
+++ b/site/gdocs/components/TableOfContents.tsx
@@ -33,6 +33,7 @@ export default function TableOfContents({
             data-track-note="toc_toggle"
         >
             <button
+                aria-label="Toggle table of contents"
                 id="toc-menu-button"
                 className="toc-toggle span-cols-6 span-md-cols-8 span-sm-cols-10"
                 onClick={toggleIsOpen}
diff --git a/site/gdocs/pages/DataInsight.tsx b/site/gdocs/pages/DataInsight.tsx
index fb2ab11a461..5baef38095b 100644
--- a/site/gdocs/pages/DataInsight.tsx
+++ b/site/gdocs/pages/DataInsight.tsx
@@ -124,6 +124,7 @@ const DataInsightMeta = (props: {
                     Share this insight
                 </label>
                 <button
+                    aria-label="Copy link to clipboard"
                     id="copy-link-button"
                     className="data-insight-meta__copy-link-button body-3-medium"
                     onClick={() => {
diff --git a/site/search/SearchPanel.tsx b/site/search/SearchPanel.tsx
index f6bfc0d3365..ec929533fbd 100644
--- a/site/search/SearchPanel.tsx
+++ b/site/search/SearchPanel.tsx
@@ -146,7 +146,9 @@ function ShowMore({
         <div className="search-results__show-more-container">
             <em>{message}</em>
             {!isShowingAllResults && (
-                <button onClick={handleClick}>Show more</button>
+                <button aria-label="Show more results" onClick={handleClick}>
+                    Show more
+                </button>
             )}
         </div>
     )
@@ -188,6 +190,7 @@ function Filters({
                         className="search-filters__tab"
                     >
                         <button
+                            aria-label={`Toggle filter results by ${label}`}
                             disabled={hitsLengthByIndexName[key] === 0}
                             onClick={() => handleCategoryFilterClick(key)}
                             className={cx("search-filters__tab-button", {

From dc3bb331d36a5dab005eb26b7ffb98742eb9834c Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Tue, 23 Jan 2024 21:55:04 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=89=20button=20aria=20label=20impr?=
 =?UTF-8?q?ovements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/SiteNavigationTopics.tsx | 2 +-
 site/blocks/GalleryArrow.tsx  | 4 +++-
 site/blocks/KeyInsights.tsx   | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/site/SiteNavigationTopics.tsx b/site/SiteNavigationTopics.tsx
index 0970b7ddc7a..685d7331dc0 100644
--- a/site/SiteNavigationTopics.tsx
+++ b/site/SiteNavigationTopics.tsx
@@ -60,7 +60,7 @@ export const SiteNavigationTopics = ({
                     {topics.map((category) => (
                         <li key={category.slug}>
                             <button
-                                aria-label={`Toggle ${category}`}
+                                aria-label={`Toggle ${category.name} sub-menu`}
                                 onClick={() => {
                                     setActiveCategory(category)
                                 }}
diff --git a/site/blocks/GalleryArrow.tsx b/site/blocks/GalleryArrow.tsx
index 1632aea9b7a..02cde62e1b2 100644
--- a/site/blocks/GalleryArrow.tsx
+++ b/site/blocks/GalleryArrow.tsx
@@ -22,7 +22,9 @@ export const GalleryArrow = ({
 
     return (
         <button
-            aria-label={`Go to ${direction} slide`}
+            aria-label={`Go to ${
+                direction === GalleryArrowDirection.next ? "next" : "previous"
+            } slide`}
             disabled={disabled}
             onClick={onClick}
             className={classes.join(" ")}
diff --git a/site/blocks/KeyInsights.tsx b/site/blocks/KeyInsights.tsx
index e3cbf6ca8e2..0c87482fb25 100644
--- a/site/blocks/KeyInsights.tsx
+++ b/site/blocks/KeyInsights.tsx
@@ -223,7 +223,9 @@ const Arrow = ({
     const classes = ["arrow", className]
     return (
         <button
-            aria-label={`Scroll to ${direction} slide`}
+            aria-label={`Scroll to ${
+                direction === ArrowDirection.next ? "next" : "previous"
+            } slide`}
             disabled={disabled}
             onClick={onClick}
             className={classes.join(" ")}

From 8c657fcd0a6d9a854009723e35cb1db13e6cf034 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Tue, 23 Jan 2024 22:11:47 +0000
Subject: [PATCH 4/4] =?UTF-8?q?=E2=9C=A8=20specify=20insight=20title=20in?=
 =?UTF-8?q?=20key=20insight=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/blocks/KeyInsights.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/blocks/KeyInsights.tsx b/site/blocks/KeyInsights.tsx
index 0c87482fb25..74e36931ac3 100644
--- a/site/blocks/KeyInsights.tsx
+++ b/site/blocks/KeyInsights.tsx
@@ -32,7 +32,7 @@ const Thumb = ({
 }) => {
     return (
         <button
-            aria-label="Go to slide"
+            aria-label={`Go to slide: ${title}`}
             onClick={onClick}
             role="tab"
             aria-selected={selected}