[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

[Lukas742]

As this is a general question and not a bug, I'm going to convert this issue into a Discussion.

Did you take a look at the documentation?
There you can find how to define relations. E.g.:

For example, in order to create a Label-Input relationship, you can use the for property of the label component to bind the label to an input, or accessible-name-ref property of the input component to bind the input to a label.

I've also adjusted your example to show the for - id relationship and a relation via accessible-name-ref:https://stackblitz.com/edit/github-mrmyjf-nvegvi?file=src%2FApp.tsx

[jadhavarjun]

Yes, I checked that but its read only first time for e.g. I have 0 default its read % edit 0 but after I enter anything its read only value not read %

[jadhavarjun]

OR can you make new feature in that we can associate relation in between react tags.

[Lukas742]

Yes, I checked that but its read only first time for e.g. I have 0 default its read % edit 0 but after I enter anything its read only value not read %.

This is the intended behavior, not only for ui5 web component inputs, but in general. (see stackblitz)

When the value of an input field is changed (e.g., typing into it), the screen reader typically does not announce the label again. Instead, it will usually announce the current value of the input field and any other relevant information like error messages or status updates. This behavior helps avoid redundancy and potential annoyance, as users are already interacting with the field.

OR can you make new feature in that we can associate relation in between react tags.

I'm not quite sure what you mean by that. As shown in the example, you can already create relationships between components.

[jadhavarjun]

Hi @Lukas742 ,

I checked the example that you provided https://stackblitz.com/edit/github-mrmyjf-sh8jn5?file=src%2FApp.tsx but then that changes we need to do manually wherever we have that issue in the application and application are very big so I also don't know in the application where we have that type of relations with labels.
Is it possible that you make such a feature that we can associate or make relation two different tags together and whenever the reader reads, the associated tags are also read.

[Lukas742]

As we aim to stay as close as possible to standard web/React development, and I don’t see a practical way to implement this, we can’t offer this behavior. I’m open to ideas, but as a component library, implementing connectivity between data and elements like e.g. SAPUI5 does is beyond our scope. If you have a concept for this, please feel free to share it, we will then of course look into it and discuss if we can integrate it in our library.

[jadhavarjun]

Thanks for all the suggestions.