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

* fix(ui5-message-strip): make speech output more comprehensive (#4416) * fix(ui5-message-strip): make speech output more comprehensive * use uppercase * fix failing tests
SAP · Dec 3, 2021 · e3fe05f · e3fe05f
1 parent 1998db4
commit e3fe05f
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 9 deletions.
diff --git a/packages/main/src/MessageStrip.hbs b/packages/main/src/MessageStrip.hbs
@@ -24,12 +24,12 @@
 
 	{{#unless noCloseButton}}
 		<ui5-button
-				icon="decline"
-				icon-size=".75rem"
-				design="Transparent"
-				class="ui5-messagestrip-close-button"
-				title="{{_closeButtonText}}"
-				@click={{_closeClick}}
+			icon="decline"
+			icon-size=".75rem"
+			design="Transparent"
+			class="ui5-messagestrip-close-button"
+			._buttonAccInfo="{{accInfo.button}}"
+			@click={{_closeClick}}
 		></ui5-button>
 	{{/unless}}
 </div>
diff --git a/packages/main/src/MessageStrip.js b/packages/main/src/MessageStrip.js
@@ -10,7 +10,14 @@ import MessageStripType from "./types/MessageStripType.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";
@@ -189,14 +196,27 @@ class MessageStrip extends UI5Element {
 		};
 	}
 
+	get designAnnouncementMappings() {
+		return {
+			"Information": this.i18nBundle.getText(MESSAGE_STRIP_INFORMATION),
+			"Positive": this.i18nBundle.getText(MESSAGE_STRIP_SUCCESS),
+			"Negative": this.i18nBundle.getText(MESSAGE_STRIP_ERROR),
+			"Warning": this.i18nBundle.getText(MESSAGE_STRIP_WARNING),
+		};
+	}
+
 	get hiddenText() {
-		return `Message Strip ${this.type} ${this.noCloseButton ? "" : "closable"}`;
+		return `${this.designAnnouncementMappings[this.type]} ${this.noCloseButton ? "" : this._closableText}`;
 	}
 
 	get _closeButtonText() {
 		return this.i18nBundle.getText(MESSAGE_STRIP_CLOSE_BUTTON);
 	}
 
+	get _closableText() {
+		return this.i18nBundle.getText(MESSAGE_STRIP_CLOSABLE);
+	}
+
 	get classes() {
 		return {
 			root: {
@@ -219,6 +239,14 @@ class MessageStrip extends UI5Element {
 	get typeClasses() {
 		return MessageStrip.typeClassesMappings()[this.type];
 	}
+
+	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
@@ -113,7 +113,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
@@ -15,3 +15,36 @@ describe("MessageStrip general interaction", () => {
 		assert.strictEqual(input.getProperty("value"), "3", "Close should be called 3 times");
 	});
 });
+
+describe("ARIA Support", () => {
+	browser.url("http://localhost:8080/test-resources/pages/MessageStrip.html");
+
+	it("Test close button title text", () => {
+
+		const closeButton = browser.$("#messageStrip").shadow$(".ui5-messagestrip-close-button").shadow$("button");
+		let resourceBundleText = null;
+
+		resourceBundleText = browser.execute(() => {
+			const messageStrip = document.getElementById("messageStrip");
+			return messageStrip.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MESSAGE_STRIP_CLOSE_BUTTON);
+		});
+
+		assert.strictEqual(closeButton.getAttribute("title"), resourceBundleText, "Close button title is correct");
+	});
+
+	it("Test hidden text element content", () => {
+
+		const messageStrip = browser.$("#messageStrip");
+		let invisibleText = messageStrip.shadow$(".ui5-hidden-text");
+		let resourceBundleText = null;
+
+		resourceBundleText = browser.execute(() => {
+			const messageStrip = document.getElementById("messageStrip");
+			const msgStripi18nBundle = messageStrip.i18nBundle;
+			return `${msgStripi18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MESSAGE_STRIP_INFORMATION)} ${msgStripi18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MESSAGE_STRIP_CLOSABLE)}`;
+		});
+
+		assert.strictEqual(invisibleText.getText(), resourceBundleText, "Hidden element content is correct");
+	});
+});
+