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’.

Issue fork navigation-3395240

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

ckrina created an issue. See original summary.

ckrina credited katannshaw.

ckrina credited pjudge.

ckrina’s picture

Issue summary: View changes
katannshaw’s picture

Issue summary: View changes

Updating summary to better reflect issue.

KurtTrowbridge made their first commit to this issue’s fork.

kurttrowbridge’s picture

Status: Active » Needs review

Bonjour from Lille! I adjusted the top and middle regions to use aria-labelledby attributes. MR created. :)

jmcwherter’s picture

Status: Needs review » Reviewed & tested by the community

I reviewed this in Tugboat and saw that the attribs say aria-labelledby

ckrina’s picture

Status: Reviewed & tested by the community » Fixed

Thanks all for the fixes!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.