Implement smart autofocus

[JoCa96]

Why?

As a poweruser I want to work through forms and pages using the keyboard without the need for tabbing, so that I can work quickly.

Acceptance criteria

• All OnyxFormElements support the property autofocus
• autofocus only has a one-time effect on mounted
• When a page, dialog, or page content is mounted which includes an OnyxFormElement with an autofocus attribute, this element is focused
• the description is updated to explain this behavior and warns that the usage can disrupt the user experience when used incorrectly

Implementation details

• when autofocus is set to true:
  • in onMounted it is checked if the input is focused otherwise focus is set manually

Definition of Done

• The following component requirements are implemented:

  • example usage added to apps/demo-app/src/views/HomeView.vue

• Should be covered by tests:

  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)

• Make sure, that

  • 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
Documentation

• Checked and approved by
  • dev