Repository navigation
Input: A11y Issue - Suggestion Items inside Input are not read properly by screen reader #5732
Description
Bug Description
When using Jaws and VoiceOver,
-
Switch to VPC mode -> press arrow keys to read through the options of the Search drop-down -> Observe each option is announced twice,
-
Both in forms and VPC modes, as we read through the Search drop-down options, the text alternative of icons in the options is not announced.
-
Incorrect state of "selected" is announced even before selecting the option
Expected Behavior
-
Each option should be read only once
-
Visually these icons are present to indicate that a user can search for a term in a specific scope. Hence, the same text alternative for the icons must also be conveyed to the screen reader users. eg: <Icon Alternative> <search term>
-
The selected state should be announced only after we press the ENTER key to select the option
Steps to Reproduce
- Go to https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-input--with-suggestion-item
- Launch the Jaws or VoiceOver
- Focus on the input box in the "Input with customizable SuggestionItem" section and input the letter 'b'
- Use the arrow down key to read through the dropdown
- You will hear "Bulgaria. List 3 of 8 items Bulgaria selected". That's to say the "Bulgaria" would be read twice, the "globe" icon before "Bulgaria" would not be read and the "selected" would also be spoken regardless of the fact that the user has not selected this item using the enter key.
Isolated Example
https://codesandbox.io/s/web-compoennt-ui5-input-0nox78?file=/src/App.js
You can get the same result as mentioned before when inputting the letter 'b'
Priority
- Low
- Medium
- High
- Very High
UI5 Web Components for React Information
@ui5/webcomponents version: 1.6.0
@ui5/webcomponents-react version: 0.27.0
Operating System: MacOS
Browser: Chrome
Addtional Text
I am from SAP Successfactors, and this issue is reported by SF a11y expert.
Metadata
Metadata
Assignees
Type
Projects
- Status
Activity
[-]Input: A11y Issue - Suggestion Items [/-][+]Input: A11y Issue - Suggestion Items inside Input are not read properly by screen reader[/+]ndeshev commentedon Sep 1, 2022
Hi @SAP/ui5-webcomponents-topic-rl could you please take a look at the described issues.
The double item announcement issue is also reported in #5625
The icon accessibility issue that is described is caused from outside as the icon is a slot in our case. If its accessibility properties are set - the problem shouldn't exist.
The 'selected' speech output on item navigation seems to not be correct as the suggestion is not being selected in the context of the Input component. I also checked if there is such announcement in OpenUI5 and there isn't.
yzy415 commentedon Sep 6, 2022
Hi ndeshev,
Sorry to miss your feedback. But for the icon accessibility issue, SuggestionItems from ui5-webcomponents-react provide no prop for icon accessibility but the icon URI. So how can we set the accessibility properties for icons in the SuggestionItems like we use the Icon component directly?
elenastoyanovaa commentedon Sep 8, 2022
Hello @yzy415 ,
I want to inform you that we are working on the issue with priority and we will discuss with accessibility expert and the developers the case with a suggestion item with an icon inside.
Kind Regards,
Elena
elenastoyanovaa commentedon Sep 8, 2022
Hello @yzy415 ,
We have analysed the second issue and currently we stick to the implementation of the StandardListItem where the icon is purely decorative.
Please check the following example here: https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.StandardListItem/sample/sap.m.sample.StandardListItemInfoStateInverted
In order to achieve the desired behavior you could use our feature InvisibleMessage. You can check it out in the Accessibility features section here: https://sap.github.io/ui5-webcomponents/main/playground/advanced/accessibility/
If you attach to one of the events of the input, for example suggestion-item-preview and call the announce method of the InvisibleMessage you can trigger an announcement of your own, which will be spoken in addition to the currently present announcement.
In future we plan to enable the possibility to add custom items (#5128) as suggestion items and you will be able to add icons inside, but since this will be a slot, again you will need to manually trigger an item announcement, since we could not reach anything inside the slot that you are passing, so again the InvisibleMessage will be needed.
Kind Regards,
Elena
anuvenkatesh1 commentedon Sep 15, 2022
@elenastoyanovaa
I have discussed #3 with Stefan and Oliver. Announcing "selected" state when the list item is just focused is incorrect. The list item can be considered as "selected" only after the user presses ENTER on it. Until then as we arrow down, the list options are only "focused". The state (blue highlight) indicates the focused state.
@yzy415 Could you please reopen this ticket for #3?