fix(ui5-toast): Content is announced when ui5-toast is shown (#3939)

Author: niyap

packages/main/src/Toast.hbs

@@ -1,11 +1,13 @@
-<div class="ui5-toast-root"
-	role="alert"
-	style="{{styles.root}}"
-	dir="{{effectiveDir}}"
-	@mouseover="{{_onmouseover}}"
-	@mouseleave="{{_onmouseleave}}"
-	@transitionend="{{_ontransitionend}}">
-	<bdi>
-		<slot></slot>
-	</bdi>
-</div>
+{{#if domRendered}}
+	<div class="ui5-toast-root"
+		role="alert"
+		style="{{styles.root}}"
+		dir="{{effectiveDir}}"
+		@mouseover="{{_onmouseover}}"
+		@mouseleave="{{_onmouseleave}}"
+		@transitionend="{{_ontransitionend}}">
+		<bdi>
+			<slot></slot>
+		</bdi>
+	</div>
+{{/if}}

packages/main/src/Toast.js

@@ -79,6 +79,15 @@ const metadata = {
 		hover: {
 			type: Boolean,
 		},
+
+		/**
+		 * Indicates whether the component DOM is rendered.
+		 * @type {boolean}
+		 * @private
+		 */
+		domRendered: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Toast.prototype */ {
 		/**
@@ -206,6 +215,7 @@ class Toast extends UI5Element {
 	}
 
 	_initiateOpening() {
+		this.domRendered = true;
 		requestAnimationFrame(_ => {
 			this.open = true;
 		});
@@ -215,6 +225,7 @@ class Toast extends UI5Element {
 		if (this.hover) {
 			return;
 		}
+		this.domRendered = false;
 		this.open = false;
 	}
 

packages/main/test/specs/Toast.spec.js

@@ -24,6 +24,25 @@ describe("Toast general interaction", () => {
 			"Toast's content div should be displayed in the viewport after its opening.")
 	});
 
+	it("tests domRendered property", () => {
+		const button = browser.$("#wcBtnShowToastBS");
+		const toast = browser.$("#wcToastBS");
+		const toastShadowContent = toast.shadow$(".ui5-toast-root");
+
+		assert.notOk(toastShadowContent.isDisplayedInViewport(),
+			"Toast's content div should be displayed in the viewport after its opening.");
+		assert.notOk(toast.getProperty("domRendered"),
+			"domRendered property value should be false before Toast is shown");
+
+		button.click();
+
+		assert.strictEqual(toast.getProperty("domRendered"), true,
+			"domRendered property value should be true when Toast is shown");
+
+		assert.ok(toastShadowContent.isDisplayedInViewport(),
+			"Toast's content div should be displayed in the viewport after its opening.")
+	});
+
 	it("tests duration property", () => {
 		const button = browser.$("#wcBtnShowToastTC");
 		const toast = browser.$("#wcToastTC");
@@ -45,8 +64,11 @@ describe("Toast general interaction", () => {
 	});
 
 	it("tests shadow content div role", () => {
+		const button = browser.$("#wcBtnShowToastBE");		
 		const toastShadowContent = browser.$("#wcToastBE").shadow$(".ui5-toast-root");
 
+		button.click();
+
 		assert.strictEqual(toastShadowContent.getAttribute("role"), "alert",
 			"The role of the shadow ui5-toast-root div should be alert");
 	});
@@ -111,6 +133,8 @@ describe("Toast general interaction", () => {
 
 		assert.notOk(toast.getProperty("open"),
 		"Open property should be false after Toast is closed");
+		assert.notOk(toast.getProperty("domRendered"),
+		"domRendered property value should be false after Toast is closed");
 	});
 
 	it("tests minimum allowed duration", () => {