ui5-li/ui5-li-custom: accessibility tab through issue

[SherrySherry123]

I am from successfactors team, we are building our app based on ui5-webcomponents. Describe the bug When tab through the elements in ui5-li/ui5-li-custom, we hope only the current tabbed element should be focused; But the actual behavior is item(ui5-li/ui5-li-custom) also be focused when tab on link/button; To reproduce Steps to reproduce the behavior:

1. Create one ui5-li with ui5-link;
2. Use keyboard to tab through the ui5-list
3. When tab on the ui5-link Actual behavior: both ui5-link and ui5-li are focused; Expected behavior: only ui5-link should be focused;

   <ui5-list id="myList5" mode="Delete">
   <ui5-li>
            <ui5-link href="https://www.sap.com">Standard Link</ui5-link></ui5-li>
   </ui5-list>

   Isolated example https://sap.github.io/ui5-webcomponents/playground/components/List/

Expected behavior When tab through the elements in ui5-list, we hope only the current tabbed element should be focused; When tab on the ui5-link, only 'ui5-link' should be focused, item's focus(ui5-li/ui5-li-custom) should be removed at that time.

Screenshots

[ilhan007]

Hello @SherrySherry123

What version do you use?

This has to be fixed in the latest "next" tag release (0.0.0-934b4df24 ) in npm and the focus should work as expected with both ui5-button and ui5-link.

Try the same example you refer, but with this URL, with the "master" word in it, it does not reproduce here: https://sap.github.io/ui5-webcomponents/master/playground/components/List/

To install with a specific tag you can use @[tag]: npm install @ui5/webcomponents@next

In future, this fix will be part of the stable "rc" versions.

BR, ilhan