Support keyboard shortcut hints in overflow menu items.

brunnerh commented 3 years ago

Summary

For power users it might be helpful to access certain functions like those found in overflow menus via keyboard shortcuts. To help identify what those shortcuts are, it would be nice to show them on the respective menu item.

Justification

Keyboard shortcuts allow more efficient workflows and showing the shortcut on menu items is a de-facto standard way of communicating them.

Desired UX and success metrics

Gesture text should be displayable next to the item. Example from Chrome's menu:

The text is commonly less prominent/faded in comparison with the item label.

Issues that come up are usually OS and environment dependencies. It would be nice if those could be handled by the system automatically.

Distinction between Ctrl and ⌘ key display.
Is a keyboard even available? (phones, tables, other devices that may or may not have a keyboard connected)
Is there enough space to reasonably show the shortcut on the current screen?

The feature is a success if the user can view the item and subsequently perform the associated action via the keyboard.

"Must have" functionality

Show arbitrary shortcut text in designated position/style within overflow menu items. Worst case scenario any OS/environment attributes have to be handled manually.

Specific timeline issues / requests

Not critical for me at the moment. Tooltips or help pages can be used to show keyboard shortcuts in the meantime.

Available extra resources

The carbon-component-svelte project contains a ContextMenu component which already has a property for shortcut text, but i could not find that in the original Carbon specification. If that is outside the spec, then this probably should be unified in some way.

jnm2377 commented 3 years ago

@carbon-design-system/design is this feature something we would be interested in supporting?

aagonzales commented 3 years ago

Seems like it would be possible with the contextual menu as he stated. Should be implementable on the products team side no?

We can maybe look into is the contextual menu allows text on both the left and right in a menu item but that is the only enhancement I can see from a Carbon perspective.

janhassel commented 3 years ago

Afaik, with the upcoming v11 release, the MenuItem component will also be used for OverflowMenus. Therefore adding shortcut hints shouldn't be a problem soon. Demo: https://67wmd.csb.app/

However, as of right now, the product team would still be responsible for displaying the correct platform-specific shortcut (e.g. ⌘ vs. ctrl) as well as handling the actual keyboard command. The component only really renders whatever text you pass it.

<MenuItem label="Cut" shortcut="⌘X" />

jnm2377 commented 2 years ago

Closing this issue since it was added for v11: https://carbon-react-next.netlify.app/?path=/story/experimental-unstable-menu-contextmenu--context-menu

carbon-design-system / carbon