fix(ui5-message-strip): make speech output more comprehensive (#4416)

* fix(ui5-message-strip): make speech output more comprehensive * use uppercase
SAP · Dec 2, 2021 · 9442e05 · 9442e05
1 parent 6f06963
commit 9442e05
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 4 deletions.
diff --git a/packages/main/src/MessageStrip.hbs b/packages/main/src/MessageStrip.hbs
@@ -27,7 +27,7 @@
 			icon="decline"
 			design="Transparent"
 			class="ui5-message-strip-close-button"
-			title="{{_closeButtonText}}"
+			._buttonAccInfo="{{accInfo.button}}"
 			@click={{_closeClick}}
 		></ui5-button>
 	{{/unless}}

diff --git a/packages/main/src/MessageStrip.js b/packages/main/src/MessageStrip.js
@@ -10,7 +10,14 @@ import MessageStripDesign from "./types/MessageStripDesign.js";
 import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
-import { MESSAGE_STRIP_CLOSE_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import {
+	MESSAGE_STRIP_CLOSE_BUTTON,
+	MESSAGE_STRIP_CLOSABLE,
+	MESSAGE_STRIP_ERROR,
+	MESSAGE_STRIP_WARNING,
+	MESSAGE_STRIP_SUCCESS,
+	MESSAGE_STRIP_INFORMATION,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import messageStripCss from "./generated/themes/MessageStrip.css.js";
@@ -190,14 +197,27 @@ class MessageStrip extends UI5Element {
 		};
 	}
 
+	static designAnnouncementMappings() {
+		return {
+			"Information": MessageStrip.i18nBundle.getText(MESSAGE_STRIP_INFORMATION),
+			"Positive": MessageStrip.i18nBundle.getText(MESSAGE_STRIP_SUCCESS),
+			"Negative": MessageStrip.i18nBundle.getText(MESSAGE_STRIP_ERROR),
+			"Warning": MessageStrip.i18nBundle.getText(MESSAGE_STRIP_WARNING),
+		};
+	}
+
 	get hiddenText() {
-		return `Message Strip ${this.design} ${this.hideCloseButton ? "" : "closable"}`;
+		return `${MessageStrip.designAnnouncementMappings()[this.design]} ${this.hideCloseButton ? "" : this._closableText}`;
 	}
 
 	get _closeButtonText() {
 		return MessageStrip.i18nBundle.getText(MESSAGE_STRIP_CLOSE_BUTTON);
 	}
 
+	get _closableText() {
+		return MessageStrip.i18nBundle.getText(MESSAGE_STRIP_CLOSABLE);
+	}
+
 	get classes() {
 		return {
 			root: {
@@ -220,6 +240,14 @@ class MessageStrip extends UI5Element {
 	get designClasses() {
 		return MessageStrip.designClassesMappings()[this.design];
 	}
+
+	get accInfo() {
+		return {
+			"button": {
+				"title": this._closeButtonText,
+			},
+		};
+	}
 }
 
 MessageStrip.define();

diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -158,7 +158,22 @@ ARIA_LABEL_LIST_MULTISELECTABLE=Contains Multi-Selectable Items
 ARIA_LABEL_LIST_DELETABLE=Contains Deletable Items
 
 #XTOL: Tooltip of messgae strip close button
-MESSAGE_STRIP_CLOSE_BUTTON=Message Strip Close
+MESSAGE_STRIP_CLOSE_BUTTON=Information Bar Close
+
+#XACT: ARIA announcement for the MessageStrip's closable state
+MESSAGE_STRIP_CLOSABLE=Closable
+
+#XACT: ARIA announcement for the MessageStrip's "Error" state
+MESSAGE_STRIP_ERROR=Error Information Bar
+
+#XACT: ARIA announcement for the MessageStrip's "Warning" state
+MESSAGE_STRIP_WARNING=Warning Information Bar
+
+#XACT: ARIA announcement for the MessageStrip's "Success" state
+MESSAGE_STRIP_SUCCESS=Success Information Bar
+
+#XACT: ARIA announcement for the MessageStrip's "Information" state
+MESSAGE_STRIP_INFORMATION=Information Bar
 
 #XFLD: MultiComboBox dialog button
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK

diff --git a/packages/main/test/specs/MessageStrip.spec.js b/packages/main/test/specs/MessageStrip.spec.js
@@ -18,3 +18,38 @@ describe("MessageStrip general interaction", () => {
 		assert.strictEqual(await input.getProperty("value"), "3", "Close should be called 3 times");
 	});
 });
+
+describe("ARIA Support", () => {
+	before(async () => {
+		await browser.url(`http://localhost:${PORT}/test-resources/pages/MessageStrip.html`);
+	});
+
+	it("Test close button title text", async () => {
+
+		const closeButton = await browser.$("#messageStrip").shadow$(".ui5-message-strip-close-button").shadow$("button");
+		let resourceBundleText = null;
+
+		resourceBundleText = await browser.executeAsync(done => {
+			const messageStrip = document.getElementById("messageStrip");
+			done(messageStrip.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MESSAGE_STRIP_CLOSE_BUTTON));
+		});
+
+		assert.strictEqual(await closeButton.getAttribute("title"), resourceBundleText, "Close button title is correct");
+	});
+
+	it("Test hidden text element content", async () => {
+
+		const messageStrip = await browser.$("#messageStrip");
+		let invisibleText = await messageStrip.shadow$(".ui5-hidden-text");
+		let resourceBundleText = null;
+
+		resourceBundleText = await browser.executeAsync(done => {
+			const messageStrip = document.getElementById("messageStrip");
+			const msgStripi18nBundle = messageStrip.constructor.i18nBundle;
+			done(`${msgStripi18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MESSAGE_STRIP_INFORMATION)} ${msgStripi18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MESSAGE_STRIP_CLOSABLE)}`);
+		});
+
+		assert.strictEqual(await invisibleText.getText(), resourceBundleText, "Hidden element content is correct");
+	});
+});
+