Added keyboard shortcuts hints to map controls

src/components/map/MapControls.js

@@ -41,30 +41,30 @@ function MapContols({
     pan: {
       id: "pan",
       icon: <PanToolIcon />,
-      title: "Pan Tool",
+      title: "Pan Tool (W)",
     },
     fog: {
       id: "fog",
       icon: <FogToolIcon />,
-      title: "Fog Tool",
+      title: "Fog Tool (F)",
       SettingsComponent: FogToolSettings,
     },
     drawing: {
       id: "drawing",
       icon: <BrushToolIcon />,
-      title: "Drawing Tool",
+      title: "Drawing Tool (D)",
       SettingsComponent: DrawingToolSettings,
     },
     measure: {
       id: "measure",
       icon: <MeasureToolIcon />,
-      title: "Measure Tool",
+      title: "Measure Tool (M)",
       SettingsComponent: MeasureToolSettings,
     },
     pointer: {
       id: "pointer",
       icon: <PointerToolIcon />,
-      title: "Pointer Tool",
+      title: "Pointer Tool (Q)",
     },
   };
   const tools = ["pan", "fog", "drawing", "measure", "pointer"];

src/components/map/controls/AlphaBlendToggle.js

@@ -7,8 +7,8 @@ import BlendOffIcon from "../../../icons/BlendOffIcon";
 function AlphaBlendToggle({ useBlending, onBlendingChange }) {
   return (
     <IconButton
-      aria-label={useBlending ? "Disable Blending" : "Enable Blending"}
-      title={useBlending ? "Disable Blending" : "Enable Blending"}
+      aria-label={useBlending ? "Disable Blending (O)" : "Enable Blending (O)"}
+      title={useBlending ? "Disable Blending (O)" : "Enable Blending (O)"}
       onClick={() => onBlendingChange(!useBlending)}
     >
       {useBlending ? <BlendOnIcon /> : <BlendOffIcon />}

src/components/map/controls/DrawingToolSettings.js

@@ -78,37 +78,37 @@ function DrawingToolSettings({
   const tools = [
     {
       id: "brush",
-      title: "Brush",
+      title: "Brush (B)",
       isSelected: settings.type === "brush",
       icon: <BrushIcon />,
     },
     {
       id: "paint",
-      title: "Paint",
+      title: "Paint (P)",
       isSelected: settings.type === "paint",
       icon: <BrushPaintIcon />,
     },
     {
       id: "line",
-      title: "Line",
+      title: "Line (L)",
       isSelected: settings.type === "line",
       icon: <BrushLineIcon />,
     },
     {
       id: "rectangle",
-      title: "Rectangle",
+      title: "Rectangle (R)",
       isSelected: settings.type === "rectangle",
       icon: <BrushRectangleIcon />,
     },
     {
       id: "circle",
-      title: "Circle",
+      title: "Circle (C)",
       isSelected: settings.type === "circle",
       icon: <BrushCircleIcon />,
     },
     {
       id: "triangle",
-      title: "Triangle",
+      title: "Triangle (T)",
       isSelected: settings.type === "triangle",
       icon: <BrushTriangleIcon />,
     },
@@ -128,7 +128,7 @@ function DrawingToolSettings({
       />
       <Divider vertical />
       <RadioIconButton
-        title="Erase"
+        title="Erase (E)"
         onClick={() => onSettingChange({ type: "erase" })}
         isSelected={settings.type === "erase"}
         disabled={disabledActions.includes("erase")}

src/components/map/controls/EdgeSnappingToggle.js

@@ -8,9 +8,15 @@ function EdgeSnappingToggle({ useEdgeSnapping, onEdgeSnappingChange }) {
   return (
     <IconButton
       aria-label={
-        useEdgeSnapping ? "Disable Edge Snapping" : "Enable Edge Snapping"
+        useEdgeSnapping
+          ? "Disable Edge Snapping (S)"
+          : "Enable Edge Snapping (S)"
+      }
+      title={
+        useEdgeSnapping
+          ? "Disable Edge Snapping (S)"
+          : "Enable Edge Snapping (S)"
       }
-      title={useEdgeSnapping ? "Disable Edge Snapping" : "Enable Edge Snapping"}
       onClick={() => onEdgeSnappingChange(!useEdgeSnapping)}
     >
       {useEdgeSnapping ? <SnappingOnIcon /> : <SnappingOffIcon />}

src/components/map/controls/FogPreviewToggle.js

@@ -7,8 +7,12 @@ import PreviewOffIcon from "../../../icons/FogPreviewOffIcon";
 function FogPreviewToggle({ useFogPreview, onFogPreviewChange }) {
   return (
     <IconButton
-      aria-label={useFogPreview ? "Disable Fog Preview" : "Enable Fog Preview"}
-      title={useFogPreview ? "Disable Fog Preview" : "Enable Fog Preview"}
+      aria-label={
+        useFogPreview ? "Disable Fog Preview (F)" : "Enable Fog Preview (F)"
+      }
+      title={
+        useFogPreview ? "Disable Fog Preview (F)" : "Enable Fog Preview (F)"
+      }
       onClick={() => onFogPreviewChange(!useFogPreview)}
     >
       {useFogPreview ? <PreviewOnIcon /> : <PreviewOffIcon />}

src/components/map/controls/FogToolSettings.js

@@ -73,13 +73,13 @@ function BrushToolSettings({
   const drawTools = [
     {
       id: "polygon",
-      title: "Fog Polygon",
+      title: "Fog Polygon (P)",
       isSelected: settings.type === "polygon",
       icon: <FogPolygonIcon />,
     },
     {
       id: "brush",
-      title: "Fog Brush",
+      title: "Fog Brush (B)",
       isSelected: settings.type === "brush",
       icon: <FogBrushIcon />,
     },
@@ -109,14 +109,14 @@ function BrushToolSettings({
       />
       <Divider vertical />
       <RadioIconButton
-        title="Toggle Fog"
+        title="Toggle Fog (T)"
         onClick={() => onSettingChange({ type: "toggle" })}
         isSelected={settings.type === "toggle"}
       >
         <FogToggleIcon />
       </RadioIconButton>
       <RadioIconButton
-        title="Remove Fog"
+        title="Remove Fog (R)"
         onClick={() => onSettingChange({ type: "remove" })}
         isSelected={settings.type === "remove"}
       >

src/components/map/controls/MeasureToolSettings.js

@@ -27,19 +27,19 @@ function MeasureToolSettings({ settings, onSettingChange }) {
   const tools = [
     {
       id: "chebyshev",
-      title: "Grid Distance",
+      title: "Grid Distance (G)",
       isSelected: settings.type === "chebyshev",
       icon: <MeasureChebyshevIcon />,
     },
     {
       id: "euclidean",
-      title: "Line Distance",
+      title: "Line Distance (L)",
       isSelected: settings.type === "euclidean",
       icon: <MeasureEuclideanIcon />,
     },
     {
       id: "manhattan",
-      title: "City Block Distance",
+      title: "City Block Distance (C)",
       isSelected: settings.type === "manhattan",
       icon: <MeasureManhattanIcon />,
     },

src/components/map/controls/RedoButton.js

@@ -3,9 +3,16 @@ import { IconButton } from "theme-ui";
 
 import RedoIcon from "../../../icons/RedoIcon";
 
+import { isMacLike } from "../../../helpers/shared";
+
 function RedoButton({ onClick, disabled }) {
   return (
-    <IconButton onClick={onClick} disabled={disabled}>
+    <IconButton
+      title={`Redo (${isMacLike ? "Cmd" : "Ctrl"} + Shift + Z)`}
+      aria-label={`Redo (${isMacLike ? "Cmd" : "Ctrl"} + Shift + Z)`}
+      onClick={onClick}
+      disabled={disabled}
+    >
       <RedoIcon />
     </IconButton>
   );

src/components/map/controls/UndoButton.js

@@ -3,9 +3,16 @@ import { IconButton } from "theme-ui";
 
 import UndoIcon from "../../../icons/UndoIcon";
 
+import { isMacLike } from "../../../helpers/shared";
+
 function UndoButton({ onClick, disabled }) {
   return (
-    <IconButton onClick={onClick} disabled={disabled}>
+    <IconButton
+      title={`Undo (${isMacLike ? "Cmd" : "Ctrl"} + Z)`}
+      aria-label={`Undo (${isMacLike ? "Cmd" : "Ctrl"} + Z)`}
+      onClick={onClick}
+      disabled={disabled}
+    >
       <UndoIcon />
     </IconButton>
   );

src/helpers/shared.js

@@ -69,3 +69,5 @@ export function groupBy(array, key) {
     return prev;
   }, {});
 }
+
+export const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);