feat[dev]: ✨ add read-only input template

[coraliefeil]

User Story

As a stakeholder of the Solid Design System, I would like guidance on how to implement read-only form elements in a way that is clear and understandable for users when they attempt to interact with them.

Suggested Solution

Mirror Figma template to Storybook:
Figma Template

Implement tooltips that appear on hover or focus (when the user tries to interact with it), explain that the field is read-only.

Ensure Keyboard and mobile accessibility as well as screen reader compatibility.
On mobile devices, hover interactions translate to taps.

For Persistent and Dismissible Content – according to WCAG guidelines, any additional content that appears on hover or focus should remain visible until the user dismisses it or moves focus away.

Hint: Alternatively, consider just displaying data that cannot be changed, rather than using a read-only input field.

DoR

• Item has business value
• Item all subtasks have been estimated by the team
• Item is clear and well-defined
• Item dependencies have been identified