@ui5/webcomponents-base 1.11.0-rc.0 → 1.11.0-rc.2

package/src/features/F6Navigation.ts

@@ -3,6 +3,7 @@ import { isF6Next, isF6Previous } from "../Keys.js";
 import { instanceOfUI5Element } from "../UI5Element.js";
 import { getFirstFocusableElement } from "../util/FocusableElements.js";
 import getFastNavigationGroups from "../util/getFastNavigationGroups.js";
+import isElementClickable from "../util/isElementClickable.js";
 
 class F6Navigation {
 	static _instance: F6Navigation;
@@ -19,56 +20,61 @@ class F6Navigation {
 		document.addEventListener("keydown", this.keydownHandler);
 	}
 
-	async _keydownHandler(event: KeyboardEvent) {
-		if (isF6Next(event)) {
-			this.updateGroups();
+	async groupElementToFocus(nextElement: HTMLElement) {
+		const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
 
-			if (this.groups.length < 1) {
-				return;
+		if (nextElementDomRef) {
+			if (isElementClickable(nextElementDomRef)) {
+				return nextElementDomRef;
 			}
 
-			event.preventDefault();
+			const elementToFocus = await getFirstFocusableElement(nextElementDomRef);
 
-			let nextIndex = -1;
-			let nextElement;
-			if (this.selectedGroup) {
-				nextIndex = this.groups.indexOf(this.selectedGroup);
+			if (elementToFocus) {
+				return elementToFocus;
 			}
+		}
+	}
+
+	async findNextFocusableGroupElement(currentIndex: number) {
+		let elementToFocus;
 
-			if (nextIndex > -1) {
-				if (nextIndex + 1 >= this.groups.length) {
-					nextElement = this.groups[0];
+		/* eslint-disable no-await-in-loop */
+		for (let index = 0; index < this.groups.length; index++) {
+			let nextElement;
+
+			if (currentIndex > -1) {
+				if (currentIndex + 1 >= this.groups.length) {
+					currentIndex = 0;
+					nextElement = this.groups[currentIndex];
 				} else {
-					nextElement = this.groups[nextIndex + 1];
+					currentIndex += 1;
+					nextElement = this.groups[currentIndex];
 				}
 			} else {
-				nextElement = this.groups[0];
+				currentIndex = 0;
+				nextElement = this.groups[currentIndex];
 			}
 
-			const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
+			elementToFocus = await this.groupElementToFocus(nextElement);
 
-			if (nextElementDomRef) {
-				const elementToFocus = await getFirstFocusableElement(nextElementDomRef, true);
-				elementToFocus?.focus();
+			if (elementToFocus) {
+				break;
 			}
 		}
+		/* eslint-enable no-await-in-loop */
 
-		if (isF6Previous(event)) {
-			this.updateGroups();
-
-			if (this.groups.length < 1) {
-				return;
-			}
+		return elementToFocus;
+	}
 
-			event.preventDefault();
+	async findPreviousFocusableGroupElement(currentIndex: number) {
+		let elementToFocus;
 
-			let nextIndex = -1;
+		/* eslint-disable no-await-in-loop */
+		for (let index = 0; index < this.groups.length; index++) {
 			let nextElement;
-			if (this.selectedGroup) {
-				nextIndex = this.groups.indexOf(this.selectedGroup);
-			}
 
-			if (nextIndex > 0) {
+			if (currentIndex > 0) {
 				// Handle the situation where the first focusable element of two neighbor groups is the same
 				// For example:
 				// <ui5-flexible-column-layout>
@@ -77,22 +83,70 @@ class F6Navigation {
 				//     </ui5-list>
 				// </ui5-flexible-column-layout>
 				// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
+				const firstFocusable = await this.groupElementToFocus(this.groups[currentIndex - 1]);
+				const shouldSkipParent = firstFocusable === await this.groupElementToFocus(this.groups[currentIndex]);
 
-				const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
-				const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
+				currentIndex = shouldSkipParent ? currentIndex - 2 : currentIndex - 1;
 
-				nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
+				if (currentIndex < 0) {
+					currentIndex = this.groups.length - 1;
+				}
+
+				nextElement = this.groups[currentIndex];
 			} else {
-				nextElement = this.groups[this.groups.length - 1];
+				currentIndex = this.groups.length - 1;
+				nextElement = this.groups[currentIndex];
 			}
 
-			const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
+			elementToFocus = await this.groupElementToFocus(nextElement);
 
-			if (nextElementDomRef) {
-				const elementToFocus = await getFirstFocusableElement(nextElementDomRef, true);
-				elementToFocus?.focus();
+			if (elementToFocus) {
+				break;
 			}
 		}
+		/* eslint-enable no-await-in-loop */
+
+		return elementToFocus;
+	}
+
+	async _keydownHandler(event: KeyboardEvent) {
+		const forward = isF6Next(event);
+		const backward = isF6Previous(event);
+		if (!(forward || backward)) {
+			return;
+		}
+
+		this.updateGroups();
+
+		if (this.groups.length < 1) {
+			return;
+		}
+
+		event.preventDefault();
+
+		let elementToFocus;
+
+		if (this.groups.length === 0) {
+			elementToFocus = await this.groupElementToFocus(this.groups[0]);
+
+			return elementToFocus?.focus();
+		}
+
+		let currentIndex = -1;
+
+		if (this.selectedGroup) {
+			currentIndex = this.groups.indexOf(this.selectedGroup);
+		}
+
+		if (forward) {
+			elementToFocus = await this.findNextFocusableGroupElement(currentIndex);
+		}
+
+		if (backward) {
+			elementToFocus = await this.findPreviousFocusableGroupElement(currentIndex);
+		}
+
+		elementToFocus?.focus();
 	}
 
 	removeEventListeners() {
@@ -109,19 +163,19 @@ class F6Navigation {
 		let element: Element | null | ParentNode = this.deepActive(root);
 
 		while (element && (element as Element).getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== htmlElement) {
-		   element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host;
+			element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host;
 		}
 
 		this.selectedGroup = element as HTMLElement;
-	 }
+	}
 
-	 deepActive(root: DocumentOrShadowRoot): Element | null {
+	deepActive(root: DocumentOrShadowRoot): Element | null {
 		if (root.activeElement && root.activeElement.shadowRoot) {
-		   return this.deepActive(root.activeElement.shadowRoot);
+			return this.deepActive(root.activeElement.shadowRoot);
 		}
 
 		return root.activeElement;
-	 }
+	}
 
 	destroy() {
 		this.removeEventListeners();

package/src/getSharedResource.ts

@@ -1,6 +1,11 @@
 import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
 
-const getSharedResourcesInstance = () => getSingletonElementInstance("ui5-shared-resources", document.head);
+const getSharedResourcesInstance = (): Record<string, unknown> | null => {
+	if (typeof document === "undefined") {
+		return null;
+	}
+	return getSingletonElementInstance("ui5-shared-resources", document.head) as unknown as Record<string, unknown>;
+};
 
 /**
  * Use this method to initialize/get resources that you would like to be shared among UI5 Web Components runtime instances.
@@ -15,6 +20,10 @@ const getSharedResource = <T>(namespace: string, initialValue: T): T => {
 	const parts = namespace.split(".");
 	let current = getSharedResourcesInstance() as Record<string, any>;
 
+	if (!current) {
+		return initialValue;
+	}
+
 	for (let i = 0; i < parts.length; i++) {
 		const part = parts[i];
 		const lastPart = i === parts.length - 1;

package/src/theming/CustomStyle.ts

@@ -4,22 +4,22 @@ import EventProvider from "../EventProvider.js";
 
 type CustomCSSChangeCallback = (tag: string) => void;
 
-const eventProvider = getSharedResource("CustomStyle.eventProvider", new EventProvider<string, void>());
+const getEventProvider = () => getSharedResource("CustomStyle.eventProvider", new EventProvider<string, void>());
 const CUSTOM_CSS_CHANGE = "CustomCSSChange";
 
 const attachCustomCSSChange = (listener: CustomCSSChangeCallback) => {
-	eventProvider.attachEvent(CUSTOM_CSS_CHANGE, listener);
+	getEventProvider().attachEvent(CUSTOM_CSS_CHANGE, listener);
 };
 
 const detachCustomCSSChange = (listener: CustomCSSChangeCallback) => {
-	eventProvider.detachEvent(CUSTOM_CSS_CHANGE, listener);
+	getEventProvider().detachEvent(CUSTOM_CSS_CHANGE, listener);
 };
 
 const fireCustomCSSChange = (tag: string) => {
-	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
+	return getEventProvider().fireEvent(CUSTOM_CSS_CHANGE, tag);
 };
 
-const customCSSFor = getSharedResource<Record<string, Array<string>>>("CustomStyle.customCSSFor", {});
+const getCustomCSSFor = () => getSharedResource<Record<string, Array<string>>>("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
@@ -32,6 +32,7 @@ attachCustomCSSChange((tag: string) => {
 });
 
 const addCustomCSS = (tag: string, css: string) => {
+	const customCSSFor = getCustomCSSFor();
 	if (!customCSSFor[tag]) {
 		customCSSFor[tag] = [];
 	}
@@ -51,6 +52,7 @@ const addCustomCSS = (tag: string, css: string) => {
 };
 
 const getCustomCSS = (tag: string) => {
+	const customCSSFor = getCustomCSSFor();
 	return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
 };
 

package/src/util/AriaLabelHelper.ts

@@ -1,7 +1,32 @@
+import UI5Element, { ChangeInfo } from "../UI5Element.js";
+
+type InvalidateCallback = (changeInfo: ChangeInfo) => void;
+type MutationCallback = () => void;
+type AssociatedElement = {
+	observer: MutationObserver | null;
+	callbacks: Array<MutationCallback>;
+};
+type RegisteredElement = {
+	host: UI5Element;
+	observedElements: Array<HTMLElement>;
+	callback: MutationCallback;
+	invalidationCallback: InvalidateCallback;
+};
+
+const associatedElements = new WeakMap<HTMLElement, AssociatedElement>();
+const registeredElements = new WeakMap<UI5Element, RegisteredElement>();
+
 type AccessibleElement = HTMLElement & {
-	accessibleNameRef: string,
-	accessibleName: string,
-}
+	accessibleNameRef: string;
+	accessibleName: string;
+};
+
+const observerOptions = {
+	attributes: true,
+	childList: true,
+	characterData: true,
+	subtree: true,
+};
 
 const getEffectiveAriaLabelText = (el: HTMLElement) => {
 	const accessibleEl = el as AccessibleElement;
@@ -14,38 +39,68 @@ const getEffectiveAriaLabelText = (el: HTMLElement) => {
 		return undefined;
 	}
 
-	return _getAriaLabelledByTexts(el);
+	return getAllAccessibleNameRefTexts(el);
 };
 
 /**
  *
  * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related texts
  */
-const _getAriaLabelledByTexts = (el: HTMLElement) => {
-	const ids = (el as AccessibleElement).accessibleNameRef.split(" ");
+const getAllAccessibleNameRefTexts = (el: HTMLElement) => {
+	const ids = (el as AccessibleElement).accessibleNameRef?.split(" ") ?? [];
 	const owner = el.getRootNode() as HTMLElement;
 	let result = "";
 
 	ids.forEach((elementId: string, index: number) => {
 		const element = owner.querySelector(`[id='${elementId}']`);
-		result += `${element && element.textContent ? element.textContent : ""}`;
-
-		if (index < ids.length - 1) {
-			result += " ";
+		const text = `${element && element.textContent ? element.textContent : ""}`;
+		if (text) {
+			result += text;
+			if (index < ids.length - 1) {
+				result += " ";
+			}
 		}
 	});
 
 	return result;
 };
 
+const _getAllAssociatedElementsFromDOM = (el: UI5Element): Array<HTMLElement> => {
+	const set = new Set<HTMLElement>();
+	// adding labels with attribute for matching the el.id
+	const labelsForAssociated = _getAssociatedLabels(el);
+	labelsForAssociated.forEach(itm => {
+		set.add(itm);
+	});
+	// adding other elements that id is the same as accessibleNameRef value
+	const value = el["accessibleNameRef" as keyof typeof el] as string;
+	const ids = value?.split(" ") ?? [];
+	ids.forEach(id => {
+		const refEl = _getReferencedElementById(el, id);
+		if (refEl) {
+			set.add(refEl);
+		}
+	});
+	return Array.from(set);
+};
+
+const _getAssociatedLabels = (el: HTMLElement): Array<HTMLElement> => {
+	const labels = (el.getRootNode() as HTMLElement).querySelectorAll<HTMLElement>(`[for="${el.id}"]`);
+	return Array.from(labels);
+};
+
+const _getReferencedElementById = (el: HTMLElement, elementId: string): HTMLElement | null => {
+	return (el.getRootNode() as HTMLElement).querySelector<HTMLElement>(`[id='${elementId}']`);
+};
+
 /**
  * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related "label for" texts
  */
 const getAssociatedLabelForTexts = (el: HTMLElement) => {
 	const results: Array<string> = [];
-	const labels = (el.getRootNode() as HTMLElement).querySelectorAll(`[ui5-label][for="${el.id}"],label[for="${el.id}"]`);
+	const labels = _getAssociatedLabels(el);
 
-	labels.forEach((label: Node) => {
+	labels.forEach((label: HTMLElement) => {
 		const labelText = label.textContent;
 		labelText && results.push(labelText);
 	});
@@ -57,7 +112,107 @@ const getAssociatedLabelForTexts = (el: HTMLElement) => {
 	return undefined;
 };
 
+const _createInvalidationCallback = (el: UI5Element) => {
+	const invalidationCallback = (changeInfo: ChangeInfo) => {
+		if (!(changeInfo && changeInfo.type === "property" && changeInfo.name === "accessibleNameRef")) {
+			return;
+		}
+		const registeredElement = registeredElements.get(el);
+		if (!registeredElement) {
+			return;
+		}
+		const oldAssociatedElements = registeredElement.observedElements;
+		const newAssociatedElements = _getAllAssociatedElementsFromDOM(el);
+		oldAssociatedElements.forEach(oldElement => {
+			if (!newAssociatedElements.includes(oldElement)) {
+				_removeObservedElementFromRegisteredElement(registeredElement, oldElement);
+			}
+		});
+		newAssociatedElements.forEach(newElement => {
+			if (!oldAssociatedElements.includes(newElement)) {
+				_addObservedElementToRegisteredElement(registeredElement, newElement);
+				registeredElement.observedElements.push(newElement);
+			}
+		});
+		registeredElement?.callback();
+	};
+	return invalidationCallback;
+};
+
+const registerUI5Element = (el: UI5Element, callback: MutationCallback) => {
+	if (registeredElements.has(el)) {
+		return;
+	}
+	const allAssociatedElements = _getAllAssociatedElementsFromDOM(el);
+	const invalidationCallback = _createInvalidationCallback(el);
+	const registeredElement = {
+		host: el,
+		observedElements: allAssociatedElements,
+		callback,
+		invalidationCallback,
+	};
+	registeredElements.set(el, registeredElement);
+	el.attachInvalidate(invalidationCallback);
+
+	allAssociatedElements.forEach((element: HTMLElement) => {
+		_addObservedElementToRegisteredElement(registeredElement, element);
+	});
+	callback();
+};
+
+const _addObservedElementToRegisteredElement = (registeredElement: RegisteredElement, element: HTMLElement) => {
+	let associatedElement = associatedElements.get(element);
+	if (!associatedElement) {
+		associatedElement = { observer: null, callbacks: [] };
+		const observer = new MutationObserver(() => {
+			const callbacks = (associatedElement as AssociatedElement).callbacks;
+			callbacks.forEach(callback => {
+				callback();
+			});
+			const domEl = document.getElementById(element.id);
+			// if no longer should be observed from this registeredElement, remove it
+			if (!(registeredElement.host.id === element.getAttribute("for") || domEl)) {
+				_removeObservedElementFromRegisteredElement(registeredElement, element);
+			}
+		});
+		associatedElement.observer = observer;
+		observer.observe(element, observerOptions);
+		associatedElements.set(element, associatedElement);
+	}
+	if (!associatedElement.callbacks.includes(registeredElement.callback)) {
+		associatedElement.callbacks.push(registeredElement.callback);
+	}
+};
+
+const _removeObservedElementFromRegisteredElement = (registeredElement: RegisteredElement, element: HTMLElement) => {
+	const associatedElement = associatedElements.get(element);
+	if (associatedElement) {
+		associatedElement.callbacks = associatedElement.callbacks.filter(itm => itm !== registeredElement.callback);
+		if (!associatedElement.callbacks.length) {
+			associatedElement.observer?.disconnect();
+			associatedElements.delete(element);
+		}
+	}
+	registeredElement.observedElements = registeredElement.observedElements.filter(itm => itm !== element);
+};
+
+const deregisterUI5Element = (el: UI5Element) => {
+	const registeredElement = registeredElements.get(el);
+	if (!registeredElement) {
+		return;
+	}
+	const oldObservedElements = [...registeredElement.observedElements];
+	oldObservedElements.forEach(observedElement => {
+		_removeObservedElementFromRegisteredElement(registeredElement, observedElement);
+	});
+	el.detachInvalidate(registeredElement.invalidationCallback);
+	registeredElements.delete(el);
+};
+
 export {
 	getEffectiveAriaLabelText,
 	getAssociatedLabelForTexts,
+	registerUI5Element,
+	deregisterUI5Element,
+	getAllAccessibleNameRefTexts,
 };