[Bug]: Accessibility issue in the number field in sp-slider component

[Sandi2156]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-slider

Library version

No response

Expected behavior

When a user navigates to an editable sp-slider (e.g. the Opacity, Letter Spacing, Line Spacing, or Paragraph Spacing input fields) and  navigate to the input field by pressing tab, it should announce "{semantic label} {value} selected". (e.g. "Opacity 100% selected", "Letter spacing 0 selected").

Actual behavior

The screen reader announces only "{value} selected" (e.g. "100% selected", "0 selected", "1.2 selected"). It does not announce the semantic label along with the value -- so the user has no context about what that value represents. The expected behavior is "{label} {value} selected" (e.g. "Opacity 100% selected", "Letter spacing 0 selected").

Screenshots

No response

What browsers are you seeing the problem in?

Chrome, Safari

How can we reproduce this issue?

1. visit https://express.adobe.com/new?category=text
2. Turn on screen reader
3. choose any text template
4. select any text
5. left you'll see opacity button, click on it
6. change opacity, click on tab. Focus will move to the input field and the value will be selected
   Screen reader will only announce - "{value} selected", instead of "{semantic label} {value} selected".

Sample code or abstract reproduction which illustrates the problem

No response

Severity

SEV 3

Logs taken while reproducing problem

No response

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!

[github-jira-sync-bot]

❌ You don't have permission to export this issue.

[github-jira-sync-bot]

❌ You don't have permission to export this issue.

[najikahalsema]

@magento export issue to Jira project SWC as Bug

[github-jira-sync-bot]

✅ Jira issue SWC-1849 is successfully created for this GitHub issue.