search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
439 stars 98 forks source link

[Input/Text]: [While navigating around input fields and start entering text remaining character count information such as ‘3/20, 4/50’ is not being read.] #6191

Closed jadhavarjun closed 2 months ago

jadhavarjun commented 2 months ago

Describe the bug

While navigating around input fields and start entering text remaining character count information such as ‘3/20, 4/50’ is not being read.

I have attached screenshot below. image

Isolated Example

https://stackblitz.com/edit/github-rouwys?file=src%2FApp.tsx

Reproduction steps

1.Open stackblitz and JAWS speech reader 2.By Tab goto input field when focus is on input field star entering text. 3.And check right hand side 0/20 count will be increasing when entering text but that 0/20 1/20 2/20 not being read by the JAWS speech reader. ...

Expected Behaviour

Along with the name and UI place holder text, and if anything, changing in the input field real time should also be read by the screen reader.

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

Lukas742 commented 2 months ago

Hi @jadhavarjun

passing a text to the icon prop/slot is not supported, only an Icon should be passed there. Since the Input (ui5-input) is a web component, developed by the ui5-webcomponents team, please open a feature request in their repo asking for this functionality.

If you want to keep your custom implementation, you can most probably announce this information via accessibleName / accessibleNameRef.

jadhavarjun commented 2 months ago

Hi @Lukas742 ,

using accessibleName and accessibleNameRef how can I solve this issue can you help me with adding these changes in reproduce code that I given means where should i add that attributes I have already tested adding these attribute in tag. here is the link: https://stackblitz.com/edit/github-rouwys?file=src%2FApp.tsx

Lukas742 commented 2 months ago

accessibleNameRef: Receives id(or many ids) of the elements that label the input.

So passing a string that isn't an ID of an element won't work. If you want to pass a string use accessibleName.

https://stackblitz.com/edit/github-rouwys-jaazqd?file=src%2FApp.tsx

I've tested it with Apple VoiceOver and there it seems to work.

Still, this is not the intended usage of the icon slot, so there may be other side-effects, so I would highly recommend creating a feature request.