Skip to content

fix(ui5-file-uploader): replace aria-required with native required on shadow input#13846

Open
unazko wants to merge 3 commits into
mainfrom
file_uploader_required
Open

fix(ui5-file-uploader): replace aria-required with native required on shadow input#13846
unazko wants to merge 3 commits into
mainfrom
file_uploader_required

Conversation

@unazko

@unazko unazko commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Issue:
Chromium-based browsers (Chrome, Edge) no longer announce aria-required
for because the element is exposed as a button role
in the accessibility tree, and aria-required is not a valid property for
that role. As a result, NVDA and JAWS users on Chrome/Edge did not hear
a "required" announcement for required file uploader fields.

Solution:
Replace aria-required with the native required attribute on the shadow
. To prevent the native valueMissing state from
causing a premature "invalid entry" announcement before user interaction,
aria-invalid is explicitly set to false for all value states except
Negative, where aria-invalid="true" is intentionally preserved. This
keeps invalid state communication fully under application control, consistent
with how other UI5 form components behave.

Fixes: #13777
Relates to: #13305
Relates to: #13808

…e required on shadow input

Replace aria-required with the native required attribute on the internal
<input type="file"> to improve accessibility announcements in
Chromium-based browsers (Chrome/Edge), where aria-required is no longer
announced by NVDA/JAWS for file inputs exposed as button role in the
accessibility tree.

This is a prototype for manual AT testing on Windows with NVDA/JAWS
before merging. A test page with four scenarios covering ElementInternals
validity, shadow input form isolation, required announcement, and
premature invalid announcement has been added to the test page.

Relates to: #13777
Relates to: #13305
Relates to: #13808
@unazko
unazko temporarily deployed to netlify-preview July 20, 2026 12:51 — with GitHub Actions Inactive
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

… shadow input

Issue:
Chromium-based browsers (Chrome, Edge) no longer announce aria-required
for <input type="file"> because the element is exposed as a button role
in the accessibility tree, and aria-required is not a valid property for
that role. As a result, NVDA and JAWS users on Chrome/Edge did not hear
a "required" announcement for required file uploader fields.

Solution:
Replace aria-required with the native required attribute on the shadow
<input type="file">. To prevent the native valueMissing state from
causing a premature "invalid entry" announcement before user interaction,
aria-invalid is explicitly set to false for all value states except
Negative, where aria-invalid="true" is intentionally preserved. This
keeps invalid state communication fully under application control, consistent
with how other UI5 form components behave.

Fixes: #13777
Relates to: #13305
Relates to: #13808
@unazko
unazko temporarily deployed to netlify-preview July 24, 2026 09:52 — with GitHub Actions Inactive
@unazko unazko changed the title feat(ui5-file-uploader): [prototype] replace aria-required with native required on shadow input fix(ui5-file-uploader): replace aria-required with native required on shadow input Jul 24, 2026
@unazko
unazko requested a review from GDamyanov July 24, 2026 09:53
@unazko
unazko marked this pull request as ready for review July 24, 2026 09:53
@unazko
unazko temporarily deployed to netlify-preview July 24, 2026 09:54 — with GitHub Actions Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ui5-file-uploader]: the required state is not announced on chromium based browsers

1 participant