fix(ui5-multi-input): announce value help (#11221)

Author: elenastoyanovaa

packages/main/cypress/specs/MultiInput.cy.tsx

@@ -1,6 +1,7 @@
 import SuggestionItem from "../../src/SuggestionItem.js";
 import MultiInput from "../../src/MultiInput.js";
 import "../../src/Token.js";
+import { MULTIINPUT_VALUE_HELP } from "../../src/generated/i18n/i18n-defaults.js";
 
 describe("MultiInput Web Component", () => {
 	it("creates only one token when typing 'ad' and pressing Enter", () => {
@@ -48,4 +49,24 @@ describe("MultiInput Web Component", () => {
 			.should("have.length", 1)
 			.and("have.attr", "text", "ad");
 	});
+
+	it("Value Help announcement", () => {
+		const valueHelpId = "hiddenText-value-help";
+
+		cy.mount(<MultiInput showValueHelpIcon={true}></MultiInput>);
+
+		cy.get("[ui5-multi-input]")
+			.as("multiInput");
+
+		cy.get("@multiInput")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-describedby")
+			.and("include", valueHelpId);
+
+		cy.get("@multiInput")
+			.shadow()
+			.find(`#${valueHelpId}`)
+			.should("have.text", MULTIINPUT_VALUE_HELP.defaultText);
+	});
 });

packages/main/src/MultiInput.ts

@@ -17,7 +17,7 @@ import {
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import { MULTIINPUT_ROLEDESCRIPTION_TEXT, MULTIINPUT_VALUE_HELP_LABEL } from "./generated/i18n/i18n-defaults.js";
+import { MULTIINPUT_ROLEDESCRIPTION_TEXT, MULTIINPUT_VALUE_HELP_LABEL, MULTIINPUT_VALUE_HELP } from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
 import MultiInputTemplate from "./MultiInputTemplate.js";
 import styles from "./generated/themes/MultiInput.css.js";
@@ -364,10 +364,18 @@ class MultiInput extends Input implements IFormInputElement {
 		return getTokensCountText(this.tokens.length);
 	}
 
+	get _valueHelpText() {
+		return MultiInput.i18nBundle.getText(MULTIINPUT_VALUE_HELP);
+	}
+
 	get _tokensCountTextId() {
 		return `hiddenText-nMore`;
 	}
 
+	get _valueHelpTextId() {
+		return this.showValueHelpIcon ? `hiddenText-value-help` : "";
+	}
+
 	/**
 	 * Returns the placeholder value when there are no tokens.
 	 * @protected
@@ -381,7 +389,7 @@ class MultiInput extends Input implements IFormInputElement {
 	}
 
 	get accInfo() {
-		const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId}`.trim();
+		const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId} ${this._valueHelpTextId}`.trim();
 		return {
 			...super.accInfo,
 			"ariaRoledescription": this.ariaRoleDescription,

packages/main/src/MultiInputTemplate.tsx

@@ -14,6 +14,10 @@ function preContent(this: MultiInput) {
 	return (
 		<>
 			<span id="hiddenText-nMore" class="ui5-hidden-text">{this._tokensCountText}</span>
+
+			{this.showValueHelpIcon &&
+				<span id="hiddenText-value-help" class="ui5-hidden-text">{this._valueHelpText}</span>
+			}
 			<Tokenizer
 				class="ui5-multi-input-tokenizer"
 				opener={this.morePopoverOpener}

packages/main/src/i18n/messagebundle.properties

@@ -336,9 +336,12 @@ MULTIINPUT_ROLEDESCRIPTION_TEXT=Multi Value Input
 #XFLD: Token number indicator which is used to show more tokens
 MULTIINPUT_SHOW_MORE_TOKENS={0} more
 
-#XACT: ARIA announcement for value help
+#XACT: ARIA announcement for value help icon
 MULTIINPUT_VALUE_HELP_LABEL=Show Value Help
 
+#XACT: ARIA announcement for value help
+MULTIINPUT_VALUE_HELP=Value help available
+
 #XTOL: Tooltip for panel expand title
 PANEL_ICON=Expand/Collapse
 

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

@@ -396,15 +396,19 @@ describe("ARIA attributes", () => {
 		const innerInput = await mi.shadow$("input");
 		const tokensCountITextId = `hiddenText-nMore`;
 		const suggestionsITextId = `suggestionsText`;
-		const ariaDescribedBy = `${tokensCountITextId} ${suggestionsITextId}`;
+		const valueHelpTextId = "hiddenText-value-help";
 
 		await browser.$("#suggestion-token").scrollIntoView();
 		await innerInput.click();
 		await innerInput.keys("a");
 		await innerInput.keys("ArrowDown");
 		await innerInput.keys("Enter");
 
-		assert.strictEqual(await innerInput.getAttribute("aria-describedby"), ariaDescribedBy, "aria-describedby attribute contains multiple references");
+		const ariaDescribedBy = await innerInput.getAttribute("aria-describedby");
+
+		assert.ok(ariaDescribedBy.includes(tokensCountITextId), "aria-describedby should contain tokens count");
+		assert.ok(ariaDescribedBy.includes(suggestionsITextId), "aria-describedby should contain suggestions announcement when suggestions are enabled");
+		assert.ok(ariaDescribedBy.includes(valueHelpTextId), "aria-describedby should contain value help announcement when value help is enabled");
 	});
 
 	it("aria-roledescription is set properly", async () => {