Search component bug II

[claudiac2024]

Provide a general summary of the issue here

The input element inside the sl-text-field component does NOT have any aria-label, but it cannot be generalized either, so its value should be passed down through the Shadow DOM by an attribute inside sl-text-field component, which is the input element's parent

🤔 Expected Behavior?

Add an attribute (e.g., label) to the sl-text-field component that will act as a proxy for accessibility labels.
This can allow devs to set the accessible name for the input field at the parent level.

Use JavaScript or another framework to observe changes to the label attribute and pass its value to the input element within the Shadow DOM.

😯 Current Behavior

The input element inside the sl-text-field component does NOT have any aria-label, but it cannot be generalized either, so its value should be passed down through the Shadow DOM by an attribute inside sl-text-field component, which is the input element's parent

💁 Possible Solution

Add an attribute (e.g., label) to the sl-text-field component that will act as a proxy for accessibility labels.
This can allow devs to set the accessible name for the input field at the parent level.

Use JavaScript or another framework to observe changes to the label attribute and pass its value to the input element within the Shadow DOM.

🖥️ Steps to Reproduce

linked to the previous bug report on the search component

What browsers are you seeing the problem on? (only for bugs in code)

Chrome

If other, please specify.

No response

What operating system are you using?

iOS

👤 Your name

Claudia

🧢 Your product/team

NPM

🎨 Your Theme(s)

My Digital Book

[anna-lach]

@claudiac2024 We've already added the changes to the sl-text-field (and other components) connected to the aria-label and other attributes.
This was done in this PR: #1633, but it's not released yet.

So when the aria-label is added to the sl-text-field, it will be moved to the input element to improve the accessibility.

The changes are currently available in our Storybook:
https://storybook.sanomalearning.design/?path=/story/form-text-field--all

[anna-lach]

@claudiac2024 the solution is currently available after the release we made last week.