keyboard shortcuts for buttons

[mscolnick]

Discussed in https://github.com/marimo-team/marimo/discussions/612

^{Originally posted by tfriedel January 20, 2024} I quite liked the example for data labeling. There are buttons to go to the next or previous image. It would be nice to attach keyboard shortcuts to buttons so such a tool could be used without a mouse.

[rithik56]

Hi @mscolnick , can I work on this issue ?

[mscolnick]

@rithik56, that would be awesome! Feel free to ping me on Discord if you need any help getting set up

[rithik56]

Sure @mscolnick

[Light2Dark]

hi @mscolnick, I'd like to help with this. My thoughts so far:

• add a keyboard_shortcut parameter in Python, so users can call button(keyboard_shortcut='Ctrl+G')
• add a keyboardShortcut prop for ButtonProps in JSX
• if keyboardShortcut is present, add a document event listener for keydown which will trigger the button click
• render the button with the shortcut, so the button will look something like Still thinking about the design but yeah.

What do you think? This makes the keyboard shortcut a global listener which I think is the intended effect.

I'm aware of the custom hooks for hotkeys, still checking it out.

[mscolnick]

@Light2Dark that would be great! And what you laid out makes sense.

Rather than modifying the label, could we default tooltip to be the keyboard shortcut if the tooltip is null. If the user wants to add the shortcut to the label, they can do that themselves manually. Thoughts?

[Light2Dark]

great idea, and we can always change it after getting wider feedback. I've made a draft, imo, the keyboard shortcuts should be universal, so working on that + testing.