Contrib.social

[aria-*] attributes are not valid or misspelled

Open on Drupal.org →
Created on 19 October 2023, over 1 year ago
Updated 23 October 2023, over 1 year ago

Problem/Motivation

  1. The above elements outlined below under “Code snippet” need valid aria labels.
  2. Currently they are rendering as `aria-toolbar-link__labelledby` which is not a valid aria attribute.

WCAG success criteria

4.1.2 Name, Role, Value

Related technique

Using aria-labelledby to provide a name for user interface controls

Steps to reproduce

  1. Login as admin. Navigate to https://main-jzou9ixzyyxaeydzn8nlgczaygl7jxj0.tugboatqa.com/en. Chrome browser, desktop. Expand the sidebar.
  2. Verify the problem exists with an automated accessibility checker.
    • Analyze page with Lighthouse inside Chrome Dev Tools. Select “desktop” radio button.
    • `[aria-*] attributes are not valid or misspelled` should be one of the issues it reports.
  3. Verify the problem exists manually.
    • Inspect the code with Chrome Dev Tools.
    • Search for elements with the faulty aria attribute “aria-toolbar-link__labelledby”.

Code snippet

<ul class="toolbar-menu toolbar-block__content" aria-toolbar-link__labelledby="menu-top-menus">
<ul class="toolbar-menu <code>toolbar-menu toolbar-block__content" aria-toolbar-link__labelledby="menu--admin">
<ul class="toolbar-menu toolbar-menu toolbar-block__content" aria-toolbar-link__labelledby="menu--content">

Proposed resolution

Change these `aria-toolbar-link__labelledby` attributes to ‘aria-labelledby’.

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇪🇸Spain ckrina Barcelona

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

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024