[FlexBox/Input/Label]: [In entire application place holder texts, punctuations, and values associated with ‘XX’ input fields are not being read.]

[jadhavarjun]

Describe the bug

In application texts, punctuations, and values associated with input fields are not being read.

here is Screenshot that I take from reproducible code stackblitz link.

Here is screenshot that we taken from application:

Isolated Example

https://stackblitz.com/edit/github-mrmyjf?file=src%2FApp.tsx

Reproduction steps

1.Open Link start JAWS screen reader application.
2.Enter value into the input field.
3.JAWS reader only read values not able to read % associated with that input
...

Expected Behaviour

Every information displayed on the screen, same should be conveyed by the screen reader without missing any information.

Screenshots or Videos

No response

UI5 Web Components for React Version

~1.29.0

UI5 Web Components Version

~1.24.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @jadhavarjun

there is no automatic label-input relation for standard components, as we cannot guess what an application wants screen readers to announce for e.g. an input. There could be multiple labels, an aria-label (or accessibleName if it's an ui5-input), etc. So, implementing these relations is left up to app-developers.

To find out more about accessibility of ui5-webcomponents, please see this link. For general accessibility specifications and guides, you can take a look at the Accessibility Intro of W3C: https://www.w3.org/WAI/fundamentals/accessibility-intro/

[jadhavarjun]

Hi @Lukas742 ,

I got your point, but can you please help me to understand which accessibility attribute should I used so I can got my issue resolution
Expectation is: When my focus is on input field we should make reader to read the label that we have after the input field, see in screenshot, after the input field we have the % label so every time we enter any value into the input field it should read % for e.g when I enter 10 it must read 10% like that and see another screenshot we have days label after the input field it must read 20 days.

Here is stackblitz link: https://stackblitz.com/edit/github-mrmyjf?file=src%2FApp.tsx
please provide suggestions using that I can solve that issue