SAP · ivoplashkov · May 18, 2021 · Apr 28, 2021 · Apr 28, 2021 · May 17, 2021
diff --git a/packages/base/src/types/InvisibleMessageMode.js b/packages/base/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;
diff --git a/packages/base/src/util/InvisibleMessage.js b/packages/base/src/util/InvisibleMessage.js
@@ -0,0 +1,50 @@
+import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
+import getSingletonElementInstance from "./getSingletonElementInstance.js";
+
+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.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");
+
+politeSpan.style.cssText = styles;
+assertiveSpan.style.cssText = styles;
+
+if (!politeSpan.parentElement) {
+	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;
diff --git a/packages/main/bundle.common.js b/packages/main/bundle.common.js
@@ -103,6 +103,7 @@ import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.j
 import { attachDirectionChange } from "@ui5/webcomponents-base/dist/locale/directionChange.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import * as defaultTexts from "./dist/generated/i18n/i18n-defaults.js";
+import announce from "@ui5/webcomponents-base/dist/util/invisibleMessage.js";
 
 const testAssets = {
 	configuration : {
@@ -118,6 +119,9 @@ const testAssets = {
 		getAssetsPath,
 		setAssetsPath
 	},
+	invisibleMessage : {
+		announce,
+	},
 	getLocaleData,
 	applyDirection,
 	attachDirectionChange,

diff --git a/packages/main/test/pages/base/InvisibleMessage.html b/packages/main/test/pages/base/InvisibleMessage.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<title>InvisibleMessage</title>
+
+    <script src="../../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../../resources/bundle.esm.js" type="module"></script>
+    <script nomodule src="../../../resources/bundle.es5.js"></script>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor);">
+    <style>
+        ui5-textarea {
+            margin: 1rem 0;
+        }
+    </style>
+
+	<section class="group">
+		<ui5-title>InvisibleMessage announcement</ui5-title>
+		<ui5-textarea id="announce-textarea" placeholder="Enter text to be announced by the screen reader."></ui5-textarea>
+        <ui5-checkbox id="announce-checkbox" text="Assertive announcement"></ui5-checkbox>
+	    <ui5-button id="announce-button" design="Emphasized" aria-expanded="true">Press me to announce.</ui5-button>
+	</section>
+
+    <script>
+		const button = document.querySelector("#announce-button");
+        const textarea = document.querySelector("#announce-textarea");
+        const checkbox = document.querySelector("#announce-checkbox");
+        let invisibleMessage;
+
+        button.addEventListener("click", function(event) {
+            invisibleMessage =  window["sap-ui-webcomponents-bundle"].invisibleMessage;
+
+            if (checkbox.checked) {
+                invisibleMessage.announce(textarea.value, "Assertive")
+            } else {
+                invisibleMessage.announce(textarea.value)
+            }
+		});
+    </script>
+</body>
+</html>
diff --git a/packages/main/test/specs/base/InvisibleMessage.spec.js b/packages/main/test/specs/base/InvisibleMessage.spec.js
@@ -0,0 +1,34 @@
+const assert = require("chai").assert;
+const PORT = require("../_port.js");
+
+describe("InvisibleMessage", () => {
+	before(() => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/base/InvisibleMessage.html`);
+	});
+
+    it("Initial rendering", () => {
+        const politeSpan = browser.$(".ui5-invisiblemessage-polite");
+        const assertiveSpan = browser.$(".ui5-invisiblemessage-assertive");
+
+        assert.ok(politeSpan, "polite span is rendered");
+        assert.ok(assertiveSpan, "assertive span not rendered");
+    });
+
+    it("String annoucement", () => {
+        const politeSpan = browser.$(".ui5-invisiblemessage-polite");
+        const assertiveSpan = browser.$(".ui5-invisiblemessage-assertive");
+        const button = browser.$("#announce-button");
+        const checkBox = browser.$("#announce-checkbox");
+
+        browser.execute(() => {
+			document.getElementById("announce-textarea").value = "announcement";
+		});
+
+        button.click();
+        checkBox.click();
+        button.click();
+
+        assert.ok(politeSpan.getHTML().indexOf("announcement") > -1, "value has been announced");
+        assert.ok(assertiveSpan.getHTML().indexOf("announcement") > -1, "value has been announced");
+    });
+});