Menu blocks placed via layout builder don't get an appropriate HTML ID, causing issues with accessibility

Created on 2 June 2020, over 4 years ago
Updated 18 April 2024, 7 months ago

The default block template used for menu blocks includes some accessibility enhancements so that the menu is semantically treated as a navigation landmark for screen readers and is labeled appropriately based on the title of the block:

{% set heading_id = attributes.id ~ '-menu'|clean_id %}
<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
  {# Label. If not displayed, we still provide it for screen readers. #}
  {% if not configuration.label_display %}
    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
  {% endif %}
  {{ title_prefix }}
  <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
  {{ title_suffix }}

  {# Menu. #}
  {% block content %}
    {{ content }}
  {% endblock %}
</nav>

The labeling part is sort of broken when the block is placed using Layout Builder and will cause issues if there's more than one menu output on the page. This is because the label of the block is assigned to the navigation landmark using an HTML ID, but the HTML ID is not set by Layout Builder. If instead the block is output using the block placement UI, the ID is set thanks to BlockViewBuilder.

So for Layout Builder, the template will include markup like this:

<nav role="navigation" aria-labelledby="-menu" data-block-plugin-id="menu_block:ps-utility-menu" class="block block-menu navigation menu--ps-utility-menu"> 
  <h2 id="-menu">Utility menu</h2>
  ...
</nav>

The ID is not unique anymore. Any additional menu blocks on the page will have the same "-menu" ID and screen readers won't handle this well.

I don't think layout builder should assign an ID attribute for every block, but it seems like in the case of menu blocks it needs to, since the menu block template assumes it is set.

πŸ› Bug report
Status

Closed: duplicate

Version

11.0 πŸ”₯

Component
Layout builderΒ  β†’

Last updated about 13 hours ago

Created by

πŸ‡ΊπŸ‡ΈUnited States bkosborne New Jersey, USA

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.

  • πŸ‡¨πŸ‡¦Canada bensti

    what happen with this issues?

    this is not only the menu block. all my block place with Layout builder dont have any ID. only a ugly class : block-block-content52048ada-f924-4fb5-a0a0-ccd02ca9ccc5

    any solution?

  • Status changed to Closed: duplicate 7 months ago
  • πŸ‡³πŸ‡ΏNew Zealand danielveza Brisbane, AU

    Thanks for raising an issue! In my opinion this is a duplicate issue of πŸ› System Menu blocks do not have attributes Needs work . That issue has an open MR and some further progress, so I'm closing this one as a duplicate.

    Thanks!

Production build 0.71.5 2024