Skip to content

Fix(5512): Tertiary menu list structure - avoid nested <li>#5527

Draft
accesswatch wants to merge 7 commits intomainfrom
fix/5512-tertiary-list-structure
Draft

Fix(5512): Tertiary menu list structure - avoid nested <li>#5527
accesswatch wants to merge 7 commits intomainfrom
fix/5512-tertiary-list-structure

Conversation

@accesswatch
Copy link
Copy Markdown
Contributor

@accesswatch accesswatch commented Apr 23, 2026

Fixes #5512 — Why: sites running Quickstart 3.2.0 with AZ Navbar saw HTML validation errors caused by nested

  • elements at the tertiary menu level, which can confuse assistive technologies and produce invalid DOM structures.

    What this change does:

    • Removes the nested <li> pattern at the tertiary menu level so the menu renders valid HTML.
    • Standardizes the split-toggle accessible name to an i18n-safe placeholder (Submenu for @title).

    Impact:

    • Resolves Nu Html Checker / DubBot <ul>/<ol> direct-children` validation errors attributed to the navbar.
    • Improves screen reader interpretation of the menu structure.

    How to test:

    1. Enable AZ Navbar in Arizona Barrio theme and render a three-level menu where tertiary items are plain links.
    2. Run Nu Html Checker / DubBot against the rendered page and confirm the <ul>/<ol> error is gone.
    3. Test with a screen reader (NVDA/VoiceOver) to confirm the submenu buttons announce the submenu name.
    4. Verify no visual or JS regressions in dropdown/collapse behavior.

    Notes:

  • Both split-toggle buttons previously used {{ item.title }} as their
    visually-hidden text, making them indistinguishable from the adjacent
    link for screen reader users (WCAG 4.1.2 Name, Role, Value).
    
    - Append ', expand submenu' (translatable) to the visually-hidden text
      on both the level-0 and level-1 split-toggle buttons so they
      announce distinctly from the adjacent link (e.g. "People, expand
      submenu, button" vs "People, link").
    - Remove data-bs-auto-close="outside" from the level-1 collapse
      trigger button; that attribute is a Bootstrap Dropdown option only
      and has no effect on a data-bs-toggle="collapse" element.
    Both the level-0 and level-1 split-toggle buttons were using
    {{ item.title }} as their visually-hidden text, making them
    indistinguishable from the adjacent link for screen reader users
    (e.g. both announced as "People, link" and "People, button").
    
    Changes:
    - Add ', expand submenu' suffix (translatable) to the visually-hidden
      span on both split-toggle buttons so they announce distinctly from
      their sibling links (e.g. "People, expand submenu, button").
    - Remove the ineffective data-bs-auto-close="outside" attribute from
      the level-1 collapse button; that option only applies to
      data-bs-toggle="dropdown", not data-bs-toggle="collapse".
    
    Fixes #5511
    …toggle text
    
    - Use single translatable string with @title placeholder instead of
      concatenating item.title with separately-translated suffix (i18n)
    - Make level 1 collapse toggle label state-aware: 'Collapse submenu'
      when expanded, 'Expand submenu' when collapsed (WCAG 4.1.2)
    - Level 0 dropdown toggle keeps 'Expand' since aria-expanded starts
      false and Bootstrap JS manages runtime state
    
    Resolves Copilot review comments on PR #5517
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Labels

    None yet

    Projects

    None yet

    Development

    Successfully merging this pull request may close these issues.

    AZ Navbar: tertiary menu items produce invalid list structure on sites running 3.2.0

    1 participant