Implement several improvements for OnyxShortcut/OnyxKey

[JoCa96]

Design

Figma

Acceptance criteria

• API must be adapted to allow combining + ("and") and / (or), e.g. Alt+(↑/↓)
• The width of a key must a minimum be the height of the key (wider is okay):
• A tooltip is shown when a key is hovered, which displays the accessible text, e.g. the shortcut ^ has the Tooltip "Control" key or ↑ has the Tooltip "Arrow Up" key
• event listener must be enabled via an explicit property interactive, which also replaces highlighted(OnyxKey)/highlight(OnyxShortcut). Per default no event-listeners should be set-up (no highlighting/no ).
  • A new property active (boolean) which forces the highlighting statically

Implementation details

<-- Add technical details / implementation proposals if necessary, e.g.:

• API proposal
• relevant web APIs
• learnings from other implementations
• code snippets
  -->

DEV handover checklist

Storybook

DEV handover done with: @ADD_DEV_NAME_HERE

Testing

• covered by visual screenshot tests
• covered by functional tests (Playwright or unit test)

Documentation

• "New" badge in Storybook is added, see storybook-addon-tag-badges
• Storybook code snippets are checked
• component status has been updated in the docs overview

Other

• follow-up tickets were created if necessary (add links below)

UX handover checklist

UX handover done with: @ADD_UX_NAME_HERE

Naming is aligned with Figma

• component name
• which support components are used and how they are named
• all property names and types

Implementation is checked

• all features of Figma are implemented or a follow-up ticket is refined
• skeleton
• densities
• light and dark mode
• truncation
• responsiveness / wrapping behavior
• min / max width

Documentation

• Storybook category is aligned with Figma
• Storybook examples are checked

Other

• follow-up tickets were created if necessary (add links below)