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 +
+ Attachment (required):
+ +

+ Name:
+ +

+ +   + Inspect form.elements +
+ +
+ +
+ Required — AT announcement +
+
+ Required: + +
+
+ Not required: + +
+
+
+ +
+ Required with value states +
+
+ Required, no value state: + +
+
+ Required, Negative: + +
This field is required
+
+
+
+
+