@ui5/webcomponents-base 0.0.0-de4752078 → 0.0.0-deac3098a

package/src/renderer/directives/style-map.js

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * This is the original style-map.js directive from lit-html 2 with the only difference that "render" is not called even for the first rendering (update is used instead)
+ */
+
+import { noChange } from 'lit-html';
+import { directive, Directive, PartType, } from 'lit-html/directive.js';
+class StyleMapDirective extends Directive {
+	constructor(partInfo) {
+		var _a;
+		super(partInfo);
+		if (partInfo.type !== PartType.ATTRIBUTE ||
+			partInfo.name !== 'style' ||
+			((_a = partInfo.strings) === null || _a === void 0 ? void 0 : _a.length) > 2) {
+			throw new Error('The `styleMap` directive must be used in the `style` attribute ' +
+				'and must be the only part in the attribute.');
+		}
+	}
+	render(styleInfo) {
+		return "";
+	}
+	update(part, [styleInfo]) {
+		const { style } = part.element;
+		if (this._previousStyleProperties === undefined) {
+			this._previousStyleProperties = new Set();
+			for (const name in styleInfo) {
+				this._previousStyleProperties.add(name);
+			}
+			// return this.render(styleInfo);
+		}
+		// Remove old properties that no longer exist in styleInfo
+		// We use forEach() instead of for-of so that re don't require down-level
+		// iteration.
+		this._previousStyleProperties.forEach((name) => {
+			// If the name isn't in styleInfo or it's null/undefined
+			if (styleInfo[name] == null) {
+				this._previousStyleProperties.delete(name);
+				if (name.includes('-')) {
+					style.removeProperty(name);
+				}
+				else {
+					// Note reset using empty string (vs null) as IE11 does not always
+					// reset via null (https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles)
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					style[name] = '';
+				}
+			}
+		});
+		// Add or update properties
+		for (const name in styleInfo) {
+			const value = styleInfo[name];
+			if (value != null) {
+				this._previousStyleProperties.add(name);
+				if (name.includes('-')) {
+					style.setProperty(name, value);
+				}
+				else {
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					style[name] = value;
+				}
+			}
+		}
+		return noChange;
+	}
+}
+
+export const styleMap = directive(StyleMapDirective);

package/src/renderer/executeTemplate.js

@@ -1,4 +1,4 @@
-import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScope.js";
+import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScopeUtils.js";
 
 /**
  * Runs a component's template with the component's current state, while also scoping HTML
@@ -9,9 +9,26 @@ import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../Cus
  * @returns {*}
  */
 const executeTemplate = (template, component) => {
-	const tagsToScope = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
+	const tagsToScope = getTagsToScope(component);
 	const scope = getCustomElementsScopingSuffix();
 	return template(component, tagsToScope, scope);
 };
 
+/**
+ * Returns all tags, used inside component's template subject to scoping.
+ * @param component - the component
+ * @returns {Array[]}
+ * @private
+ */
+const getTagsToScope = component => {
+	const componentTag = component.constructor.getMetadata().getPureTag();
+	const tagsToScope = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
+
+	if (shouldScopeCustomElement(componentTag)) {
+		tagsToScope.push(componentTag);
+	}
+
+	return tagsToScope;
+};
+
 export default executeTemplate;

package/src/theming/CustomStyle.js

@@ -1,7 +1,8 @@
 import { reRenderAllUI5Elements } from "../Render.js";
+import getSharedResource from "../getSharedResource.js";
 import EventProvider from "../EventProvider.js";
 
-const eventProvider = new EventProvider();
+const eventProvider = getSharedResource("CustomStyle.eventProvider", new EventProvider());
 const CUSTOM_CSS_CHANGE = "CustomCSSChange";
 
 const attachCustomCSSChange = listener => {
@@ -16,14 +17,33 @@ const fireCustomCSSChange = tag => {
 	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
 };
 
-const customCSSFor = {};
+const customCSSFor = getSharedResource("CustomStyle.customCSSFor", {});
+
+// Listen to the eventProvider, in case other copies of this CustomStyle module fire this
+// event, and this copy would therefore need to reRender the ui5 webcomponents; but
+// don't reRender if it was this copy that fired the event to begin with.
+let skipRerender;
+attachCustomCSSChange(tag => {
+	if (!skipRerender) {
+		reRenderAllUI5Elements({ tag });
+	}
+});
 
 const addCustomCSS = (tag, css) => {
 	if (!customCSSFor[tag]) {
 		customCSSFor[tag] = [];
 	}
 	customCSSFor[tag].push(css);
-	fireCustomCSSChange(tag);
+
+	skipRerender = true;
+	try {
+		// The event is fired and the attached event listeners are all called synchronously
+		// The skipRerender flag will be used to avoid calling reRenderAllUI5Elements twice when it is this copy
+		// of CustomStyle.js which is firing the `CustomCSSChange` event.
+		fireCustomCSSChange(tag);
+	} finally {
+		skipRerender = false;
+	}
 
 	return reRenderAllUI5Elements({ tag });
 };

package/src/theming/applyTheme.js

@@ -1,10 +1,10 @@
 import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
-import createThemePropertiesStyleTag from "./createThemePropertiesStyleTag.js";
+import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
 
-const BASE_THEME_PACKAGE = "@ui5/webcomponents-theme-base";
+const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming";
 
 const isThemeBaseRegistered = () => {
 	const registeredPackages = getRegisteredPackages();
@@ -16,15 +16,14 @@ const loadThemeBase = async theme => {
 		return;
 	}
 
-	const cssText = await getThemeProperties(BASE_THEME_PACKAGE, theme);
-	createThemePropertiesStyleTag(cssText, BASE_THEME_PACKAGE);
+	const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme);
+	if (cssData) {
+		createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE);
+	}
 };
 
 const deleteThemeBase = () => {
-	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${BASE_THEME_PACKAGE}"]`);
-	if (styleElement) {
-		styleElement.parentElement.removeChild(styleElement);
-	}
+	removeStyle("data-ui5-theme-properties", BASE_THEME_PACKAGE);
 };
 
 const loadComponentPackages = async theme => {
@@ -34,8 +33,10 @@ const loadComponentPackages = async theme => {
 			return;
 		}
 
-		const cssText = await getThemeProperties(packageName, theme);
-		createThemePropertiesStyleTag(cssText, packageName);
+		const cssData = await getThemeProperties(packageName, theme);
+		if (cssData) {
+			createOrUpdateStyle(cssData, "data-ui5-theme-properties", packageName);
+		}
 	});
 };
 

package/src/theming/getEffectiveLinksHrefs.js

@@ -0,0 +1,27 @@
+import { getUrl } from "../CSP.js";
+import { getFeature } from "../FeaturesRegistry.js";
+
+const flatten = arr => {
+	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
+};
+
+const getEffectiveLinksHrefs = (ElementClass, forStaticArea = false) => {
+	let stylesData = ElementClass[forStaticArea ? "staticAreaStyles" : "styles"];
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
+
+	if (!stylesData) {
+		return;
+	}
+
+	if (!Array.isArray(stylesData)) {
+		stylesData = [stylesData];
+	}
+
+	if (OpenUI5Enablement) {
+		stylesData.push(OpenUI5Enablement.getBusyIndicatorStyles());
+	}
+
+	return flatten(stylesData).filter(data => !!data).map(data => getUrl(data.packageName, data.fileName));
+};
+
+export default getEffectiveLinksHrefs;

package/src/theming/getEffectiveStyle.js

@@ -1,5 +1,6 @@
 import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
 import getStylesString from "./getStylesString.js";
+import { getFeature } from "../FeaturesRegistry.js";
 
 const effectiveStyleMap = new Map();
 
@@ -10,9 +11,15 @@ attachCustomCSSChange(tag => {
 const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
 	const tag = ElementClass.getMetadata().getTag();
 	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
 
 	if (!effectiveStyleMap.has(key)) {
 		let effectiveStyle;
+		let busyIndicatorStyles = "";
+
+		if (OpenUI5Enablement) {
+			busyIndicatorStyles = getStylesString(OpenUI5Enablement.getBusyIndicatorStyles());
+		}
 
 		if (forStaticArea) {
 			effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
@@ -21,6 +28,8 @@ const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
 			const builtInStyles = getStylesString(ElementClass.styles);
 			effectiveStyle = `${builtInStyles} ${customStyle}`;
 		}
+
+		effectiveStyle = `${effectiveStyle} ${busyIndicatorStyles}`;
 		effectiveStyleMap.set(key, effectiveStyle);
 	}
 

package/src/theming/getStylesString.js

@@ -1,9 +1,11 @@
 const getStylesString = styles => {
 	if (Array.isArray(styles)) {
-		return flatten(styles.filter(style => !!style)).join(" ");
+		return flatten(styles.filter(style => !!style)).map(style => {
+			return typeof style === "string" ? style : style.content;
+		}).join(" ");
 	}
 
-	return styles;
+	return typeof styles === "string" ? styles : styles.content;
 };
 
 const flatten = arr => {

package/src/theming/getThemeDesignerTheme.js

@@ -1,15 +1,26 @@
+const warnings = new Set();
+
 const getThemeMetadata = () => {
 	// Check if the class was already applied, most commonly to the link/style tag with the CSS Variables
-	let el = document.querySelector(".sapThemeMetaData-Base-baseLib");
+	let el = document.querySelector(".sapThemeMetaData-Base-baseLib") || document.querySelector(".sapThemeMetaData-UI5-sap-ui-core");
 	if (el) {
 		return getComputedStyle(el).backgroundImage;
 	}
 
 	el = document.createElement("span");
 	el.style.display = "none";
+
+	// Try with sapThemeMetaData-Base-baseLib first
 	el.classList.add("sapThemeMetaData-Base-baseLib");
 	document.body.appendChild(el);
-	const metadata = getComputedStyle(el).backgroundImage;
+	let metadata = getComputedStyle(el).backgroundImage;
+
+	// Try with sapThemeMetaData-UI5-sap-ui-core only if the previous selector was not found
+	if (metadata === "none") {
+		el.classList.add("sapThemeMetaData-UI5-sap-ui-core");
+		metadata = getComputedStyle(el).backgroundImage;
+	}
+
 	document.body.removeChild(el);
 
 	return metadata;
@@ -24,14 +35,20 @@ const parseThemeMetadata = metadataString => {
 			try {
 				paramsString = decodeURIComponent(paramsString);
 			} catch (ex) {
-				console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+				if (!warnings.has("decode")) {
+					console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+					warnings.add("decode");
+				}
 				return;
 			}
 		}
 		try {
 			return JSON.parse(paramsString);
 		} catch (ex) {
-			console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+			if (!warnings.has("parse")) {
+				console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+				warnings.add("parse");
+			}
 		}
 	}
 };
@@ -44,7 +61,10 @@ const processThemeMetadata = metadata => {
 		themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
 		baseThemeName = metadata.Extends[0];
 	} catch (ex) {
-		console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+		if (!warnings.has("object")) {
+			console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+			warnings.add("object");
+		}
 		return;
 	}
 

package/src/theming/preloadLinks.js

@@ -0,0 +1,23 @@
+import getEffectiveLinksHrefs from "./getEffectiveLinksHrefs.js";
+import createLinkInHead from "../util/createLinkInHead.js";
+import { shouldUseLinks, shouldPreloadLinks } from "../CSP.js";
+
+const preloaded = new Set();
+
+const preloadLinks = ElementClass => {
+	if (!shouldUseLinks() || !shouldPreloadLinks()) {
+		return;
+	}
+
+	const linksHrefs = getEffectiveLinksHrefs(ElementClass, false) || [];
+	const staticAreaLinksHrefs = getEffectiveLinksHrefs(ElementClass, true) || [];
+
+	[...linksHrefs, ...staticAreaLinksHrefs].forEach(href => {
+		if (!preloaded.has(href)) {
+			createLinkInHead(href, { rel: "preload", as: "style" });
+			preloaded.add(href);
+		}
+	});
+};
+
+export default preloadLinks;

package/src/types/DataType.js

@@ -11,6 +11,18 @@ class DataType {
 	static isValid(value) {
 	}
 
+	static attributeToProperty(attributeValue) {
+		return attributeValue;
+	}
+
+	static propertyToAttribute(propertyValue) {
+		return `${propertyValue}`;
+	}
+
+	static valuesAreEqual(value1, value2) {
+		return value1 === value2;
+	}
+
 	static generateTypeAccessors(types) {
 		Object.keys(types).forEach(type => {
 			Object.defineProperty(this, type, {

package/src/types/Float.js

@@ -5,6 +5,10 @@ class Float extends DataType {
 		// Assuming that integers are floats as well!
 		return Number(value) === value;
 	}
+
+	static attributeToProperty(attributeValue) {
+		return parseFloat(attributeValue);
+	}
 }
 
 export default Float;

package/src/types/Integer.js

@@ -4,6 +4,10 @@ class Integer extends DataType {
 	static isValid(value) {
 		return Number.isInteger(value);
 	}
+
+	static attributeToProperty(attributeValue) {
+		return parseInt(attributeValue);
+	}
 }
 
 export default Integer;

package/src/types/InvisibleMessageMode.js

@@ -0,0 +1,30 @@
+import DataType from "./DataType.js";
+
+/**
+ * Enumeration for different mode behaviors of the <code>InvisibleMessage</code>.
+ * @private
+ */
+const InvisibleMessageModes = {
+
+	/**
+     * Indicates that updates to the region should be presented at the next graceful opportunity,
+     * such as at the end of reading the current sentence, or when the user pauses typing.
+     */
+	Polite: "Polite",
+
+	/**
+     * Indicates that updates to the region have the highest priority and should be presented to the user immediately.
+     */
+	Assertive: "Assertive",
+
+};
+
+class InvisibleMessageMode extends DataType {
+	static isValid(value) {
+		return !!InvisibleMessageModes[value];
+	}
+}
+
+InvisibleMessageMode.generateTypeAccessors(InvisibleMessageModes);
+
+export default InvisibleMessageModes;

package/src/updateShadowRoot.js

@@ -1,7 +1,9 @@
 import executeTemplate from "./renderer/executeTemplate.js";
 import getConstructableStyle from "./theming/getConstructableStyle.js";
 import getEffectiveStyle from "./theming/getEffectiveStyle.js";
+import getEffectiveLinksHrefs from "./theming/getEffectiveLinksHrefs.js";
 import isLegacyBrowser from "./isLegacyBrowser.js";
+import { shouldUseLinks } from "./CSP.js";
 
 /**
  * Updates the shadow root of a UI5Element or its static area item
@@ -9,18 +11,20 @@ import isLegacyBrowser from "./isLegacyBrowser.js";
  * @param forStaticArea
  */
 const updateShadowRoot = (element, forStaticArea = false) => {
-	let styleToPrepend;
+	let styleStrOrHrefsArr;
 	const template = forStaticArea ? "staticAreaTemplate" : "template";
 	const shadowRoot = forStaticArea ? element.staticAreaItem.shadowRoot : element.shadowRoot;
 	const renderResult = executeTemplate(element.constructor[template], element);
 
-	if (document.adoptedStyleSheets) { // Chrome
+	if (shouldUseLinks()) {
+		styleStrOrHrefsArr = getEffectiveLinksHrefs(element.constructor, forStaticArea);
+	} else if (document.adoptedStyleSheets) { // Chrome
 		shadowRoot.adoptedStyleSheets = getConstructableStyle(element.constructor, forStaticArea);
 	} else if (!isLegacyBrowser()) { // FF, Safari
-		styleToPrepend = getEffectiveStyle(element.constructor, forStaticArea);
+		styleStrOrHrefsArr = getEffectiveStyle(element.constructor, forStaticArea);
 	}
 
-	element.constructor.render(renderResult, shadowRoot, styleToPrepend, { eventContext: element });
+	element.constructor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
 };
 
 export default updateShadowRoot;

package/src/util/AriaLabelHelper.js

@@ -1,9 +1,9 @@
 import findNodeOwner from "./findNodeOwner.js";
 
 const getEffectiveAriaLabelText = el => {
-	if (!el.ariaLabelledby) {
-		if (el.ariaLabel) {
-			return el.ariaLabel;
+	if (!el.accessibleNameRef) {
+		if (el.accessibleName) {
+			return el.accessibleName;
 		}
 
 		return undefined;
@@ -19,7 +19,7 @@ const getEffectiveAriaLabelText = el => {
  * @param {String} readyIds (Optional) Defines a string of elements ids. The text of these elements will be returned. If used you should provide either el or ownerDocument
  */
 const getAriaLabelledByTexts = (el, ownerDocument, readyIds = "") => {
-	const ids = (readyIds && readyIds.split(" ")) || el.ariaLabelledby.split(" ");
+	const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
 	const owner = ownerDocument || findNodeOwner(el);
 	let result = "";
 

package/src/util/FocusableElements.js

@@ -5,23 +5,27 @@ const isFocusTrap = el => {
 	return el.hasAttribute("data-ui5-focus-trap");
 };
 
-const getFirstFocusableElement = async container => {
+const getFirstFocusableElement = async (container, startFromContainer) => {
 	if (!container || isNodeHidden(container)) {
 		return null;
 	}
 
-	return findFocusableElement(container, true);
+	return findFocusableElement(container, true, startFromContainer);
 };
 
-const getLastFocusableElement = async container => {
+const getLastFocusableElement = async (container, startFromContainer) => {
 	if (!container || isNodeHidden(container)) {
 		return null;
 	}
 
-	return findFocusableElement(container, false);
+	return findFocusableElement(container, false, startFromContainer);
 };
 
-const findFocusableElement = async (container, forward) => {
+const isElemFocusable = el => {
+	return el.hasAttribute("data-ui5-focus-redirect") || !isNodeHidden(el);
+};
+
+const findFocusableElement = async (container, forward, startFromContainer) => {
 	let child;
 
 	if (container.shadowRoot) {
@@ -29,8 +33,10 @@ const findFocusableElement = async (container, forward) => {
 	} else if (container.assignedNodes && container.assignedNodes()) {
 		const assignedElements = container.assignedNodes();
 		child = forward ? assignedElements[0] : assignedElements[assignedElements.length - 1];
+	} else if (startFromContainer) {
+		child = container;
 	} else {
-		child = forward ? container.firstChild : container.lastChild;
+		child = forward ? container.firstElementChild : container.lastElementChild;
 	}
 
 	let focusableDescendant;
@@ -48,7 +54,7 @@ const findFocusableElement = async (container, forward) => {
 			return null;
 		}
 
-		if (child.nodeType === 1 && !isNodeHidden(child) && !isFocusTrap(child)) {
+		if (child.nodeType === 1 && isElemFocusable(child) && !isFocusTrap(child)) {
 			if (isNodeClickable(child)) {
 				return (child && typeof child.focus === "function") ? child : null;
 			}

package/src/util/HTMLSanitizer.js

@@ -0,0 +1,7 @@
+import sanitizeHTML from "../sap/base/security/sanitizeHTML.js";
+import URLListValidator from "../sap/base/security/URLListValidator.js";
+
+export {
+	URLListValidator,
+	sanitizeHTML,
+};

package/src/util/InvisibleMessage.js

@@ -0,0 +1,60 @@
+import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
+import getSingletonElementInstance from "./getSingletonElementInstance.js";
+import { attachBoot } from "../Boot.js";
+
+let politeSpan;
+let assertiveSpan;
+
+const setOutOfViewportStyles = el => {
+	el.style.position = "absolute";
+	el.style.clip = "rect(1px,1px,1px,1px)";
+	el.style.userSelect = "none";
+	el.style.left = "-1000px";
+	el.style.top = "-1000px";
+	el.style.pointerEvents = "none";
+};
+
+attachBoot(() => {
+	if (politeSpan && assertiveSpan) {
+		return;
+	}
+
+	politeSpan = document.createElement("span");
+	assertiveSpan = document.createElement("span");
+
+	politeSpan.classList.add("ui5-invisiblemessage-polite");
+	assertiveSpan.classList.add("ui5-invisiblemessage-assertive");
+
+	politeSpan.setAttribute("aria-live", "polite");
+	assertiveSpan.setAttribute("aria-live", "assertive");
+
+	politeSpan.setAttribute("role", "alert");
+	assertiveSpan.setAttribute("role", "alert");
+
+	setOutOfViewportStyles(politeSpan);
+	setOutOfViewportStyles(assertiveSpan);
+
+	getSingletonElementInstance("ui5-static-area").appendChild(politeSpan);
+	getSingletonElementInstance("ui5-static-area").appendChild(assertiveSpan);
+});
+
+/**
+ * Inserts the string into the respective span, depending on the mode provided.
+ *
+ * @param {string} message String to be announced by the screen reader.
+ * @param {sap.ui.core.InvisibleMessageMode} mode The mode to be inserted in the aria-live attribute.
+ */
+const announce = (message, mode) => {
+	// If no type is presented, fallback to polite announcement.
+	const span = mode === InvisibleMessageMode.Assertive ? assertiveSpan : politeSpan;
+
+	// Set textContent to empty string in order to trigger screen reader's announcement.
+	span.textContent = "";
+	span.textContent = message;
+
+	if (mode !== InvisibleMessageMode.Assertive && mode !== InvisibleMessageMode.Polite) {
+		console.warn(`You have entered an invalid mode. Valid values are: "Polite" and "Assertive". The framework will automatically set the mode to "Polite".`); // eslint-disable-line
+	}
+};
+
+export default announce;

package/src/util/PopupUtils.js

@@ -62,7 +62,7 @@ const isClickInRect = (event, rect) => {
 const getClosedPopupParent = el => {
 	const parent = el.parentElement || (el.getRootNode && el.getRootNode().host);
 
-	if (parent && ((parent.openBy && parent.isUI5Element) || (parent.open && parent.isUI5Element) || parent === document.documentElement)) {
+	if (parent && ((parent.showAt && parent.isUI5Element) || (parent.open && parent.isUI5Element) || parent === document.documentElement)) {
 		return parent;
 	}
 

package/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;
 		}
 
@@ -27,6 +27,10 @@ const getTabbables = (nodes, tabbables) => {
 			currentNode = Array.from(children).find(node => node.tagName !== "STYLE");
 		}
 
+		if (!currentNode) {
+			return;
+		}
+
 		if (isNodeTabbable(currentNode)) {
 			tabbablesNodes.push(currentNode);
 		}

package/src/util/createLinkInHead.js

@@ -0,0 +1,19 @@
+/**
+ * Creates a <link> tag in the <head> tag
+ * @param href - the CSS
+ * @param attributes - optional attributes to add to the tag
+ * @returns {HTMLElement}
+ */
+const createLinkInHead = (href, attributes = {}) => {
+	const link = document.createElement("link");
+	link.type = "text/css";
+	link.rel = "stylesheet";
+
+	Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
+
+	link.href = href;
+	document.head.appendChild(link);
+	return link;
+};
+
+export default createLinkInHead;