feat: ✨ provide template for the reader logic of the input label element.

[yoezlem]

User Story

As a user of the Solid Design System, I would like to understand how to use an input field without a visible label but still meet accessibility requirements, as well as ensure that screen readers can correctly interpret the input field, so that my forms are accessible to all users, and I maintain compliance with accessibility standards.

Suggested Solution

Create a template that shows something like using Solid Comps and complying with WCAG 2.2

Label slot can be used to add sd-headline for example ...

Documentation

[LINK TO FIGMA]

Components detailed requirements

Props

Status	Name	Type	Default	Description
[ ]	name	type	default	description
[ ]	name	type1 / type2	default	description

CSS-Properties

• [ ] name - description
• [ ] name - description

  Parts (besides the shoelace parts)

• [ ] name - description
• [ ] every other HTML element (depending on the HTML structure) => NOTE: if highlighting the parts in the parts story does not work out of the box, do not spend more effort on it but open a bug ticket to tackle it later.

  Slots

• [ ] name - description
• [ ] name - description

  Stories

• [ ] default - shows the components default state
• [ ] slots - shows the components slots
• [ ] parts - shows the components parts
• [ ] name - description

  Samples

• [ ] name - description
• [ ] name - description

Open Questions towards design

• [ ] Question1
• [ ] Question2

Subtasks

• [ ] Design_implementation_task
• [ ] Create Template for sr-only logic in label
• [ ] Design_release_task

DoR

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

DoD

• [ ] All subtasks have been closed

[yoezlem]

We will tackle this after the A11y Expert