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

Created on 22 August 2024, about 1 year 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

Proposed resolution

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

🐛 Bug report
Status

Active

Version

10.2

Component
Claro 

Last updated 8 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 about 1 year 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 about 1 year 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>
    

  • Status changed to Closed: outdated about 2 months ago
  • 🇺🇸United States smustgrave

    Since there's been no follow up to above going to close out. If still valid please re-open with steps

Production build 0.71.5 2024