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={() => {