Open jadhavarjun opened 1 week ago
Hi @jadhavarjun
^1.16.3
means all version from 1.16.3 to the latest v1 minor version (currently 1.29.9), but in your StackBlitz example you're using version v2.0.2. So, in which version are you facing the problem and is there a newer minor version where the issue is already fixed?
In your example, you didn't add any props to make a relation between the label and input component, so it's expected that screen readers don't read out the label when focusing the input.
Please update the example, to show the issue you're facing. Otherwise we unfortunately can't help here.
Hi @Lukas742 ,
I am not facing any issue in https://stackblitz.com/edit/github-517e38-x2zq56?file=src%2FApp.tsx this link in that link I have updated code and I not sending anything through props in it, but I have given id in the label, and I am accessing the same id in the input field through accessibleNameRef attribute.
but in my local code I am passing so many data through props but there also I am doing same I am adding id into the label and same I am accessing into input field as accessibleNameRef attribute.
here i am pasing small part of code in that i am getting issue.
`{fields.map((item, index) => { return (
);
})}`
we have button when we click on that button adding new field and for first field is reading as expected but after the first field means second third field not reading correctly.
@jadhavarjun we cannot work with code snippets that implement components not defined in the example. We therefore ask for an isolated, reproducible example; otherwise, we won't be able to help. Additionally, could you please answer the open question regarding the version? In your updated example you're still using v2...
@Lukas742 , in reproducible stackblitz link I have using these version "@ui5/webcomponents": "2.1.2", "@ui5/webcomponents-react": "2.0.2",
@jadhavarjun Ok, we will then only look into the v2 implementation.
I've checked your example and the accessibleNameRef
including the id
on the label is redundant, since you're setting accessibleName
. The internal input is updated correctly with aria-label
and VoiceOver and NVDA read out the labels correctly.
I've also checked the behavior with accessibleNameRef
(by removing accessibleName
) and there the behavior is also as intended. (aria-label
is set with the expected value).
This goes for initial inputs and labels, as well as for dynamically added ones.
If this behavior is different for you, please provide all the necessary information listed here.
@Lukas742 , I will provide all the details that you mention your above comment but can while I am collecting all the details can you create stackblitz link in react+js with UI5 Web Components for React Version ^1.16.3, UI5 Web Components Version^1.14.0 and share with me so I will check if that is not version problem.
Describe the bug
When any test associates with any input field before or after the input field must read, basically whenever we go by tab and our focus is on input field with that text or Label are associates that must be read but currently is not working. I have tried with id and accessibleNameRef attribute only for first index its work but when we add more fields by clicking on add button so it will add dynamically into the DOM and its show provided ID and accessibleNameRef but after that also after the JAWS reader read first input field associated label aftet the first field it will not read any other fields. NOTE: I have created similar reproduce code link but in that working perfectly fine it's read every field perfectly but in my UI case is only reading first field perfectly and after first field reader not read label that associated with input field. here is reproduce code link: https://stackblitz.com/edit/github-517e38?file=src%2FApp.tsx
STEPS: 1: open link i have already added default two input field and labels. 2.you can click add button and you can add more fields as many as you want.
here is screenshot:
Is there version issue.
Isolated Example
No response
Reproduction steps
1. 2. 3. ...
Expected Behaviour
if any text/label have relation with any button, input, links and table headings must be readable when we have focus.
Screenshots or Videos
No response
UI5 Web Components for React Version
^1.16.3
UI5 Web Components Version
^1.14.0
Browser
Chrome
Operating System
Windows
Additional Context
No response
Relevant log output
No response
Organization
No response
Declaration