Motivation

ManagedFile::uploadAjaxCallback() renders a status_messages element into the replaced widget's #prefix and ships it inside the insert AJAX command. It should use the AJAX MessageCommand instead, which has been introduced with Drupal 8.8 - see change record.

This solves a couple of things:

1. Atm, this server-rendered messages use AJAX insert command and thus go via XSS filtering, stripping things like Olivero's SVG message icon. There is dedicated bug report for this #3457067: Status messages rendered in managed file form elements filter HTML too aggressively, which this issue would resolve.

2. Accessibility: Messages rendered via the AJAX message command are properly using aria live announcements, previously it relied on inline markup adding a role="alert" markup or similar. Live announcements is the way to do this right.

3. Flexible placement: Atm errors appear inside the file widget, between the Save button and the field, instead of the theme's message region where every other message goes. The MessageCommand supports both, via the wrapperQuerySelector - so we can decide what is preferred UX wise. Note: For better backwards compatibility, I've kept it within the widget in the attached MR.

4. By giving the theme the control to render the message, it allows decoupled rendering to render it nicely also. -> I'm using this for making support of ajax file uploads in Drupal-forms embedded in lupus-decoupled frontends nice.

Steps to reproduce

  • Drupal 11.4, standard install, Olivero, content type with a file field.
  • On the node form, upload a file exceeding the limit.
  • The error renders inside the widget and the page message region stays empty.

Proposed resolution

Adopt the AJAX MessageCommand.

User interface changes

When uploading a file via the core #managed_file element and errors occur, the error messages are rendered via the themes' implementation of the MessageCommand, not via server-rendered messages. This might be slightly different, depending on the theme.

Introduced terminology

-

API changes

-

Data model changes

-

Issue fork drupal-3618230

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

fago created an issue. See original summary.

fago’s picture

Issue summary: View changes
fago’s picture

Issue summary: View changes
Issue tags: +Accessibility

fago’s picture

Status: Active » Needs review

MR implemented, ready and tested successfully.

fago’s picture

Issue summary: View changes
fago’s picture

StatusFileSize
new67.45 KB

For better BC I decided to show the message where it has been shown so far, within the widget area and implemented it like this.

The result shows like this now:

Screenshot of Drupal show managed file error

fago’s picture

Issue summary: View changes

adding my use-case to render messages in a decoupled frontend nicely, as another motivation for this.

mgifford’s picture

Looks good @fago - thanks.

I added some AI generated tests as well as the logs of running https://www.guidepup.dev to see the changes for some assistive tech.