fix(ui5-li): remove “delete” button from tab chain(#3290)

"Delete" button should not be part of tab chain. It should be accessed only with mouse.

Fixes: #2964

Author: nnaydenow

packages/base/src/util/TabbableElements.js

@@ -17,7 +17,7 @@ const getTabbables = (nodes, tabbables) => {
 	}
 
 	Array.from(nodes).forEach(currentNode => {
-		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE) {
+		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE || currentNode.hasAttribute("data-sap-no-tab-ref")) {
 			return;
 		}
 

packages/base/src/util/isNodeTabbable.js

@@ -15,14 +15,14 @@ const isNodeTabbable = node => {
 		return false;
 	}
 
-	if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
-		return !node.disabled;
-	}
-
 	const tabIndex = node.getAttribute("tabindex");
 	if (tabIndex !== null && tabIndex !== undefined) {
 		return parseInt(tabIndex) >= 0;
 	}
+
+	if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
+		return !node.disabled;
+	}
 };
 
 export default isNodeTabbable;

packages/main/src/ListItem.hbs

@@ -85,6 +85,7 @@
 		<div class="ui5-li-deletebtn">
 			<ui5-button
 				tabindex="-1"
+				data-sap-no-tab-ref
 				id="{{_id}}-deleteSelectionElement"
 				design="Transparent"
 				icon="decline"