Problem/Motivation

Server messages are rendered as hidden elements. js/izi_message.js shows each one as an iziToast toast and removes the element. This has two problems:

  • Screen readers do not hear these messages. iziToast adds no role or aria-live, and the hidden element is removed. JS messages (Drupal.Message) are announced, because core's add() calls Drupal.announce().
  • The wrapper is hidden with an inline style="display: none !important;". A Content Security Policy without 'unsafe-inline' for styles blocks it, so the messages show as plain text until the toasts appear.

Proposed resolution

  • js/izi_message.js: call Drupal.announce() with the title and the text of each message. Use 'assertive' for errors, as core does. Add core/drupal.announce to the izi_message/izi_message library.
  • templates/izi-message.html.twig: replace the inline style with the hidden attribute. The fallback without the iziToast library removes the attribute.
  • README and help page: note that without JavaScript the server messages are not shown (known limitation).

Remaining tasks

  • FunctionalJavascript test: a server message is in the #drupal-live-announce region.
  • Check that a theme override of izi-message.html.twig with the inline style still works.
  • MR, review.

User interface changes

Screen readers announce server messages.

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

usingsession created an issue. See original summary.

  • usingsession committed 22ef790a on 3.x
    feat: #3629354 Announce server messages to screen readers; hide them...
usingsession’s picture

Status: Active » Fixed
Parent issue: » #3628891: [META] Release 3.0.0 for Drupal 11.2+

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • usingsession committed 6bc67d9c on 3.x
    Issue #3629354 by usingsession: Announce server messages without the...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.