[ISSUE#1903][MAS4.2.5] [Labels and Relationships - Settings] Voiceover announce the same label for “Path to ngrok", "Locale", "Localhost Override"and "User ID" present in the "settings" pane

[denscollo]

Solves #1903

Description

Fixes how Voiceover announces the TextFields' labels in the Settings editor pane. This error was extended to TextFields in other components as well.

Changes made

We added a condition to the setting of the aria-labelledby attribute in the TextField component. This way, Voiceover will read the error message only when related to the rendered element, otherwise, it will read the element's label.

Additionally, we noticed that this issue was happening on windows as well. The same solution applies to both platforms.

Testing

In the following images, you can see how Voiceover reads the labels instead of the error message:

[coveralls]

Coverage increased (+0.005%) to 67.092% when pulling cdaf343 on fix/incorrect-settings-labels-announcement into a070872 on master.

[tonyanziano]

The behavior is right, but I think that the code used to achieve the behavior is slightly off. I left a comment explaining why.

[tonyanziano]

I think that this should be:

aria-labelledby={errorMessage ? 'errormessagesub' : undefined}

aria-labelledby requires

A space-separated list of element IDs

that are supposed to describe the element that the attribute has been attached to. Your change is saying that the <input> tag should be describe by some element with id="label", however, if you look at the HTML markup for the .labelNode of the <TextField> component, it does not have an ID associated with it.

So what I think is actually happening here is that the aria-labelledby attribute tries to find the associated element with id="label", fails, and then falls back to default accessibility behavior, which is to look at the nearest <label> tag with the for="<input id>" attribute assigned. This is the correct behavior.

I've tried changing it to aria-labelledby={errorMessage ? 'errormessagesub' : undefined} on Windows, and the behavior remains the same as your change.

You should try it out on Mac, and if it works, then we are good to merge it in. 👍

[denscollo]

Thanks @tonyanziano for the explanation! We tried it on Mac and it works perfectly, so we just updated the code with that modification.

[tonyanziano]

Great! Thanks :)