Form validation error messages within the Media Library widget are not read by the screenreader

Created on 11 October 2019, about 5 years ago
Updated 12 April 2023, over 1 year ago

Problem/Motivation

When @cboyden's team did an assistive tech walkthrough of Media Library for #2834729: [META] Roadmap to stabilize Media Library β†’ using NVDA on Firefox, we discovered that, when a user uploads media in the media library modal and leaves the required alt text field blank, the resulting error message that is provided is not read by the screenreader.

This is a problem because the user has no idea that there is an error, and the cannot proceed until they fix it.

This interaction can be viewed on the video recording of the September 29, 2019 walkthrough of Media Library at around minutes 15:30.

This was also discovered with the media upload form, and later confirmed to be true for any form within the Media Library widget that is rebuilt/submitted via AJAX.

This is also generally true for all forms in Drupal that have errors: see #3088245: Convey form error messages to assistive technologies β†’

Proposed resolution

Either use AJAX MessageCommand to provide the error messages so they are read by screenreaders.,
or add functionality in the Media Library UI JS that checks for error messages and sends them to Drupal.announce()

Remaining tasks

User interface changes

None anticipated.

API changes

None anticipated.

Data model changes

None anticipated.

Release notes snippet

TBD

πŸ› Bug report
Status

Needs work

Version

10.1 ✨

Component
MediaΒ  β†’

Last updated about 2 hours ago

Created by

πŸ‡ΊπŸ‡ΈUnited States rainbreaw

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs manual testing

    The change/bugfix cannot be fully demonstrated by automated testing, and thus requires manual testing in a variety of environments.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡¦πŸ‡ΊAustralia larowlan πŸ‡¦πŸ‡ΊπŸ.au GMT+10
    1. +++ b/core/modules/media_library/src/Form/AddFormBase.php
      @@ -857,4 +858,32 @@ protected function isAdvancedUi() {
      +    $response->addCommand(new ReplaceCommand('[data-drupal-selector="' . $form['#attributes']['data-drupal-selector'] . '"]', $form));
      

      We changed the selector from #media-library-add-form-wrapper (which is outside the form) to the inner form - is that intended?

      Do we end up with several nested wrappers?

    2. +++ b/core/modules/media_library/src/Form/AddFormBase.php
      @@ -857,4 +858,32 @@ protected function isAdvancedUi() {
      +      $message = is_array($error) ? reset($error) : (string) $error;
      +      $response->addCommand(new MessageCommand($message, '.media-library-widget-modal [data-drupal-messages-fallback]', ['type' => 'error']));
      

      If it is an array, what happens to the other entries in the array?

    3. +++ b/core/modules/media_library/src/Form/AddFormBase.php
      @@ -857,4 +858,32 @@ protected function isAdvancedUi() {
      +    // The drupal messages fallback defaults to having the .hidden class, but
      

      nit Drupal not drupal

    4. +++ b/core/modules/media_library/src/Form/AddFormBase.php
      @@ -857,4 +858,32 @@ protected function isAdvancedUi() {
      +    // should be visible for this usage.
      

      Why is this the case? It would be good to elaborate a bit more here

    5. +++ b/core/modules/media_library/src/Form/AddFormBase.php
      @@ -857,4 +858,32 @@ protected function isAdvancedUi() {
      +    $response->addCommand(new InvokeCommand('.media-library-widget-modal [data-drupal-messages-fallback]', 'removeClass', ['hidden']));
      

      Drupal.Message.defaultWrapper seems to do this already in messages.js - should we be deferring to that?

    6. +++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTestBase.php
      @@ -456,4 +456,22 @@ protected function assertSelectedMediaCount($text) {
      +      return strpos($announce->getText(), $expected_message) !== FALSE;
      

      We can use str_contains here now

  • Status changed to Needs work over 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    This actually may need some more thought.

    I tested again with the patch but this time using an image field vs media library and this patch. doesn't fix it. Think we should come up with a solution to make sure duplicate messages just don't appear.

    @larowlan any suggestion.

    At this time changes are not neede for #50 as a new solution is needed

Production build 0.71.5 2024