Edit menu item does not have a unique landmark

Created on 19 August 2022, over 2 years ago
Updated 17 January 2025, about 2 months ago

Problem/Motivation

Accessibility scans throw two errors on pages with the admin toolbar loaded.
Ensures landmarks are unique
Location
.toolbar-tab:nth-child(4) > div > .toolbar-lining.clearfix
Source

The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable.

All page content should be contained by landmarks
Element location
#toolbar-administration
Element source

To solve this issue, you need to...
Fix the following:
Some page content is not contained by landmarks

Steps to reproduce

Install fresh drupal site
Enable admin toolbar
Log in
Scan site with axe DevTools

Proposed resolution

The first error is triggered by the edit icon on the far right. I'm not sure how to resolve at the moment.
The second error can be solved by adding a role="navigation" to the top level div, I will provide a patch in a moment.

Remaining tasks

Resolve the unique landmarks error

User interface changes

API changes

Data model changes

πŸ› Bug report
Status

Postponed

Version

3.1

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States nicxvan

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

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡ΈUnited States majorrobot

    This is likely caused by the template your admin theme is using.

    I found that I was able to resolve these issues by overriding the toolbar template. It was a bit tricky since I had to add a template suggestion to wrest control out of my admin theme's (Claro's) grip.

    I put this in my .theme file:

    function my_theme_theme_suggestions_toolbar_alter(array &$suggestions, array $variables) {
      // Add theme hook suggestions for toolbar so that we can override Claro. Otherwise, we just get Claro's template.
      if (!empty($variables['element']['#attributes']['id'])) {
        $suggestions[] = 'toolbar__' . str_replace('-', '_', $variables['element']['#attributes']['id']);
      }
    }
    

    Then I copied Claro's toolbar.html.twig into my theme as toolbar--toolbar-administration.html.twig.

    In the twig file, I saw

    
    {% for key, tab in tabs %}
       ...
        <nav class="toolbar-lining clearfix" role="navigation">
       ...
    {% endfor %}
    

    Which was causing trouble -- there's not a unique name on this element, which could be used several times. So I added an iterator:

    {% set i = 0 %}
    {% for key, tab in tabs %}
       ...
        <nav class="toolbar-lining clearfix" role="navigation" aria-label="admin-toolbar-nav-{{ i }}">
       ...
    {% set i = i + 1 %}
    {% endfor %}
    

    For your second issue (which I also had), I added a landmark to wrap the whole toolbar. I haven't run this past any accessibility experts yet, but this does pass Axe's test:

    <section id="toolbar-wrapper">
      <div{{ attributes.addClass('toolbar') }}>
        <nav{{ toolbar_attributes.addClass('toolbar-bar', 'clearfix') }}>
       ...
    </section>
    

    I hope this helps someone!

  • πŸ‡ΊπŸ‡ΈUnited States kentr Durango, CO

    I'm seeing almost identical errors without this module, so these problems may be in core. I'm looking into it further and will file core issues if needed.

  • πŸ‡ΊπŸ‡ΈUnited States kentr Durango, CO

    Definitely a core issue.

  • πŸ‡ΊπŸ‡ΈUnited States majorrobot

    @kentr -- agreed. Admin Toolbar uses the admin theme's toolbar template, and the root issue -- for me, at least -- was in the Claro theme.

  • πŸ‡ΊπŸ‡ΈUnited States kentr Durango, CO

    🌱 [META] improve accessibility of toolbar Active covers these.

    I suggest closing this issue.

Production build 0.71.5 2024