Problem/Motivation

There's an aria-live region in the toolbar, this is the JS that generates it:

<div aria-live="polite" data-drupal-selector="ckeditor5-admin-help-message">
 <p>${helpMessage.join('</p><p>')}</p>
</div>

The help message it provides is currently one of these two things, based on whether or not the "wrapping item is in use":

  • "The toolbar buttons that don't fit the user's browser window width will be grouped in a dropdown. If multiple toolbar rows are preferred, those can be configured by adding an explicit wrapping breakpoint wherever you want to start a new row.",
  • 'You have configured a multi-row toolbar by using an explicit wrapping breakpoint. This may not work well in narrow browser windows. To use automatic grouping, remove any of these divider buttons.',

This only needs to be conveyed once, unless the presence of the "wrapping" item changes, which should result in the message changing and that being conveyed to AT.

THE PROBLEM
This aria-live region is part of the area re-rendered any time an item is moved within the toolbar config. As a result the "The toolbar buttons that don't fit..." announcement is conveyed to AT after ANY change to toolbar config. Because it's a new+regenerated aria-live region, there's no awareness that the message is unchanged and it's re-conveyed. This is a problem regardless, but it's particularly disruptive since the message being conveyed is about a very specific use case that is unlikely to reflect what the user is actually doing.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Issue fork drupal-3270112

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

bnjmnm created an issue. See original summary.

bnjmnm’s picture

Issue tags: +stable blocker

bnjmnm’s picture

Status: Active » Needs review
wim leers’s picture

Status: Needs review » Reviewed & tested by the community
Parent issue: » #3238333: Roadmap to CKEditor 5 stable in Drupal 9
Related issues: +#3239423: Toolbar UI accessibility review: round 2
  1. 👍 Reproduced the problem.
  2. 👍 Applied the patch — which looks fine btw: instead of marking the help text as aria-live="polite", we're omitting that attribute and doing an explicit Drupal.announce() (which defaults to polite). So instead of letting the browser/AT detect a changed "aria live polite" and having it read it automatically, we're explicitly doing it in code, because we know this piece in the DOM is changing frequently, and would overwhelm the user.
  3. 👍 Patch solves the problem when testing 😊

  • lauriii committed a6ee1a1 on 10.0.x
    Issue #3270112 by bnjmnm, Wim Leers: Excessive aria-live announcing from...

  • lauriii committed 577ae19 on 9.4.x
    Issue #3270112 by bnjmnm, Wim Leers: Excessive aria-live announcing from...

  • lauriii committed 0299fa5 on 9.3.x
    Issue #3270112 by bnjmnm, Wim Leers: Excessive aria-live announcing from...
lauriii’s picture

Version: 9.4.x-dev » 9.3.x-dev
Priority: Normal » Major
Status: Reviewed & tested by the community » Fixed

Committed a6ee1a1 and pushed to 10.0.x. Also cherry-picked to 9.4.x and 9.3.x. Thanks!

Status: Fixed » Closed (fixed)

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