fix(ui5-file-uploader): announce value state message to screen readers

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

@@ -478,6 +478,31 @@ describe("Interaction", () => {
 });
 
 describe("Accessibility", () => {
+	it("value state hidden text contains type label and default message", () => {
+		cy.mount(
+			<FileUploader id="uploader" value-state="Negative"></FileUploader>
+		);
+
+		cy.get("#uploader")
+			.shadow()
+			.find("#valueStateDesc")
+			.should("have.text", "Value State Error Invalid entry");
+	});
+
+	it("value state hidden text contains type label and custom message", () => {
+		cy.mount(
+			<FileUploader id="uploader" value-state="Negative">
+				<div slot="valueStateMessage">Custom error message.</div>
+			</FileUploader>
+		);
+
+		cy.get("#uploader")
+			.shadow()
+			.find("#valueStateDesc")
+			.should("include.text", "Value State Error")
+			.and("include.text", "Custom error message.");
+	});
+
 	it("A11y attributes", () => {
 		cy.mount(
 			<>

packages/main/src/FileUploader.ts

@@ -35,6 +35,10 @@ import {
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	FILEUPLOADER_DEFAULT_PLACEHOLDER,
 	FILEUPLOADER_DEFAULT_MULTIPLE_PLACEHOLDER,
 	FILEUPLOADER_ROLE_DESCRIPTION,
@@ -624,9 +628,35 @@ class FileUploader extends UI5Element implements IFormInputElement {
 			"ariaHasPopup": "dialog",
 			"ariaLabel": getAllAccessibleNameRefTexts(this) || getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || undefined,
 			"ariaDescription": getAllAccessibleDescriptionRefTexts(this) || getEffectiveAriaDescriptionText(this) || undefined,
+			"ariaDescribedBy": this.hasValueState ? "valueStateDesc" : undefined,
 		};
 	}
 
+	get valueStateTypeMappings(): Record<string, string> {
+		return {
+			"Positive": FileUploader.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": FileUploader.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Negative": FileUploader.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Critical": FileUploader.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
+	get ariaValueStateHiddenText(): string | undefined {
+		if (!this.hasValueState) {
+			return undefined;
+		}
+
+		const valueStateType = this.valueStateTypeMappings[this.valueState];
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return this.valueStateText ? `${valueStateType} ${this.valueStateText}` : valueStateType;
+		}
+
+		return this.valueStateMessage.length
+			? `${valueStateType} ${this.valueStateMessage.map(el => el.textContent).join(" ")}`
+			: valueStateType;
+	}
+
 	get inputTitle(): string {
 		return FileUploader.i18nBundle.getText(FILEUPLOADER_INPUT_TOOLTIP);
 	}

packages/main/src/FileUploaderTemplate.tsx

@@ -35,10 +35,14 @@ export default function FileUploaderTemplate(this: FileUploader) {
 						aria-description={this.accInfo.ariaDescription}
 						aria-required={this.accInfo.ariaRequired}
 						aria-invalid={this.accInfo.ariaInvalid}
+						aria-describedby={this.accInfo.ariaDescribedBy}
 						onClick={this._onNativeInputClick}
 						onChange={this._onChange}
 						data-sap-focus-ref
 					/>
+					{this.hasValueState &&
+						<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+					}
 				</div>
 
 				{this.hideInput ? (