Fix accessibility issues reported by PageSpeed tests (#41)

* Set aria-label on all buttons

* Use a <p> instead of <h4> in footer

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',

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>
     );
 }

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} />;
             })}

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',

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}
         >

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',

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"
 }