Screen reader does not read help text for file upload when creating new media

Created on 22 August 2024, 4 months ago
Updated 27 August 2024, 4 months ago

Problem/Motivation

The screen reader does not read the help text for file upload.

Steps to reproduce

1. Add content
2. Add media
3. Upload file to media type

Note: Turn on voice over
macOS = (voiceover) Press Cmd + F5 to enable VoiceOver.
Windows = (Narrator) Press Win + Ctrl + Enter to start Narrator immediately.

Proposed resolution

Add an aria-described by attribute to the file upload element that refers to the help text ID.

🐛 Bug report
Status

Postponed: needs info

Version

11.0 🔥

Component
Claro 

Last updated 2 days ago

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.

Sign in to follow issues

Comments & Activities

  • Assigned to sourav_paul
  • 🇳🇿New Zealand quietone

    Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies.

  • 🇮🇳India sourav_paul Kolkata

    I've tried to replicate the issue but can't by using the following steps...
    I've tested it D10.2 & D11.0.1

    Needs more info...

  • Issue was unassigned.
  • Status changed to Needs work 4 months ago
  • Updating the status to 'Needs Work' and adding the tag for STR, as #5 is unable to replicate the issue.

  • Status changed to Postponed: needs info 4 months ago
  • The aria-describedby attribute is set and it is set to the correct element, and the screen reader announces it.

    <div class="js-form-item form-item js-form-type-managed-file form-type--managed-file js-form-item-upload form-item--upload">
          <label for="edit-upload-upload--ww6zLjlooeg" id="edit-upload--aatPBnZtlHw--label" class="form-item__label">Add file</label>
            <div id="edit-upload--aatPBnZtlHw" class="js-form-managed-file form-managed-file is-multiple has-upload no-value no-meta">
      <div class="form-managed-file__main">
        
        <input aria-describedby="edit-upload--aatPBnZtlHw--description" data-drupal-selector="edit-upload-upload-ww6zljlooeg" type="file" id="edit-upload-upload--ww6zLjlooeg" name="files[upload]" size="22" class="js-form-file form-file form-element form-element--type-file form-element--api-file" data-once="fileValidate auto-file-upload"><input class="js-hide upload-button button js-form-submit form-submit" data-drupal-selector="edit-upload-upload-button" formnovalidate="formnovalidate" type="submit" id="edit-upload-upload-button--U-Kw8pzuZKk" name="upload_upload_button" value="Upload" data-once="drupal-ajax">
      </div>
    
      
        <input data-drupal-selector="edit-upload-fids" type="hidden" name="upload[fids]">
    </div>
    
                <div id="edit-upload--aatPBnZtlHw--description" class="form-item__description">
          One file only.<br>2 MB limit.<br>Allowed types: png gif jpg jpeg webp.
    
        </div>
      </div>
    

Production build 0.71.5 2024