From fc68dbdd4e863dd090e3104f841824f0308c7f85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Mon, 18 Dec 2023 12:31:56 +0100
Subject: [PATCH] Fix accessibility issues reported by PageSpeed tests (#41)

* Set aria-label on all buttons

* Use a <p> instead of <h4> in footer
---
 .../DocumentView/Annotation/AnnotationPopover.tsx        | 3 +++
 src/components/DocumentView/CodeBlock/CopyCodeButton.tsx | 4 +++-
 src/components/Footer/FooterLinksGroup.tsx               | 2 +-
 src/components/Header/HeaderMobileMenu.tsx               | 9 ++++++++-
 src/components/PageFeedback/PageFeedbackForm.tsx         | 1 +
 src/components/Search/SearchButton.tsx                   | 3 +++
 src/intl/translations/en.json                            | 6 +++++-
 7 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/DocumentView/Annotation/AnnotationPopover.tsx b/src/components/DocumentView/Annotation/AnnotationPopover.tsx
index d95dbe85a..3b7154ff5 100644
--- a/src/components/DocumentView/Annotation/AnnotationPopover.tsx
+++ b/src/components/DocumentView/Annotation/AnnotationPopover.tsx
@@ -3,15 +3,18 @@
 import * as Popover from '@radix-ui/react-popover';
 import React from 'react';
 
+import { useLanguage, tString } from '@/intl/client';
 import { tcls } from '@/lib/tailwind';
 
 export function AnnotationPopover(props: { children: React.ReactNode; body: React.ReactNode }) {
     const { children, body } = props;
+    const language = useLanguage();
 
     return (
         <Popover.Root>
             <Popover.Trigger asChild>
                 <button
+                    aria-label={tString(language, 'annotation_button_label')}
                     className={tcls(
                         'decoration-dotted',
                         'decoration-1',
diff --git a/src/components/DocumentView/CodeBlock/CopyCodeButton.tsx b/src/components/DocumentView/CodeBlock/CopyCodeButton.tsx
index c081516ee..721318880 100644
--- a/src/components/DocumentView/CodeBlock/CopyCodeButton.tsx
+++ b/src/components/DocumentView/CodeBlock/CopyCodeButton.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 
+import { t, useLanguage } from '@/intl/client';
 import { ClassValue, tcls } from '@/lib/tailwind';
 
 /**
@@ -11,6 +12,7 @@ import { ClassValue, tcls } from '@/lib/tailwind';
 export function CopyCodeButton(props: { codeId: string; style: ClassValue }) {
     const { codeId, style } = props;
 
+    const language = useLanguage();
     const [copied, setCopied] = React.useState(false);
 
     React.useEffect(() => {
@@ -40,7 +42,7 @@ export function CopyCodeButton(props: { codeId: string; style: ClassValue }) {
 
     return (
         <button onClick={onClick} className={tcls(style)}>
-            {copied ? 'Copied!' : 'Copy'}
+            {t(language, copied ? 'code_copied' : 'code_copy')}
         </button>
     );
 }
diff --git a/src/components/Footer/FooterLinksGroup.tsx b/src/components/Footer/FooterLinksGroup.tsx
index db2c41779..5f23517fd 100644
--- a/src/components/Footer/FooterLinksGroup.tsx
+++ b/src/components/Footer/FooterLinksGroup.tsx
@@ -12,7 +12,7 @@ export function FooterLinksGroup(props: {
 
     return (
         <div className={tcls('flex', 'flex-col', 'gap-3')}>
-            <h4 className={tcls('text-base')}>{group.title}</h4>
+            <p className={tcls('text-base')}>{group.title}</p>
             {group.links.map((link, index) => {
                 return <FooterLink key={index} link={link} context={context} />;
             })}
diff --git a/src/components/Header/HeaderMobileMenu.tsx b/src/components/Header/HeaderMobileMenu.tsx
index db04ae6f0..378312c6c 100644
--- a/src/components/Header/HeaderMobileMenu.tsx
+++ b/src/components/Header/HeaderMobileMenu.tsx
@@ -1,9 +1,12 @@
 'use client';
 
 import { IconMenu } from '@/components/icons/IconMenu';
+import { useLanguage, tString } from '@/intl/client';
 import { tcls } from '@/lib/tailwind';
 
 export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLButtonElement>>) {
+    const language = useLanguage();
+
     const toggleNavigation = () => {
         if (document.body.classList.contains('navigation-visible')) {
             document.body.classList.remove('navigation-visible');
@@ -12,7 +15,11 @@ export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLB
         }
     };
     return (
-        <button {...props} onClick={toggleNavigation}>
+        <button
+            {...props}
+            aria-label={tString(language, 'table_of_contents_button_label')}
+            onClick={toggleNavigation}
+        >
             <IconMenu
                 className={tcls(
                     'w-8',
diff --git a/src/components/PageFeedback/PageFeedbackForm.tsx b/src/components/PageFeedback/PageFeedbackForm.tsx
index b765ba3eb..8981d4831 100644
--- a/src/components/PageFeedback/PageFeedbackForm.tsx
+++ b/src/components/PageFeedback/PageFeedbackForm.tsx
@@ -73,6 +73,7 @@ function RatingButton(props: { emoji: string; label: string; onClick: () => void
                 'focus:ring-offset-2',
                 'focus:ring-offset-white',
             )}
+            aria-label={label}
             title={label}
             onClick={onClick}
         >
diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx
index d2632f09f..949c9046c 100644
--- a/src/components/Search/SearchButton.tsx
+++ b/src/components/Search/SearchButton.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { IconSearch } from '@/components/icons/IconSearch';
+import { useLanguage, tString } from '@/intl/client';
 import { ClassValue, tcls } from '@/lib/tailwind';
 
 import { useSearch } from './useSearch';
@@ -11,6 +12,7 @@ import { useSearch } from './useSearch';
 export function SearchButton(props: { children?: React.ReactNode; style?: ClassValue }) {
     const { style, children } = props;
 
+    const language = useLanguage();
     const [, setSearchState] = useSearch();
 
     const onClick = () => {
@@ -23,6 +25,7 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
     return (
         <button
             onClick={onClick}
+            aria-label={tString(language, 'search')}
             className={tcls(
                 'flex',
                 'flex-1',
diff --git a/src/intl/translations/en.json b/src/intl/translations/en.json
index efaa779f0..72f58ec3b 100644
--- a/src/intl/translations/en.json
+++ b/src/intl/translations/en.json
@@ -14,5 +14,9 @@
     "was_this_helpful_positive": "Yes, it was!",
     "was_this_helpful_neutral": "Not sure",
     "was_this_helpful_negative": "No",
-    "was_this_helpful_thank_you": "Thank you for the feedback!"
+    "was_this_helpful_thank_you": "Thank you for the feedback!",
+    "annotation_button_label": "Open annotation",
+    "code_copied": "Copied!",
+    "code_copy": "Copy",
+    "table_of_contents_button_label": "Open table of contents"
 }