refactor: improve tabbable elements detection (#865)

FIXES: #858

Refactor FocusHelper.js (used to export a class previously) as follows:
(1) All logic, related to finding focusable elements is just split (without changes) to:

util/FocusableElements.js
util/isNodeClickable.js
util/isNodeHidden.js
(2) The logic, related to finding tabbable elements is refactored, considering the issues we have
that not all child elements have been traversed and slotted nodes have not been traversed via the shadow DOM order:

util/TabbableElements.js
util/isNodeTabbable.js
Add test for tab handling in the ListItem

Author: ilhan007

packages/base/src/FocusHelper.js

@@ -0,0 +1,60 @@
+import UI5Element from "../UI5Element.js";
+import isNodeHidden from "./isNodeHidden.js";
+import isNodeClickable from "./isNodeClickable.js";
+
+const getFirstFocusableElement = container => {
+	if (!container || isNodeHidden(container)) {
+		return null;
+	}
+
+	return findFocusableElement(container, true);
+};
+
+const getLastFocusableElement = container => {
+	if (!container || isNodeHidden(container)) {
+		return null;
+	}
+
+	return findFocusableElement(container, false);
+};
+
+const findFocusableElement = (container, forward) => {
+	let child;
+	if (container.assignedNodes && container.assignedNodes()) {
+		const assignedElements = container.assignedNodes();
+		child = forward ? assignedElements[0] : assignedElements[assignedElements.length - 1];
+	} else {
+		child = forward ? container.firstChild : container.lastChild;
+	}
+
+	let focusableDescendant;
+
+	while (child) {
+		const originalChild = child;
+
+		child = child instanceof UI5Element ? child.getFocusDomRef() : child;
+		if (!child) {
+			return null;
+		}
+
+		if (child.nodeType === 1 && !isNodeHidden(child)) {
+			if (isNodeClickable(child)) {
+				return (child && typeof child.focus === "function") ? child : null;
+			}
+
+			focusableDescendant = findFocusableElement(child, forward);
+			if (focusableDescendant) {
+				return (focusableDescendant && typeof focusableDescendant.focus === "function") ? focusableDescendant : null;
+			}
+		}
+
+		child = forward ? originalChild.nextSibling : originalChild.previousSibling;
+	}
+
+	return null;
+};
+
+export {
+	getFirstFocusableElement,
+	getLastFocusableElement,
+};

packages/base/src/util/FocusableElements.js

@@ -0,0 +1,44 @@
+
+import isNodeTabbable from "./isNodeTabbable.js";
+
+const getTabbableElements = node => {
+	return getTabbables(node.children);
+};
+
+const getLastTabbableElement = node => {
+	const tabbables = getTabbables(node.children);
+	return tabbables.length ? tabbables[tabbables.length - 1] : null;
+};
+
+const getTabbables = (nodes, tabbables) => {
+	const tabbablesNodes = tabbables || [];
+
+	Array.from(nodes).forEach(currentNode => {
+		if (currentNode.nodeType === Node.TEXT_NODE) {
+			return;
+		}
+
+		if (currentNode.shadowRoot) {
+			// get the root node of the ShadowDom (1st none style tag)
+			const children = currentNode.shadowRoot.children;
+			currentNode = Array.from(children).filter(node => node.tagName !== "STYLE")[0];
+		}
+
+		if (isNodeTabbable(currentNode)) {
+			tabbablesNodes.push(currentNode);
+		}
+
+		if (currentNode.tagName === "SLOT") {
+			getTabbables(currentNode.assignedNodes(), tabbablesNodes);
+		} else {
+			getTabbables(currentNode.children, tabbablesNodes);
+		}
+	});
+
+	return tabbablesNodes;
+};
+
+export {
+	getTabbableElements,
+	getLastTabbableElement,
+};

packages/base/src/util/TabbableElements.js

@@ -0,0 +1,19 @@
+const rClickable = /^(?:a|area)$/i;
+const rFocusable = /^(?:input|select|textarea|button)$/i;
+
+const isNodeClickable = node => {
+	if (node.disabled) {
+		return false;
+	}
+
+	const tabIndex = node.getAttribute("tabindex");
+	if (tabIndex !== null && tabIndex !== undefined) {
+		return parseInt(tabIndex) >= 0;
+	}
+
+	return rFocusable.test(node.nodeName)
+		|| (rClickable.test(node.nodeName)
+		&& node.href);
+};
+
+export default isNodeClickable;

packages/base/src/util/isNodeClickable.js

@@ -0,0 +1,13 @@
+const isNodeHidden = node => {
+	if (node.nodeName === "SLOT") {
+		return false;
+	}
+
+	const rect = node.getBoundingClientRect();
+
+	return (node.offsetWidth <= 0 && node.offsetHeight <= 0)
+		|| node.style.visibility === "hidden"
+		|| (rect.width === 0 && 0 && rect.height === 0);
+};
+
+export default isNodeHidden;

packages/base/src/util/isNodeHidden.js

@@ -0,0 +1,28 @@
+import isNodeHidden from "./isNodeHidden";
+
+const isNodeTabbable = node => {
+	if (!node) {
+		return false;
+	}
+
+	const nodeName = node.nodeName.toLowerCase();
+
+	if (node.hasAttribute("data-sap-no-tab-ref")) {
+		return false;
+	}
+
+	if (isNodeHidden(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;
+	}
+};
+
+export default isNodeTabbable;