ui5-multi-input: [a11y] item cannot be deleted by keyboard, value-help-icon can not be focused and no message for screen readers

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

ui5-multi-input: [a11y] item cannot be deleted by keyboard, value-help-icon can not be focused and no message for screen readers #2459

Closed sleric1024 closed 3 years ago

sleric1024 commented 4 years ago

Describe the bug

When using ui5-multi-input, we can click the icon by mouse to render a popup. Current issues:

The value-help-icon can not be focused by keyboard Tab. As accessibility requirements described: the focus should come to all the interactive elements.
When the multi-input control is focused, screen reader should read what control it is and tell the sight disability what he/she could do todo the following thing. For example: when focusing to the value-help-icon, it will tell user this will open a popup
When several items were selected, currently, users cannot using keyboard such as the arrow key & backspace to focus to the related item to select and delete.

Expected behavior 2020-11-11_17-10-58 (1)

Context

UI5 Web Components version
OS/Platform: MacOS
Browser (if relevant): Chrome
Other information: {...}

Affected components (if known)

Log output / Any errors in the console

{...}

Organization: SuccessFactors

fifoosid commented 3 years ago

Hi @sleric1024

Can you provide an isolated example of how exactly are you using the ui5-multi-combobox. It would be most convenient if you use CodeSandbox.

Also, it would be useful if you provide the exact version of UI5 Web Components that you are using.

sleric1024 commented 3 years ago

@fifoosid , Thanks for your reply.

1 Currently, the item listed in the input can be focused with arrow keys which has the same behavior as UI5 MultiInput did. But we can not use Del or Backspace key to delete the focused item.
2 In UI5 MultiInput control, it will render with the a11y attributes such as: aria-roledescription="Multi Value Input", and for value help case: it will contains aria-describedby="Value help available", which will be read by screen readers to tell users what the control it is and will be more clear for users to use.

You may refer to this example: (1.1.0-rc-10) https://codesandbox.io/s/ui5-multi-input-ftipv?file=/index.html

UI5 MultiInput behavior https://sapui5.hana.ondemand.com/#/entity/sap.m.MultiInput/sample/sap.m.sample.MultiInput https://sapui5.hana.ondemand.com/#/entity/sap.m.MultiInput/sample/sap.m.sample.MultiInputValueHelp

fifoosid commented 3 years ago

FYI @SAP/ui5-webcomponents-topic-rl

MapTo0 commented 3 years ago

When pressing delete / backspace, token-delete event is called and app developer should handle it and remove the token manually.

https://codesandbox.io/s/ui5-multi-input-forked-5wvrl?file=/src/index.js

niyap commented 3 years ago

Hello @sleric1024,

For the first issue reported, please look into the MapTo0 comment above. For the second one, we will handle it as a feature request because the accessibility specification of the ui5-multi-input component is currently worked on and it is still in progress.

Best Regards, Niya