Move sticky toolbar menu into <nav> landmark

Created on 20 October 2023, over 1 year ago
Updated 23 October 2023, over 1 year ago

Problem/Motivation

  • All content should be contained within landmark roles
  • The sticky toolbar menu is a navigation menu, so it should live within a Navigation Landmark

Steps to reproduce

  1. Go to site to see sidebar navigation
  2. Inspect the page and search for CSS class admin-toolbar__sticky-section
  3. Verify that the menu contains a "ul" element, but it’s not contained within a "nav" element

Code snippet

<div class="admin-toolbar__sticky-section" style="">
  <div class="admin-toolbar__item toolbar-block" style="">
    <ul class="toolbar-menu" style="">

Screenshot

https://www.drupal.org/files/issues/2023-10-20/sticky-nav.png

Proposed resolution

  1. Change sticky toolbar menu from "div" to "nav" element
  2. Add "h2" heading with id
  3. Add aria-labelledby attribute to "nav" element
<nav class="admin-toolbar__sticky-section" style="" aria-labelledby=”toolbar-menu”>
  <div class="admin-toolbar__item toolbar-block" style="">
    <h2 id=””>Toolbar Menu</h2>
    <ul class="toolbar-menu" style="">
🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇺🇸United States katannshaw Kansas

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

Production build 0.71.5 2024