Make use of ProtoButton from appkit

src/cssStyles.tsx

@@ -34,6 +34,10 @@ export const globalStyle = (theme: Theme) => css({
     // Makes the body span to the bottom of the page
     minHeight: "100vh",
   },
+  // Some elements not inheriting fonts is a really confusing browser default.
+  "input, button, textarea, select": {
+    font: "inherit",
+  },
 });
 
 
@@ -46,7 +50,6 @@ export const BREAKPOINTS = APPKIT_CONFIG.breakpoints;
  */
 export const basicButtonStyle = (theme: Theme) => css({
   borderRadius: "5px",
-  cursor: "pointer",
   "&:hover": {
     backgroundColor: `${theme.button_color}`,
     color: `${theme.inverted_text}`,

src/main/CuttingActions.tsx

@@ -30,6 +30,7 @@ import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
 import { Slider } from "@mui/material";
 import { useHotkeys } from "react-hotkeys-hook";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Defines the different actions a user can perform while in cutting mode
@@ -52,7 +53,7 @@ const CuttingActions: React.FC = () => {
     actionWithPayload?: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload?: any,
-    ref?: React.RefObject<HTMLDivElement>
+    ref?: React.RefObject<HTMLButtonElement>
   ) => {
     if (action) {
       dispatch(action());
@@ -196,8 +197,6 @@ const CuttingActions: React.FC = () => {
  */
 const cuttingActionButtonStyle = css({
   padding: "16px",
-  // boxShadow: `${theme.boxShadow}`,
-  // background: `${theme.element_bg}`
 });
 
 interface cuttingActionsButtonInterface {
@@ -208,7 +207,7 @@ interface cuttingActionsButtonInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLDivElement>,
+    ref?: React.RefObject<HTMLButtonElement>,
   ) => void,
   action: ActionCreatorWithoutPayload<string>,
   actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
@@ -232,24 +231,20 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({
   tooltip,
   ariaLabelText,
 }) => {
-  const ref = React.useRef<HTMLDivElement>(null);
+  const ref = React.useRef<HTMLButtonElement>(null);
   const theme = useTheme();
 
   return (
     <ThemedTooltip title={tooltip}>
-      <div css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
-        ref={ref}
-        role="button" tabIndex={0} aria-label={ariaLabelText}
+      <ProtoButton
+        {...{ ref }}
+        aria-label={ariaLabelText}
         onClick={() => actionHandler(action, actionWithPayload, payload, ref)}
-        onKeyDown={(event: React.KeyboardEvent) => {
-          if (event.key === " " || event.key === "Enter") {
-            actionHandler(action, actionWithPayload, payload);
-          }
-        }}
+        css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
       >
         <Icon />
         <span css={undisplay(BREAKPOINTS.medium)}>{actionName}</span>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };
@@ -260,7 +255,7 @@ interface markAsDeleteButtonInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLDivElement>
+    ref?: React.RefObject<HTMLButtonElement>
   ) => void,
   action: ActionCreatorWithoutPayload<string>,
   hotKeyName: string,
@@ -276,28 +271,23 @@ const MarkAsDeletedButton: React.FC<markAsDeleteButtonInterface> = ({
 }) => {
   const { t } = useTranslation();
   const isCurrentSegmentAlive = useAppSelector(selectIsCurrentSegmentAlive);
-  const ref = React.useRef<HTMLDivElement>(null);
+  const ref = React.useRef<HTMLButtonElement>(null);
 
   const theme = useTheme();
 
   return (
     <ThemedTooltip title={t("cuttingActions.delete-restore-tooltip", { hotkeyName: hotKeyName })}>
-      <div css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
-        ref={ref}
-        role="button" tabIndex={0}
+      <ProtoButton
+        {...{ ref }}
         aria-label={t("cuttingActions.delete-restore-tooltip-aria", { hotkeyName: hotKeyName })}
         onClick={() => actionHandler(action, undefined, undefined, ref)}
-        onKeyDown={(event: React.KeyboardEvent) => {
-          if (event.key === " " || event.key === "Enter") {
-            actionHandler(action, undefined, undefined);
-          }
-        }}
+        css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
       >
         {isCurrentSegmentAlive ? <LuTrash /> : <TrashRestore css={customIconStyle} /> }
         <span css={undisplay(BREAKPOINTS.medium)}>
           {isCurrentSegmentAlive ? t("cuttingActions.delete-button") : t("cuttingActions.restore-button")}
         </span>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };
@@ -308,7 +298,7 @@ interface ZoomSliderInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLDivElement>,
+    ref?: React.RefObject<HTMLButtonElement>,
   ) => void,
   tooltip: string,
   ariaLabelText: string,

src/main/Discard.tsx

@@ -12,6 +12,7 @@ import { PageButton } from "./Finish";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Shown if the user wishes to abort.
@@ -58,17 +59,13 @@ const DiscardButton: React.FC = () => {
   };
 
   return (
-    <div css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
-      role="button" tabIndex={0}
+    <ProtoButton
       onClick={discard}
-      onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === " " || event.key === "Enter") {
-          discard();
-        }
-      }}>
+      css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
+    >
       <LuXCircle />
       <span>{t("discard.confirm-button")}</span>
-    </div>
+    </ProtoButton>
   );
 };
 

src/main/Finish.tsx

@@ -18,6 +18,7 @@ import { selectFinishState, selectPageNumber, setPageNumber } from "../redux/fin
 import { useTheme } from "../themes";
 import { settings } from "../config";
 import { useTranslation } from "react-i18next";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Displays a menu for selecting what should be done with the current changes
@@ -89,17 +90,13 @@ export const PageButton: React.FC<{
   });
 
   return (
-    <div css={[basicButtonStyle(theme), pageButtonStyle]}
-      role="button" tabIndex={0}
+    <ProtoButton
       onClick={onPageChange}
-      onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === " " || event.key === "Enter") {
-          onPageChange();
-        }
-      }}>
+      css={[basicButtonStyle(theme), pageButtonStyle]}
+    >
       <Icon />
       <span>{label}</span>
-    </div>
+    </ProtoButton>
   );
 };
 
@@ -119,22 +116,18 @@ export const CallbackButton: React.FC = () => {
   return (
     <>
       {settings.callbackUrl !== undefined &&
-        <div css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
-          role="button" tabIndex={0}
+        <ProtoButton
           onClick={openCallbackUrl}
-          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-            if (event.key === " " || event.key === "Enter") {
-              openCallbackUrl();
-            }
-          }}>
+          css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
+        >
           <LuDoorOpen />
           <span>
             {settings.callbackSystem ?
               t("various.callback-button-system", { system: settings.callbackSystem }) :
               t("various.callback-button-generic")
             }
           </span>
-        </div>
+        </ProtoButton>
       }
     </>
   );

src/main/FinishMenu.tsx

@@ -11,6 +11,7 @@ import { setState, setPageNumber, finish } from "../redux/finishSlice";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Displays a menu for selecting what should be done with the current changes
@@ -81,19 +82,15 @@ const FinishMenuButton: React.FC<{ Icon: IconType, stateName: finish["value"]; }
   });
 
   return (
-    <div css={[basicButtonStyle(theme), tileButtonStyle(theme)]}
-      role="button" tabIndex={0}
+    <ProtoButton
       onClick={finish}
-      onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === " " || event.key === "Enter") {
-          finish();
-        }
-      }}>
+      css={[basicButtonStyle(theme), tileButtonStyle(theme)]}
+    >
       <div css={iconStyle}>
         <Icon css={{ fontSize: 36 }} />
       </div>
       <div css={labelStyle}>{buttonString}</div>
-    </div>
+    </ProtoButton>
   );
 };
 

src/main/Header.tsx

@@ -275,7 +275,9 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
     });
 
     return (
-      <ProtoButton {...rest} ref={ref}
+      <ProtoButton
+        {...rest}
+        ref={ref}
         css={[basicButtonStyle(theme), themeSelectorButtonStyle]}
       >
         <Icon css={iconStyle} />

src/main/MainMenu.tsx

@@ -21,6 +21,7 @@ import { resetPostRequestState } from "../redux/workflowPostSlice";
 import { setIsDisplayEditView } from "../redux/subtitleSlice";
 
 import { useTheme } from "../themes";
+import { ProtoButton } from "@opencast/appkit";
 import { screenWidthAtMost } from "@opencast/appkit";
 
 /**
@@ -154,15 +155,11 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
   });
 
   return (
-    <li css={[basicButtonStyle(theme), customCSS ? customCSS : mainMenuButtonStyle]}
-      role="menuitem" tabIndex={0}
+    <ProtoButton
+      role="menuitem"
       aria-label={ariaLabelText}
       onClick={onMenuItemClicked}
-      onKeyDown={(event: React.KeyboardEvent<HTMLLIElement>) => {
-        if (event.key === "Enter") {
-          onMenuItemClicked();
-        }
-      }}
+      css={[basicButtonStyle(theme), customCSS ? customCSS : mainMenuButtonStyle]}
     >
       <Icon css={iconCustomCSS ? iconCustomCSS : {
         fontSize: 36,
@@ -177,7 +174,7 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
       }}>
         {bottomText}
       </div>}
-    </li>
+    </ProtoButton>
   );
 };
 

src/main/Save.tsx

@@ -32,6 +32,7 @@ import {
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
+import { ProtoButton } from "@opencast/appkit";
 import { IconType } from "react-icons";
 import { setEnd } from "../redux/endSlice";
 
@@ -181,18 +182,14 @@ export const SaveButton: React.FC<{
 
   return (
     <ThemedTooltip title={tooltip == null ? tooltip = "" : tooltip}>
-      <div css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
-        role="button" tabIndex={0}
+      <ProtoButton
         onClick={save}
-        onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-          if (event.key === " " || event.key === "Enter") {
-            save();
-          }
-        }}>
+        css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
+      >
         <Icon css={spin ? spinningStyle : undefined} />
         <span>{text ?? t("save.confirm-button")}</span>
         <div css={ariaLive} aria-live="polite" aria-atomic="true">{ariaSaveUpdate()}</div>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };

src/main/SubtitleEditor.tsx

@@ -21,7 +21,7 @@ import { parseSubtitle, serializeSubtitle } from "../util/utilityFunctions";
 import { ThemedTooltip } from "./Tooltip";
 import { titleStyle, titleStyleBold } from "../cssStyles";
 import { generateButtonTitle } from "./SubtitleSelect";
-import { ConfirmationModal, ConfirmationModalHandle, Modal, ModalHandle } from "@opencast/appkit";
+import { ConfirmationModal, ConfirmationModalHandle, Modal, ModalHandle, ProtoButton } from "@opencast/appkit";
 
 /**
  * Displays an editor view for a selected subtitle file
@@ -194,13 +194,13 @@ const DownloadButton: React.FC = () => {
 
   return (
     <ThemedTooltip title={t("subtitles.downloadButton-tooltip")}>
-      <div css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
-        role="button"
+      <ProtoButton
         onClick={() => downloadSubtitles()}
+        css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
       >
         <LuDownload css={{ fontSize: "16px" }} />
         <span>{t("subtitles.downloadButton-title")}</span>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };
@@ -267,13 +267,13 @@ const UploadButton: React.FC<{
   return (
     <>
       <ThemedTooltip title={t("subtitles.uploadButton-tooltip")}>
-        <div css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
-          role="button"
+        <ProtoButton
           onClick={() => modalRef.current?.open()}
+          css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
         >
           <LuUpload css={{ fontSize: "16px" }}/>
           <span>{t("subtitles.uploadButton-title")}</span>
-        </div>
+        </ProtoButton>
       </ThemedTooltip>
       {/* Hidden input field for upload */}
       <input
@@ -313,18 +313,14 @@ export const BackButton: React.FC = () => {
 
   return (
     <ThemedTooltip title={t("subtitles.backButton-tooltip")}>
-      <div css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
-        role="button" tabIndex={0}
+      <ProtoButton
         aria-label={t("subtitles.backButton-tooltip")}
         onClick={() => dispatch(setIsDisplayEditView(false))}
-        onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-          if (event.key === " " || event.key === "Enter") {
-            dispatch(setIsDisplayEditView(false));
-          }
-        }}>
+        css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
+      >
         <LuChevronLeft css={{ fontSize: 24 }} />
         <span>{t("subtitles.backButton")}</span>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };