Broken Aria References

Created on 12 December 2019, about 5 years ago
Updated 14 May 2024, 9 months ago

Problem/Motivation

Broken Aria References were reported for the following pages:
admin/config/media/file-system
admin/config/search/pages
admin/config/regional/settings

From comment #11. Form elements have the default behavior of adding an aria-describedby if #description exists, but in some cases a description isn't rendered (individual radio button, details), so aria-describedby points to a nonexistent ID.

Steps to reproduce

Proposed resolution

Add tests

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.0 🔥

Component
Form 

Last updated 4 days ago

Created by

🇮🇳India Tarun Lewis Belgaum

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 issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

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.

  • Status changed to Active 11 months ago
  • 🇳🇿New Zealand quietone

    At Drupal South code sprint. As far as I know this still needs tests and fixes for the pages mentioned in the issue summary.
    Added IS template to help others but it still needs to be completed,

  • 🇨🇦Canada bisonbleu

    Just running into this issue in a custom theme. Here is the code sample that generates the «Broken ARIA reference» error:

    <!-- BEGIN OUTPUT from 'core/modules/system/templates/input.html.twig' -->
    <input data-drupal-selector="edit-subscriptions-sip-n-savour" aria-describedby="edit-subscriptions--description" type="checkbox" id="edit-subscriptions-sip-n-savour" name="subscriptions[sip_n_savour]" value="sip_n_savour" class="form-checkbox">
    <!-- END OUTPUT from 'core/modules/system/templates/input.html.twig' -->
    
    <!-- BEGIN OUTPUT from 'core/modules/system/templates/form-element-label.html.twig' -->
    <label for="edit-subscriptions-sip-n-savour" class="option">SIP n’ SAVOUR</label>
    
  • 🇨🇦Canada bisonbleu

    For the short term, simply adding an ID to the checkbox label does the job; the use case is Simplenews subscriptions on user register page.

    /**
     * Implements template_preprocess_form_element_label().
     */
    function my_custom_theme_preprocess_form_element_label(&$variables) {
      $id = $variables['element']['#id'] ?? '';
      if ($id && str_contains($id, 'edit-subscriptions-')) {
        $variables['attributes']['id'] = 'edit-subscriptions--description';
      }
    }
    
Production build 0.71.5 2024