[FileUploader]: The `aria-required="true"` attribute is not present, despite the `required` property being set to true.

[lxyb828-git]

Describe the bug

Although we've set the required property to true for the FileUploader component, the aria-required="true" attribute is still missing from the input. This results in an accessibility issue.

Isolated Example

No response

Reproduction steps

...

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

2.14.1

UI5 Web Components Version

2.14.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @lxyb828-git

the input has aria-hidden applied, so adding the required attribute there would have no affect. Since the required state is currently not audible for screen reader users, this would still need to be adjusted. Since this component is developed in the ui5/webcomponents repo, I'm transferring this issue there, so the component owners can check.

---

Hi Colleagues,
I noticed that the same problem does not only exist for the required state but for disabled as well.

[judith9209]

Hi,
this bug was reported from customer name you can see in SFPLU-11969. We require the code fix to be made till end of this month July.

Thank you for your collaboration!

[Todor-ads]

Hello @UI5/ui5-team-ctr-bal
Can you please take a look at this ui5-file-uploader issue?

Best Regards,
Todor

[unazko]

Hello @lxyb828-git,

Setting the required property will lead to the appearance of the aria-required attribute for the input type="file".
The input with aria-hidden attribute is a display only input field and it is made to be skipped by the screen readers on purpose. The actual type="file input field has aria-required attribute, will receive focus and all accessibility announcement should come from there.

You can see in the following screenshot that there are two containers:

• a visual container (contains the display elements, one of them is the display input field with aria-hidden attribute)
• form container (contains the input type="file" element, the actual file upload field)

Unfortunately the required state would still NOT get announced on Chromium based browsers due to an update in Chromium in relation to the accessibility compliance.
In Firefox you could observe that the required state would be announced.

We've created the following enhancement incident, in order to target this issue:
#13777

We'll need to switch to the native required attribute instead of the aria-required attribute, in order to fix the screen reader announcement. An evaluation on the required usage has to be made beforehand though as this native attribute would also affect the UX behavior of control and not only the screen reader announcements.

This issue would be tracked through this item:
#13777

Best regards,
Boyan

[github-actions]

This issue has been closed. To reopen, just leave a comment!