[arina-gutuboe]

Implements LIBS-857

---

Description

FileInput and FileInputField had no ARIA wiring: help/validation text wasn't linked to the input, and the screen reader heard nothing when files were added or removed.

What changed:

• Button name/description: label, help text and validation text get ids (from name); the upload button gets aria-labelledby (button text + field label) and aria-describedby (help + validation text).
• Live announcements: FileInputField renders a hidden role="status" region via a new statusMessage prop.
• Remove button: gets role="button" and aria-label="Remove <filename>" (reuses existing removeText);

---

Known issues

• Removing a file from FileInputFieldWithList unmounts its "Remove" control, so keyboard focus is lost to <body> (Follow-up: LIBS-873)

---

Checklist

• API docs are generated
• Tests were added
• Storybook demos were added N/A

[sonarqubecloud]

Quality Gate failed

Failed conditions
2 New issues
2 New Code Smells (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[dhis2-bot]

🚀 Deployed on https://pr-1785--dhis2-ui.netlify.app

[arina-gutuboe]

SonarCloud S6819 on file-input-field.js ("use <output> instead of role="status""): false positive.

I'm keeping <span role="status"> for the hidden live region. role="status" is the usual way to announce updates, and screen readers handle it more reliably than <output>. <output> is also a form element, so it would end up in form.elements, which we don't want for something that only exists for assistive tech. AlertBar already uses the same pattern.

[arina-gutuboe]

SonarCloud S6819 on file-list-item.js ("use <button> instead of role="button""): valid, but intentionally deferred.

The Remove action is still a <span> with role="button", tabIndex={0}, an aria-label and Enter/Space/Delete handling, so it's usable with keyboard and screen readers. Switching to a native <button> would change the markup and default styling for people using the component, and it needs a rewrite of the key handling to avoid calling onRemove twice.

But if you think it's worth switching to a native <button>, let me know.