diff --git a/packages/main/cypress/specs/FileUploader.cy.tsx b/packages/main/cypress/specs/FileUploader.cy.tsx
index 280b0611b7d0..7bf66571f44d 100644
--- a/packages/main/cypress/specs/FileUploader.cy.tsx
+++ b/packages/main/cypress/specs/FileUploader.cy.tsx
@@ -71,7 +71,29 @@ describe("API", () => {
cy.get("[ui5-file-uploader]")
.shadow()
.find("input[type='file']")
- .should("have.attr", "aria-required", "true");
+ .as("nativeInput")
+ .should("have.attr", "required");
+
+ cy.get("@nativeInput")
+ .should("have.attr", "aria-invalid", "false");
+ });
+
+ it("aria-invalid reflects value state", () => {
+ (["None", "Positive", "Critical", "Information"] as const).forEach(valueState => {
+ cy.mount();
+
+ cy.get("[ui5-file-uploader]")
+ .shadow()
+ .find("input[type='file']")
+ .should("have.attr", "aria-invalid", "false");
+ });
+
+ cy.mount();
+
+ cy.get("[ui5-file-uploader]")
+ .shadow()
+ .find("input[type='file']")
+ .should("have.attr", "aria-invalid", "true");
});
it("accept property", () => {
diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts
index 9f8f14218861..20491c83a9cc 100644
--- a/packages/main/src/FileUploader.ts
+++ b/packages/main/src/FileUploader.ts
@@ -625,8 +625,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
get accInfo(): InputAccInfo {
return {
"ariaRoledescription": FileUploader.i18nBundle.getText(FILEUPLOADER_ROLE_DESCRIPTION),
- "ariaRequired": this.required || undefined,
- "ariaInvalid": this.valueState === ValueState.Negative || undefined,
+ "ariaInvalid": this.valueState === ValueState.Negative,
"ariaHasPopup": "dialog",
"ariaLabel": getAllAccessibleNameRefTexts(this) || getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || undefined,
"ariaDescription": getAllAccessibleDescriptionRefTexts(this) || getEffectiveAriaDescriptionText(this) || undefined,
diff --git a/packages/main/src/FileUploaderTemplate.tsx b/packages/main/src/FileUploaderTemplate.tsx
index a54954d0ca88..3c888888d9cf 100644
--- a/packages/main/src/FileUploaderTemplate.tsx
+++ b/packages/main/src/FileUploaderTemplate.tsx
@@ -28,12 +28,12 @@ export default function FileUploaderTemplate(this: FileUploader) {
multiple={this.multiple}
accept={this.accept}
disabled={this.disabled}
+ required={this.required}
title={this.inputTitle}
aria-roledescription={this.accInfo.ariaRoledescription}
aria-haspopup={this.accInfo.ariaHasPopup}
aria-label={this.accInfo.ariaLabel}
aria-description={this.accInfo.ariaDescription}
- aria-required={this.accInfo.ariaRequired}
aria-invalid={this.accInfo.ariaInvalid}
aria-describedby={this.accInfo.ariaDescribedBy}
onClick={this._onNativeInputClick}
diff --git a/packages/main/test/pages/FileUploader.html b/packages/main/test/pages/FileUploader.html
index 0797c162c517..5a284550c455 100644
--- a/packages/main/test/pages/FileUploader.html
+++ b/packages/main/test/pages/FileUploader.html
@@ -112,6 +112,53 @@
Check Validity
+
+
+ Form submission & shadow input isolation
+
+
+
+
+
+
Required — AT announcement
+
+
+ Required:
+
+
+
+ Not required:
+
+
+
+
+
+
+
Required with value states
+
+
+ Required, no value state:
+
+
+
+
Required, Negative:
+
+ This field is required
+
+
+
+
+