From ff4350f44c01a903f0f92d20c8b2cfc77dad98f7 Mon Sep 17 00:00:00 2001
From: "D. Ror." <imnasnainaec@gmail.com>
Date: Tue, 27 Aug 2024 09:34:20 -0400
Subject: [PATCH] Add data-testid, aria-label to general buttons, dialogs
 (#3299)

---
 src/components/AppBar/NavigationButtons.tsx   |  1 +
 src/components/Buttons/CloseButton.tsx        |  6 +++++-
 .../Buttons/DeleteButtonWithDialog.tsx        |  2 ++
 src/components/Buttons/FileInputButton.tsx    |  2 +-
 src/components/Buttons/FlagButton.tsx         |  8 ++++++--
 .../Buttons/IconButtonWithTooltip.tsx         |  5 ++++-
 src/components/Buttons/NoteButton.tsx         |  5 ++++-
 src/components/Buttons/PartOfSpeechButton.tsx |  2 ++
 src/components/Buttons/UndoButton.tsx         |  5 ++++-
 .../EntryCellComponents/DeleteEntry.tsx       |  3 +++
 src/components/Dialogs/ButtonConfirmation.tsx | 15 ++++++++++++---
 .../Dialogs/CancelConfirmDialog.tsx           | 11 ++++++++++-
 .../Dialogs/DeleteEditTextDialog.tsx          | 19 +++++++++++++++++--
 src/components/Dialogs/EditTextDialog.tsx     | 11 ++++++++++-
 src/components/Dialogs/RecordAudioDialog.tsx  |  8 +++++++-
 src/components/Dialogs/SubmitTextDialog.tsx   | 11 ++++++++++-
 src/components/Dialogs/UploadImageDialog.tsx  |  8 +++++++-
 src/components/Dialogs/ViewImageDialog.tsx    | 14 +++++++++++---
 src/components/GoalTimeline/GoalList.tsx      |  2 +-
 src/components/LandingPage/LandingButtons.tsx | 11 +++++++----
 src/components/ProjectExport/ExportButton.tsx |  2 +-
 21 files changed, 125 insertions(+), 26 deletions(-)

diff --git a/src/components/AppBar/NavigationButtons.tsx b/src/components/AppBar/NavigationButtons.tsx
index e7fa37d740..39c5765840 100644
--- a/src/components/AppBar/NavigationButtons.tsx
+++ b/src/components/AppBar/NavigationButtons.tsx
@@ -74,6 +74,7 @@ function NavButton(props: NavButtonProps): ReactElement {
 
   return (
     <Button
+      data-testid={props.buttonId}
       id={props.buttonId}
       onClick={() => navigate(props.targetPath)}
       color="inherit"
diff --git a/src/components/Buttons/CloseButton.tsx b/src/components/Buttons/CloseButton.tsx
index 073d95552c..c2b0614325 100644
--- a/src/components/Buttons/CloseButton.tsx
+++ b/src/components/Buttons/CloseButton.tsx
@@ -3,6 +3,8 @@ import { IconButton } from "@mui/material";
 import { CSSProperties, ReactElement } from "react";
 
 interface CloseButtonProps {
+  buttonId?: string;
+  buttonLabel?: string;
   close: () => void;
 }
 
@@ -15,7 +17,9 @@ export default function CloseButton(props: CloseButtonProps): ReactElement {
 
   return (
     <IconButton
-      aria-label="close"
+      aria-label={props.buttonLabel ?? "Close"}
+      data-testid={props.buttonId}
+      id={props.buttonId}
       onClick={props.close}
       style={closeButtonStyle}
     >
diff --git a/src/components/Buttons/DeleteButtonWithDialog.tsx b/src/components/Buttons/DeleteButtonWithDialog.tsx
index 31af43f346..be9bbe1d5d 100644
--- a/src/components/Buttons/DeleteButtonWithDialog.tsx
+++ b/src/components/Buttons/DeleteButtonWithDialog.tsx
@@ -8,6 +8,7 @@ interface DeleteButtonWithDialogProps {
   buttonId: string;
   buttonIdCancel?: string;
   buttonIdConfirm?: string;
+  buttonLabel?: string;
   delete: () => void | Promise<void>;
   disabled?: boolean;
   textId: string;
@@ -28,6 +29,7 @@ export default function DeleteButtonWithDialog(
     <>
       <IconButtonWithTooltip
         buttonId={props.buttonId}
+        buttonLabel={props.buttonLabel ?? "Delete"}
         icon={<Delete />}
         onClick={props.disabled ? undefined : () => setOpen(true)}
         textId={props.tooltipTextId || props.textId}
diff --git a/src/components/Buttons/FileInputButton.tsx b/src/components/Buttons/FileInputButton.tsx
index 75e75ed863..cc78fe59dc 100644
--- a/src/components/Buttons/FileInputButton.tsx
+++ b/src/components/Buttons/FileInputButton.tsx
@@ -5,8 +5,8 @@ import { ReactElement, ReactNode } from "react";
 interface BrowseProps {
   updateFile: (file: File) => void;
   accept?: string;
+  buttonProps?: ButtonProps & { "data-testid"?: string };
   children?: ReactNode;
-  buttonProps?: ButtonProps;
 }
 
 // This button links to a set of functions
diff --git a/src/components/Buttons/FlagButton.tsx b/src/components/Buttons/FlagButton.tsx
index b759db86d3..22408f4944 100644
--- a/src/components/Buttons/FlagButton.tsx
+++ b/src/components/Buttons/FlagButton.tsx
@@ -6,8 +6,9 @@ import { IconButtonWithTooltip } from "components/Buttons";
 import { DeleteEditTextDialog } from "components/Dialogs";
 
 interface FlagButtonProps {
-  flag: Flag;
   buttonId?: string;
+  buttonLabel?: string;
+  flag: Flag;
   updateFlag?: (flag: Flag) => void;
 }
 
@@ -41,6 +42,8 @@ export default function FlagButton(props: FlagButtonProps): ReactElement {
   return (
     <>
       <IconButtonWithTooltip
+        buttonId={props.buttonId}
+        buttonLabel={props.buttonLabel ?? "Flag"}
         icon={
           active ? (
             <FlagFilled sx={{ color: (t) => t.palette.error.main }} />
@@ -54,7 +57,6 @@ export default function FlagButton(props: FlagButtonProps): ReactElement {
         textId={active ? "flags.edit" : "flags.add"}
         size="small"
         onClick={props.updateFlag ? () => setOpen(true) : undefined}
-        buttonId={props.buttonId ?? "flag-button"}
         side="top"
       />
       {props.updateFlag && (
@@ -65,6 +67,8 @@ export default function FlagButton(props: FlagButtonProps): ReactElement {
           close={() => setOpen(false)}
           updateText={updateFlag}
           onDelete={removeFlag}
+          buttonIdCancel="flag-cancel"
+          buttonIdClear="flag-clear"
           buttonIdDelete="flag-remove"
           buttonIdSave="flag-save"
           buttonTextIdDelete="flags.remove"
diff --git a/src/components/Buttons/IconButtonWithTooltip.tsx b/src/components/Buttons/IconButtonWithTooltip.tsx
index 0809a68a72..c415bc00c9 100644
--- a/src/components/Buttons/IconButtonWithTooltip.tsx
+++ b/src/components/Buttons/IconButtonWithTooltip.tsx
@@ -3,6 +3,8 @@ import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 interface IconButtonWithTooltipProps {
+  buttonId?: string;
+  buttonLabel?: string;
   disabled?: boolean;
   icon: ReactElement;
   text?: ReactNode;
@@ -10,7 +12,6 @@ interface IconButtonWithTooltipProps {
   textId?: string;
   size?: "large" | "medium" | "small";
   onClick?: MouseEventHandler<HTMLButtonElement>;
-  buttonId?: string;
   side?: "bottom" | "left" | "right" | "top";
 }
 
@@ -26,6 +27,8 @@ export default function IconButtonWithTooltip(
     >
       <span>
         <IconButton
+          aria-label={props.buttonLabel}
+          data-testid={props.buttonId}
           onClick={props.onClick}
           size={props.size || "medium"}
           id={props.buttonId}
diff --git a/src/components/Buttons/NoteButton.tsx b/src/components/Buttons/NoteButton.tsx
index dc1307336a..acffdbf41b 100644
--- a/src/components/Buttons/NoteButton.tsx
+++ b/src/components/Buttons/NoteButton.tsx
@@ -6,6 +6,7 @@ import { EditTextDialog } from "components/Dialogs";
 
 interface NoteButtonProps {
   buttonId?: string;
+  buttonLabel?: string;
   disabled?: boolean;
   /** If `noteText` is empty and `updateNote` defined,
    * the button will have default add-note hover text. */
@@ -20,7 +21,8 @@ export default function NoteButton(props: NoteButtonProps): ReactElement {
   return (
     <>
       <IconButtonWithTooltip
-        buttonId={props.buttonId ?? "entry-note-button"}
+        buttonId={props.buttonId}
+        buttonLabel={props.buttonLabel ?? "Note"}
         disabled={props.disabled}
         icon={
           props.noteText ? (
@@ -46,6 +48,7 @@ export default function NoteButton(props: NoteButtonProps): ReactElement {
         close={() => setNoteOpen(false)}
         updateText={props.updateNote ?? (() => {})}
         buttonIdCancel="note-edit-cancel"
+        buttonIdClear="note-edit-clear"
         buttonIdConfirm="note-edit-confirm"
         textFieldId="note-text-field"
       />
diff --git a/src/components/Buttons/PartOfSpeechButton.tsx b/src/components/Buttons/PartOfSpeechButton.tsx
index cd8359db1f..fa923f9de8 100644
--- a/src/components/Buttons/PartOfSpeechButton.tsx
+++ b/src/components/Buttons/PartOfSpeechButton.tsx
@@ -10,6 +10,7 @@ import { getGramCatGroupColor } from "utilities/wordUtilities";
 
 interface PartOfSpeechButtonProps {
   buttonId?: string;
+  buttonLabel?: string;
   gramInfo: GrammaticalInfo;
   onClick?: () => void;
   onlyIcon?: boolean;
@@ -38,6 +39,7 @@ export default function PartOfSpeechButton(
   const CatGroupButton = (): ReactElement => (
     <IconButtonWithTooltip
       buttonId={props.buttonId}
+      buttonLabel={props.buttonLabel ?? "Part of speech"}
       icon={<Hexagon fontSize="small" sx={{ color }} />}
       onClick={props.onClick}
       side="top"
diff --git a/src/components/Buttons/UndoButton.tsx b/src/components/Buttons/UndoButton.tsx
index 402eb146f3..72d3d79543 100644
--- a/src/components/Buttons/UndoButton.tsx
+++ b/src/components/Buttons/UndoButton.tsx
@@ -8,6 +8,7 @@ interface UndoButtonProps {
   buttonIdEnabled?: string;
   buttonIdCancel?: string;
   buttonIdConfirm?: string;
+  buttonLabelEnabled?: string;
   textIdDialog: string;
   textIdDisabled: string;
   textIdEnabled: string;
@@ -34,9 +35,11 @@ export default function UndoButton(props: UndoButtonProps): ReactElement {
       {isUndoEnabled ? (
         <div>
           <Button
-            variant="outlined"
+            aria-label={props.buttonLabelEnabled ?? "Undo"}
+            data-testid={props.buttonIdEnabled}
             id={props.buttonIdEnabled}
             onClick={() => setUndoDialogOpen(true)}
+            variant="outlined"
           >
             {t(props.textIdEnabled)}
           </Button>
diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx
index 6b769482f2..49a3963ec7 100644
--- a/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx
+++ b/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx
@@ -8,6 +8,7 @@ import { CancelConfirmDialog } from "components/Dialogs";
 interface DeleteEntryProps {
   removeEntry: () => void;
   buttonId: string;
+  buttonLabel?: string;
   // confirmId is the translation id for the text of the delete confirmation popup;
   // if no confirmId is specified, then there is no popup
   // and deletion will happen when the button is pressed
@@ -34,6 +35,8 @@ export default function DeleteEntry(props: DeleteEntryProps): ReactElement {
     <>
       <Tooltip title={t("addWords.deleteRow")} placement="top">
         <IconButton
+          aria-label={props.buttonLabel ?? "Delete entry"}
+          data-testid={props.buttonId}
           disabled={props.disabled}
           tabIndex={-1}
           size="small"
diff --git a/src/components/Dialogs/ButtonConfirmation.tsx b/src/components/Dialogs/ButtonConfirmation.tsx
index e9ea3a16b0..3521e8a4d6 100644
--- a/src/components/Dialogs/ButtonConfirmation.tsx
+++ b/src/components/Dialogs/ButtonConfirmation.tsx
@@ -19,6 +19,8 @@ interface ButtonConfirmationProps {
   onConfirm: () => void | Promise<void>;
   buttonIdClose?: string;
   buttonIdConfirm?: string;
+  buttonLabelClose?: string;
+  buttonLabelConfirm?: string;
 }
 
 /**
@@ -52,16 +54,23 @@ export default function ButtonConfirmation(
       </DialogContent>
       <DialogActions>
         <Button
-          onClick={props.onClose}
-          variant="outlined"
+          aria-label={props.buttonLabelClose}
           color="primary"
+          data-testid={props.buttonIdClose}
           id={props.buttonIdClose}
+          onClick={props.onClose}
+          variant="outlined"
         >
           {t("buttons.cancel")}
         </Button>
         <LoadingButton
+          buttonProps={{
+            "aria-label": props.buttonLabelConfirm,
+            "data-testid": props.buttonIdConfirm,
+            id: props.buttonIdConfirm,
+            onClick: onConfirm,
+          }}
           loading={loading}
-          buttonProps={{ id: props.buttonIdConfirm, onClick: onConfirm }}
         >
           {t("buttons.confirm")}
         </LoadingButton>
diff --git a/src/components/Dialogs/CancelConfirmDialog.tsx b/src/components/Dialogs/CancelConfirmDialog.tsx
index a45585befa..5d3f427a27 100644
--- a/src/components/Dialogs/CancelConfirmDialog.tsx
+++ b/src/components/Dialogs/CancelConfirmDialog.tsx
@@ -18,6 +18,8 @@ interface CancelConfirmDialogProps {
   handleConfirm: () => Promise<void> | void;
   buttonIdCancel?: string;
   buttonIdConfirm?: string;
+  buttonLabelCancel?: string;
+  buttonLabelConfirm?: string;
 }
 
 /**
@@ -52,7 +54,9 @@ export default function CancelConfirmDialog(
       </DialogContent>
       <DialogActions>
         <Button
+          aria-label={props.buttonLabelCancel}
           color="primary"
+          data-testid={props.buttonIdCancel}
           disabled={loading}
           id={props.buttonIdCancel}
           onClick={props.handleCancel}
@@ -61,7 +65,12 @@ export default function CancelConfirmDialog(
           {t("buttons.cancel")}
         </Button>
         <LoadingButton
-          buttonProps={{ id: props.buttonIdConfirm, onClick: onConfirm }}
+          buttonProps={{
+            "aria-label": props.buttonLabelConfirm,
+            "data-testid": props.buttonIdConfirm,
+            id: props.buttonIdConfirm,
+            onClick: onConfirm,
+          }}
           loading={loading}
         >
           {t("buttons.confirm")}
diff --git a/src/components/Dialogs/DeleteEditTextDialog.tsx b/src/components/Dialogs/DeleteEditTextDialog.tsx
index 75e8aff4de..03241e93f9 100644
--- a/src/components/Dialogs/DeleteEditTextDialog.tsx
+++ b/src/components/Dialogs/DeleteEditTextDialog.tsx
@@ -23,6 +23,8 @@ interface DeleteEditTextDialogProps {
   close: () => void;
   updateText: (newText: string) => void | Promise<void>;
   onDelete?: () => void;
+  buttonIdCancel?: string;
+  buttonIdClear?: string;
   buttonIdDelete?: string;
   buttonIdSave?: string;
   buttonTextIdDelete?: string;
@@ -78,7 +80,12 @@ export default function DeleteEditTextDialog(
   const endAdornment = (
     <InputAdornment position="end">
       <Tooltip title={t("buttons.clearText")} placement={"left"}>
-        <IconButton size="small" onClick={() => setText("")}>
+        <IconButton
+          data-testid={props.buttonIdClear}
+          id={props.buttonIdClear}
+          onClick={() => setText("")}
+          size="small"
+        >
           <Backspace />
         </IconButton>
       </Tooltip>
@@ -98,6 +105,8 @@ export default function DeleteEditTextDialog(
           <IconButton
             size="small"
             aria-label="close"
+            data-testid={props.buttonIdCancel}
+            id={props.buttonIdCancel}
             onClick={onCancel}
             style={{ position: "absolute", right: 4, top: 4 }}
           >
@@ -109,6 +118,7 @@ export default function DeleteEditTextDialog(
         <TextField
           variant="standard"
           autoFocus
+          data-testid={props.textFieldId}
           value={text}
           onChange={(event) => setText(event.target.value)}
           onKeyPress={confirmIfEnter}
@@ -121,13 +131,18 @@ export default function DeleteEditTextDialog(
           onClick={onDelete}
           variant="outlined"
           color="primary"
+          data-testid={props.buttonIdDelete}
           id={props.buttonIdDelete}
         >
           {t(props.buttonTextIdDelete ?? "buttons.delete")}
         </Button>
         <LoadingButton
+          buttonProps={{
+            "data-testid": props.buttonIdSave,
+            id: props.buttonIdSave,
+            onClick: onSave,
+          }}
           loading={loading}
-          buttonProps={{ id: props.buttonIdSave, onClick: onSave }}
         >
           {t(props.buttonTextIdSave ?? "buttons.save")}
         </LoadingButton>
diff --git a/src/components/Dialogs/EditTextDialog.tsx b/src/components/Dialogs/EditTextDialog.tsx
index 0cbe009358..eae5a8c087 100644
--- a/src/components/Dialogs/EditTextDialog.tsx
+++ b/src/components/Dialogs/EditTextDialog.tsx
@@ -25,6 +25,7 @@ interface EditTextDialogProps {
   close: () => void;
   updateText: (newText: string) => void | Promise<void>;
   buttonIdCancel?: string;
+  buttonIdClear?: string;
   buttonIdConfirm?: string;
   buttonTextIdCancel?: string;
   buttonTextIdConfirm?: string;
@@ -73,7 +74,12 @@ export default function EditTextDialog(
 
   const endAdornment = (
     <InputAdornment position="end">
-      <IconButton onClick={() => setText("")} size="large">
+      <IconButton
+        data-testid={props.buttonIdClear}
+        id={props.buttonIdClear}
+        onClick={() => setText("")}
+        size="large"
+      >
         <Clear />
       </IconButton>
     </InputAdornment>
@@ -91,6 +97,7 @@ export default function EditTextDialog(
         <TextField
           variant="standard"
           autoFocus
+          data-testid={props.textFieldId}
           value={text}
           onChange={(event) => setText(event.target.value)}
           onKeyPress={confirmIfEnter}
@@ -103,6 +110,7 @@ export default function EditTextDialog(
           onClick={onCancel}
           variant="outlined"
           color="primary"
+          data-testid={props.buttonIdCancel}
           id={props.buttonIdCancel}
         >
           {t(props.buttonTextIdCancel ?? "buttons.cancel")}
@@ -111,6 +119,7 @@ export default function EditTextDialog(
           onClick={onConfirm}
           variant="outlined"
           color="primary"
+          data-testid={props.buttonIdConfirm}
           id={props.buttonIdConfirm}
         >
           {t(props.buttonTextIdConfirm ?? "buttons.confirm")}
diff --git a/src/components/Dialogs/RecordAudioDialog.tsx b/src/components/Dialogs/RecordAudioDialog.tsx
index 218ab759ce..a8e118a226 100644
--- a/src/components/Dialogs/RecordAudioDialog.tsx
+++ b/src/components/Dialogs/RecordAudioDialog.tsx
@@ -7,6 +7,8 @@ import AudioRecorder from "components/Pronunciations/AudioRecorder";
 
 interface RecordAudioDialogProps {
   audioId: string;
+  buttonIdClose?: string;
+  buttonLabelClose?: string;
   close: () => void;
   open: boolean;
   titleId: string;
@@ -23,7 +25,11 @@ export default function RecordAudioDialog(
       <DialogTitle>
         {t(props.titleId)}
         <Icon />
-        <CloseButton close={props.close} />
+        <CloseButton
+          buttonId={props.buttonIdClose}
+          buttonLabel={props.buttonLabelClose}
+          close={props.close}
+        />
       </DialogTitle>
       <DialogContent>
         <AudioRecorder
diff --git a/src/components/Dialogs/SubmitTextDialog.tsx b/src/components/Dialogs/SubmitTextDialog.tsx
index c05cba57b1..60d8ce5eef 100644
--- a/src/components/Dialogs/SubmitTextDialog.tsx
+++ b/src/components/Dialogs/SubmitTextDialog.tsx
@@ -19,6 +19,7 @@ interface EditTextDialogProps {
   close: () => void;
   submitText: (newText: string) => void | Promise<void>;
   buttonIdCancel?: string;
+  buttonIdClear?: string;
   buttonIdConfirm?: string;
   buttonTextIdCancel?: string;
   buttonTextIdConfirm?: string;
@@ -62,7 +63,12 @@ export default function SubmitTextDialog(
 
   const endAdornment = (
     <InputAdornment position="end">
-      <IconButton onClick={() => setText("")} size="large">
+      <IconButton
+        data-testid={props.buttonIdClear}
+        id={props.buttonIdClear}
+        onClick={() => setText("")}
+        size="large"
+      >
         <Clear />
       </IconButton>
     </InputAdornment>
@@ -80,6 +86,7 @@ export default function SubmitTextDialog(
         <TextField
           variant="standard"
           autoFocus
+          data-testid={props.textFieldId}
           value={text}
           onChange={(event) => setText(event.target.value)}
           onKeyPress={confirmIfEnter}
@@ -92,6 +99,7 @@ export default function SubmitTextDialog(
           onClick={onCancel}
           variant="outlined"
           color="primary"
+          data-testid={props.buttonIdCancel}
           id={props.buttonIdCancel}
         >
           {t(props.buttonTextIdCancel ?? "buttons.cancel")}
@@ -100,6 +108,7 @@ export default function SubmitTextDialog(
           onClick={onConfirm}
           variant="outlined"
           color="primary"
+          data-testid={props.buttonIdConfirm}
           id={props.buttonIdConfirm}
         >
           {t(props.buttonTextIdConfirm ?? "buttons.confirm")}
diff --git a/src/components/Dialogs/UploadImageDialog.tsx b/src/components/Dialogs/UploadImageDialog.tsx
index ee928170cd..a9f59bee7d 100644
--- a/src/components/Dialogs/UploadImageDialog.tsx
+++ b/src/components/Dialogs/UploadImageDialog.tsx
@@ -6,6 +6,8 @@ import { CloseButton } from "components/Buttons";
 import UploadImage from "components/Dialogs/UploadImage";
 
 interface UploadImageDialogProps {
+  buttonIdClose?: string;
+  buttonLabelClose?: string;
   close: () => void;
   open: boolean;
   titleId: string;
@@ -22,7 +24,11 @@ export default function UploadImageDialog(
       <DialogTitle>
         {t(props.titleId)}
         <Icon />
-        <CloseButton close={props.close} />
+        <CloseButton
+          buttonId={props.buttonIdClose}
+          buttonLabel={props.buttonLabelClose}
+          close={props.close}
+        />
       </DialogTitle>
       <DialogContent>
         <UploadImage
diff --git a/src/components/Dialogs/ViewImageDialog.tsx b/src/components/Dialogs/ViewImageDialog.tsx
index e6d6e8ea1c..88e23b474d 100644
--- a/src/components/Dialogs/ViewImageDialog.tsx
+++ b/src/components/Dialogs/ViewImageDialog.tsx
@@ -5,7 +5,10 @@ import { CloseButton, DeleteButtonWithDialog } from "components/Buttons";
 
 interface ViewImageDialogProps {
   close: () => void;
-  deleteButtonId?: string;
+  buttonIdClose?: string;
+  buttonIdDelete?: string;
+  buttonLabelClose?: string;
+  buttonLabelDelete?: string;
   deleteImage?: () => void | Promise<void>;
   deleteTextId?: string;
   imgSrc: string;
@@ -28,14 +31,19 @@ export default function ViewImageDialog(
       <DialogTitle>
         {props.title}
         <Icon />
-        <CloseButton close={props.close} />
+        <CloseButton
+          buttonId={props.buttonIdClose}
+          buttonLabel={props.buttonLabelClose}
+          close={props.close}
+        />
       </DialogTitle>
       <DialogContent>
         <img src={props.imgSrc || undefined} />
         <Grid container justifyContent="flex-end">
           <Grid item>
             <DeleteButtonWithDialog
-              buttonId={props.deleteButtonId || "delete-image"}
+              buttonId={props.buttonIdDelete ?? "delete-image"}
+              buttonLabel={props.buttonLabelDelete ?? "Delete image"}
               delete={handleDelete}
               textId={props.deleteTextId ?? ""}
             />
diff --git a/src/components/GoalTimeline/GoalList.tsx b/src/components/GoalTimeline/GoalList.tsx
index 6817aef2a5..6108a53bb2 100644
--- a/src/components/GoalTimeline/GoalList.tsx
+++ b/src/components/GoalTimeline/GoalList.tsx
@@ -101,7 +101,7 @@ function buttonStyle(orientation: Orientation, size: number): CSSProperties {
 }
 
 interface GoalTileProps {
-  buttonProps?: ButtonProps;
+  buttonProps?: ButtonProps & { "data-testid"?: string };
   goal?: Goal;
   orientation: Orientation;
   size: number;
diff --git a/src/components/LandingPage/LandingButtons.tsx b/src/components/LandingPage/LandingButtons.tsx
index 5295d8c34e..2ee53c862b 100644
--- a/src/components/LandingPage/LandingButtons.tsx
+++ b/src/components/LandingPage/LandingButtons.tsx
@@ -67,11 +67,12 @@ export function SignUpButton(props: SignUpButtonProps): ReactElement {
 }
 
 interface LandingButtonProps {
-  onClick: () => void;
-  textId: string;
   buttonId: string;
+  buttonLabel?: string;
   filled?: boolean;
   icon?: ReactElement;
+  onClick: () => void;
+  textId: string;
 }
 
 /** Button for the Landing Page. (Prop `icon` overrides `textId`.) */
@@ -80,14 +81,16 @@ function LandingButton(props: LandingButtonProps): ReactElement {
 
   return (
     <Button
-      variant={props.filled ? "contained" : "outlined"}
+      aria-label={props.buttonLabel}
       color="primary"
+      data-testid={props.buttonId}
+      id={props.buttonId}
       onClick={props.onClick}
       style={{
         height: buttonHeight,
         width: props.icon ? iconButtonWidth : buttonWidth,
       }}
-      id={props.buttonId}
+      variant={props.filled ? "contained" : "outlined"}
     >
       {props.icon || (
         <Typography variant="subtitle1">{t(props.textId)}</Typography>
diff --git a/src/components/ProjectExport/ExportButton.tsx b/src/components/ProjectExport/ExportButton.tsx
index b362c98eb1..30e696c9a9 100644
--- a/src/components/ProjectExport/ExportButton.tsx
+++ b/src/components/ProjectExport/ExportButton.tsx
@@ -12,7 +12,7 @@ import { type StoreState } from "rootRedux/types";
 
 interface ExportButtonProps {
   projectId: string;
-  buttonProps?: ButtonProps;
+  buttonProps?: ButtonProps & { "data-testid"?: string };
 }
 
 /** A button for exporting project to Lift file */