[Label & Input]: [When any test associates with any input field before or after the input field must read, but currently is not working]

[jadhavarjun]

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.
3. then open reader and navigate through tab and see whenever you focus on any input field their respective label is read by reader.
but in my local website is not working case is not working only first and second time reader reads associates labels with input and that issue i am facing across the website.

here is screenshot:

Is there version issue.

Isolated Example

No response

Reproduction steps

...

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

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

[Lukas742]

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.

[jadhavarjun]

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 (

                  <Controller
                    as={InputField}
                    control={control}
                    accessibleName={t('FROM')}
                    name={`shelfLifeProfileRanges[${index}].fromdays`}
                    defaultValue={item.fromdays}
                    onChangeCustom={e =>
                      onChangeFrom({
                        event: e,
                        position: index,
                        check: true,
                      })
                    }
                    onInputHandler={e =>
                      onChangeFrom({
                        event: e,
                        position: index,
                        check: false,
                      })
                    }
                    disabled={formType === FormType.VIEW ? true : false}
                    valueState={
                      getErrorMessage({
                        name: `shelfLifeProfileRanges[${index}].fromdays`,
                      }).valueState
                    }
                    valueStateMessage={
                      getErrorMessage({
                        name: `shelfLifeProfileRanges[${index}].fromdays`,
                      }).valueStateMessage
                    }
                    data-testid={'from-days-' + index}
                    testID={'from-days-' + index}
                    accessibleNameRef={'from-days-' + index}
                  />
                  <Label id={'from-days-' + index}  style={{ paddingLeft: '0.3rem' }}>{t('DAYS')}</Label>
                </FlexBox>
              </TableCell>
              <TableCell>
                <FlexBox alignItems="Center">
                  <Controller
                    **as={InputField}** // passing input field as props
                    control={control}
                    accessibleName={t('TO')}
                    name={`shelfLifeProfileRanges[${index}].todays`}
                    defaultValue={item.todays}
                    onChangeCustom={e =>
                      onChangeTo({
                        event: e,
                        position: index,
                        check: true,
                      })
                    }
                    onInputHandler={e =>
                      onChangeTo({
                        event: e,
                        position: index,
                        check: false,
                      })
                    }
                    disabled={formType === FormType.VIEW ? true : false}
                    valueState={
                      getErrorMessage({
                        name: `shelfLifeProfileRanges[${index}].todays`,
                      }).valueState
                    }
                    valueStateMessage={
                      getErrorMessage({
                        name: `shelfLifeProfileRanges[${index}].todays`,
                      }).valueStateMessage
                    }
                    data-testid={'to-days-' + index}
                    **accessibleNameRef={'to-days-' + index}** //check 2
                  />
                  <Label **id={'to-days-' + index}** style={{ paddingLeft: '0.3rem' }}>{t('DAYS')}</Label> //check 1
                  <Button
                    design="Transparent"
                    icon="decline"
                    disabled={formType === FormType.VIEW ? true : false}
                    onClick={() => handleRemove(index)}
                    defaultValue={'DeleteButton'}
                    data-testid={'remove-' + index}
                    style={{ marginLeft: 'auto' }}
                  />
                </FlexBox>
              </TableCell>
            </TableRow>
          );
        })}`

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.

[Lukas742]

@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...

[jadhavarjun]

@Lukas742 , in reproducible stackblitz link I have using these version "@ui5/webcomponents": "2.1.2", "@ui5/webcomponents-react": "2.0.2",

[Lukas742]

@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.

[jadhavarjun]

@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.

[Lukas742]

Hi @jadhavarjun

^ means that you request the latest minor version, so in this case @ui5/[email protected] and @ui5/[email protected]. Please check exactly which versions you're running in your app. You can do that for example via npm list @ui5/webcomponents-react or yarn why @ui5/webcomponents-react`.

StackBlitz examples are editable and sharable, so you can define the dependencies yourself inside package.json. I noticed that sometimes it requires a page refresh to apply the updated dependencies and it's always best to check whether they're installed.

[github-actions]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Inactive issues will be closed after 7 days. Thanks.

[github-actions]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please first check to see if the maintainers have requested additional input and provide it if necessary, or post a detailed description of why this issue is still a problem.