@sapui5/sap.fe.controls 1.148.0 → 1.149.0

package/src/sap/fe/controls/easyFilter/EasyFilterBarContainer.tsx

@@ -285,6 +285,8 @@ export default class EasyFilterBarContainer extends Control {
 
 	private shouldMessageStripRemove = true;
 
+	private ariaLabelApplied = false;
+
 	private supportsSorting = true;
 
 	private supportsGrouping = true;
@@ -380,6 +382,15 @@ export default class EasyFilterBarContainer extends Control {
 		return tokens;
 	}
 
+	private buildInputAriaLabel(): string {
+		const mandatoryFields = this.filterBarMetadata?.filter((f) => f.required) ?? [];
+		if (mandatoryFields.length === 0) {
+			return "";
+		}
+		const fieldLabels = mandatoryFields.map((f) => f.label).join(", ");
+		return this.resourceBundle.getText("M_EASY_FILTER_INPUT_REQUIRED_FIELDS", [fieldLabels]);
+	}
+
 	onEnterPressed(e: UI5Event<{ query: string }, EasyFilterInput>): void {
 		this.onGoPress(e.getParameter("query"));
 	}
@@ -436,6 +447,8 @@ export default class EasyFilterBarContainer extends Control {
 			if (this.easyFilterInput.current?.isHistoryEnabled() ?? false) {
 				this.easyFilterInput.current?.addRecentQuery(magicQuery);
 			}
+			// Set query as successful in the input field
+			this.easyFilterInput.current?.setQuerySuccess(magicQuery);
 			if (easyFilterResult.data.version === 1) {
 				this.handleV1Success(easyFilterResult);
 			} else if (easyFilterResult.data.version === 2) {
@@ -443,6 +456,7 @@ export default class EasyFilterBarContainer extends Control {
 			}
 		} else {
 			// error
+			this.easyFilterInput.current?.setQueryFailure();
 			this.removeNonMandatoryTokens();
 			this.setMessageStrip(easyFilterResult.message);
 			this.invisibleMessage.announce(this.resourceBundle.getText(easyFilterResult.message), InvisibleMessageMode.Assertive);
@@ -859,10 +873,12 @@ export default class EasyFilterBarContainer extends Control {
 		this.shouldTokenChangeEventFired = true;
 		this.isResettingToDefaultTokens = false;
 
-		//  onsapfocusleave method in sap.m.Tokenizer is automatically converting the rendermode of tokenizer to "Narrow" from "loose"
-		//  In this process there are multiple popover issues happening
-		//  So as a temporary fix overriding the function
-		(this.tokenizer?.current as FocusHandlingControl).onsapfocusleave = (): void => {};
+		if (this.tokenizer?.current) {
+			//  onsapfocusleave method in sap.m.Tokenizer is automatically converting the rendermode of tokenizer to "Narrow" from "loose"
+			//  In this process there are multiple popover issues happening
+			//  So as a temporary fix overriding the function
+			(this.tokenizer.current as FocusHandlingControl).onsapfocusleave = (): void => {};
+		}
 	}
 
 	private onThumbUpPressed(): void {
@@ -1071,6 +1087,9 @@ export default class EasyFilterBarContainer extends Control {
 			</VBox>
 		) as VBox;
 		FESRHelper.setSemanticStepname($topGoBtn.current!, "press", "fe:ai:search");
+		if (this.easyFilterInput.current) {
+			FESRHelper.setSemanticStepname(this.easyFilterInput.current, "enterPressed", "fe:ai:search");
+		}
 		return outVBox;
 	}
 
@@ -1116,6 +1135,8 @@ export default class EasyFilterBarContainer extends Control {
 		this.tokenizer.current?.getTokens().forEach((token) => token.setProperty("valueState", ValueState.None));
 		this.tokenizer.current?.getTokens().forEach((token) => token.setProperty("valueStateText", null));
 		this.clearMessageStrip(); //clear the message strip for validated filters
+		// Clear query success status
+		this.easyFilterInput.current?.clearQueryStatus();
 	}
 
 	clearFiltersAndTokens(): void {
@@ -1258,6 +1279,16 @@ export default class EasyFilterBarContainer extends Control {
 			| undefined;
 	}
 
+	onAfterRendering(): void {
+		if (!this.ariaLabelApplied && this.filterBarMetadata) {
+			const ariaText = this.buildInputAriaLabel();
+			if (ariaText) {
+				this.easyFilterInput.current?.setAriaLabel(ariaText);
+			}
+			this.ariaLabelApplied = true;
+		}
+	}
+
 	static render(rm: RenderManager, control: EasyFilterBarContainer): void {
 		return jsx.renderUsingRenderManager(rm, control, () => {
 			return <span ref={control}>{control.getAggregation("content")}</span>;