search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

Input: A11y Issue - Suggestion Items inside Input are not read properly by screen reader #5732

Closed yzy415 closed 2 years ago

yzy415 commented 2 years ago

Bug Description

When using Jaws and VoiceOver, 1) Switch to VPC mode -> press arrow keys to read through the options of the Search drop-down -> Observe each option is announced twice,

2) 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.

3) Incorrect state of "selected" is announced even before selecting the option

Expected Behavior

1) Each option should be read only once

2) 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>

3) The selected state should be announced only after we press the ENTER key to select the option

Steps to Reproduce

  1. Go to https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-input--with-suggestion-item
  2. Launch the Jaws or VoiceOver
  3. Focus on the input box in the "Input with customizable SuggestionItem" section and input the letter 'b'
  4. Use the arrow down key to read through the dropdown
  5. 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. a11y input

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

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.

ndeshev commented 2 years ago

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 commented 2 years ago

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.

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 commented 2 years ago

Hello @yzy415 ,

  1. For the first issue as @ndeshev pointed the double announcement issue is known to us and it will be handled in #5625 .
  2. For the second issue - this use case is not currently supported (announcement of icon alternative texts in suggestion items). @nikolay-kolarov Do we have such a case in UI5? Do we support icon in the suggestions, since I was not able to find an example for that?
  3. For the third issue - this is actually expected. When navigating inside the list you are also changing the selected state of the list item. This is not only spoken by the SR software, but also visually indicated. For reference we follow https://www.w3.org/WAI/ARIA/apg/patterns/listbox/ where it is pointed that an option could be selected, when the focus goes on it.

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 commented 2 years ago

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 (https://github.com/SAP/ui5-webcomponents/issues/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 commented 2 years ago

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