Implement OnyxShortcut component

[JoCa96]

Depends on

• Concept OnyxKey component #2023

Why?

As a UI developer, I want to communicate to a user which keyboard shortcut they can use to trigger an action. Using this information, they can act immediately, without the need for a mouse click.

From MDN:

The <kbd> element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the browser defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.

Design

Figma

Acceptance criteria

Implementation details

Reference implementations

Applicable ARIA Pattern

Definition of Done

• The following component requirements are implemented:
  • skeleton
  • density
  • example usage added to apps/demo-app/src/views/HomeView.vue
• covered by tests
  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)
• follow-up tickets were created if necessary
• updated version + documentation is deployed
• Storybook can show the feature
• Storybook code snippet of new/changed examples are checked that they are generated correctly
• Namings are aligned with Figma

Approval

• Storybook
• Deployed Docs
• approved by designer @jannick-ux
• approved by dev