Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax

src/actions/actionCanvas.tsx

@@ -23,7 +23,7 @@ import { newElementWith } from "../element/mutateElement";
 import { getDefaultAppState, isEraserActive } from "../appState";
 import ClearCanvas from "../components/ClearCanvas";
 import clsx from "clsx";
-import MenuItem from "../components/MenuItem";
+import DropdownMenuItem from "../components/dropdownMenu/DropdownMenuItem";
 import { getShortcutFromShortcutName } from "./shortcuts";
 
 export const actionChangeViewBackgroundColor = register({
@@ -299,19 +299,23 @@ export const actionToggleTheme = register({
     };
   },
   PanelComponent: ({ appState, updateData }) => (
-    <MenuItem
-      label={
-        appState.theme === "dark"
-          ? t("buttons.lightMode")
-          : t("buttons.darkMode")
-      }
-      onClick={() => {
+    <DropdownMenuItem
+      onSelect={() => {
         updateData(appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT);
       }}
       icon={appState.theme === "dark" ? SunIcon : MoonIcon}
       dataTestId="toggle-dark-mode"
       shortcut={getShortcutFromShortcutName("toggleTheme")}
-    />
+      ariaLabel={
+        appState.theme === "dark"
+          ? t("buttons.lightMode")
+          : t("buttons.darkMode")
+      }
+    >
+      {appState.theme === "dark"
+        ? t("buttons.lightMode")
+        : t("buttons.darkMode")}
+    </DropdownMenuItem>
   ),
   keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
 });

src/actions/actionExport.tsx

@@ -19,7 +19,7 @@ import { ActiveFile } from "../components/ActiveFile";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { Theme } from "../element/types";
-import MenuItem from "../components/MenuItem";
+import DropdownMenuItem from "../components/dropdownMenu/DropdownMenuItem";
 import { getShortcutFromShortcutName } from "./shortcuts";
 
 export const actionChangeProjectName = register({
@@ -247,15 +247,19 @@ export const actionLoadScene = register({
     }
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
-  PanelComponent: ({ updateData }) => (
-    <MenuItem
-      label={t("buttons.load")}
-      icon={LoadIcon}
-      onClick={updateData}
-      dataTestId="load-button"
-      shortcut={getShortcutFromShortcutName("loadScene")}
-    />
-  ),
+  PanelComponent: ({ updateData }) => {
+    return (
+      <DropdownMenuItem
+        icon={LoadIcon}
+        onSelect={updateData}
+        dataTestId="load-button"
+        shortcut={getShortcutFromShortcutName("loadScene")}
+        ariaLabel={t("buttons.load")}
+      >
+        {t("buttons.load")}
+      </DropdownMenuItem>
+    );
+  },
 });
 
 export const actionExportWithDarkMode = register({

src/actions/actionMenu.tsx

@@ -6,7 +6,7 @@ import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";
 import { HelpButton } from "../components/HelpButton";
-import MenuItem from "../components/MenuItem";
+import DropdownMenuItem from "../components/dropdownMenu/DropdownMenuItem";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -90,13 +90,15 @@ export const actionShortcuts = register({
   },
   PanelComponent: ({ updateData, isInHamburgerMenu }) =>
     isInHamburgerMenu ? (
-      <MenuItem
-        label={t("helpDialog.title")}
+      <DropdownMenuItem
         dataTestId="help-menu-item"
         icon={HelpIcon}
-        onClick={updateData}
+        onSelect={updateData}
         shortcut="?"
-      />
+        ariaLabel={t("helpDialog.title")}
+      >
+        {t("helpDialog.title")}
+      </DropdownMenuItem>
     ) : (
       <HelpButton title={t("helpDialog.title")} onClick={updateData} />
     ),