fix(framework): InvisibleMessage synced with framework lifecycle (#3583)

SAP · Aug 2, 2021 · dbfa9ca · dbfa9ca
1 parent 7c71884
commit dbfa9ca
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/packages/base/hash.txt b/packages/base/hash.txt
@@ -1 +1 @@
-44n+tz3Upvb7fx9BuRR5JpZRssg=
+L4iGj2puGZcQfMJ02grqW31YqrU=
diff --git a/packages/base/src/util/InvisibleMessage.js b/packages/base/src/util/InvisibleMessage.js
@@ -1,30 +1,40 @@
 import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
 import getSingletonElementInstance from "./getSingletonElementInstance.js";
+import { attachBoot } from "../Boot.js";
 
-const styles = `position: absolute;
+let politeSpan;
+let assertiveSpan;
+
+attachBoot(() => {
+	if (politeSpan && assertiveSpan) {
+		return;
+	}
+
+	const styles = `position: absolute;
 	clip: rect(1px,1px,1px,1px);
 	user-select: none;
 	left: -1000px;
 	top: -1000px;
 	pointer-events: none;`;
 
-const politeSpan = document.createElement("span");
-const assertiveSpan = document.createElement("span");
+	politeSpan = document.createElement("span");
+	assertiveSpan = document.createElement("span");
 
-politeSpan.classList.add("ui5-invisiblemessage-polite");
-assertiveSpan.classList.add("ui5-invisiblemessage-assertive");
+	politeSpan.classList.add("ui5-invisiblemessage-polite");
+	assertiveSpan.classList.add("ui5-invisiblemessage-assertive");
 
-politeSpan.setAttribute("aria-live", "polite");
-assertiveSpan.setAttribute("aria-live", "assertive");
+	politeSpan.setAttribute("aria-live", "polite");
+	assertiveSpan.setAttribute("aria-live", "assertive");
 
-politeSpan.setAttribute("role", "alert");
-assertiveSpan.setAttribute("role", "alert");
+	politeSpan.setAttribute("role", "alert");
+	assertiveSpan.setAttribute("role", "alert");
 
-politeSpan.style.cssText = styles;
-assertiveSpan.style.cssText = styles;
+	politeSpan.style.cssText = styles;
+	assertiveSpan.style.cssText = styles;
 
-getSingletonElementInstance("ui5-static-area").appendChild(politeSpan);
-getSingletonElementInstance("ui5-static-area").appendChild(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.
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		44n+tz3Upvb7fx9BuRR5JpZRssg=
		L4iGj2puGZcQfMJ02grqW31YqrU=