diff --git a/src/components/ToolButton.tsx b/src/components/ToolButton.tsx
index 6e401a02..120a3f83 100644
--- a/src/components/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@@ -13,6 +13,7 @@ type ToolButtonBaseProps = {
name?: string;
id?: string;
size?: ToolIconSize;
+ keyBindingLabel?: string;
};
type ToolButtonProps =
@@ -63,7 +64,12 @@ export const ToolButton = React.forwardRef(function(
checked={props.checked}
ref={innerRef}
/>
-
{props.icon}
+
+ {props.icon}
+ {props.keyBindingLabel && (
+ {props.keyBindingLabel}
+ )}
+
);
});
diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss
index 5f054504..c1281843 100644
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -83,3 +83,12 @@
box-shadow: none;
}
}
+
+.ToolIcon__keybinding {
+ position: absolute;
+ bottom: 2px;
+ right: 3px;
+ font-size: 0.5em;
+ color: #adb5bd; // OC GRAY 5
+ font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 2d46022c..55cc28bc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -374,7 +374,6 @@ export class App extends React.Component {
} else if (
shapesShortcutKeys.includes(event.key.toLowerCase()) &&
!event.ctrlKey &&
- !event.shiftKey &&
!event.altKey &&
!event.metaKey &&
this.state.draggingElement === null
@@ -564,6 +563,7 @@ export class App extends React.Component {
title={`${capitalizeString(label)} — ${
capitalizeString(value)[0]
}, ${index + 1}`}
+ keyBindingLabel={`${index + 1}`}
aria-label={capitalizeString(label)}
aria-keyshortcuts={`${label[0]} ${index + 1}`}
onChange={() => {