[ui5-input] - Acc - Unexpectedly announces 'Invalid Entry' when input is 'required'

[allen138]

Describe the bug
When using the ui5-input and adding the property 'required' the screen reader will narrate 'Invalid entry' on initial focus, before the user has attempted to type in the field.

To reproduce
Steps to reproduce the behavior:

1. Go to https://sap.github.io/ui5-webcomponents/playground/components/Input/
2. Scroll down to the sample 'Input with label' (this one should have the property 'required')
3. Click or tab on the input to set focus and notice the screen reader will narrate 'Enter you Name edit required invalid entry'

Expected behavior
Screen reader should only announce: 'Enter you Name edit required'

Screenshots

Context

• UI5 Web Components version: 0.23.5
• OS/Platform: All, Tested on Windows 10

Affected components ui5-input

Priority: (optional) Medium

[ilhan007]

Hello @allen138

I can see you are using NVDA, before I forward the issue to the responsible team @SAP/ui5-webcomponents-topic-rl ,
could you try if it is the same with latest Jaws + Chrome as this is the officially supported tool ?

BR,
ilhan

[allen138]

Hi @ilhan007 ,

It is also reproducible on JAWS in chrome. I was only using NVDA because my JAWS speech history screen was giving me problems, kept closing when trying to take a screen shot of it. But I tested the issue in Chrome Version 86.0.4240.111 (Official Build) (64-bit) with JAWS and NVDA and both had the same behavior. Let me know if there is any other information you may need.

Thanks,
Allen

[nikolay-kolarov]

Hi,

Please check this issue for more details: FreedomScientific/standards-support#320.
This comes from the browser acc mapping. There are workarounds, which can be discussed.

Best Regards,
Nikolay

[allen138]

Hi @nikolay-kolarov,

I will utilize the aria-invalid attribute.

Thanks,
Allen

[allen138]

Hi @nikolay-kolarov, @ilhan007,

The only issue with using the aria-invalid attribute is the ui5-input only adds this attribute if the value state is an error, otherwise its undefined. Please see here: https://github.com/SAP/ui5-webcomponents/blob/master/packages/main/src/Input.js#L1060

The other issue I find is if I use the 'required' property it will add both a required and aria-required="true" attribute. Seems to do so because of the following:

• https://github.com/SAP/ui5-webcomponents/blob/master/packages/main/src/Input.hbs#L16
• https://github.com/SAP/ui5-webcomponents/blob/master/packages/main/src/Input.hbs#L28
• https://github.com/SAP/ui5-webcomponents/blob/master/packages/main/src/Input.js#L1068

Its may be possible at runtime to get a reference to the ui5-input and access the _inputAccInfo object and set ariaRequired="true" rather than using the property 'required', but I would hope to avoid this approach.

I think a viable solution would be to modify the ui5-input to either only use the attribute aria-required, not 'required', or to be able to declare the aria-invalid state.

Thanks,
Allen

[ilhan007]

Hello @nikolay-kolarov can you see the comment by Allen and comment on the issue.

[niyap]

Hello @allen138,

Since, when using the "required" html attribute, "Invalid entry" is expected to be read out, we decided to use aria-required attribute instead.
For all the input-based components, where both attributes were rendered, "required" is removed and for those where only "required" was used, it is now changed to "aria-required".
Here is a reference to the change: #2552

Best Regards,
Niya

[allen138]

Sounds good. Thank you!