Skip to content

Broken ARIA menu attributes on submenus - Regression in v3.3.12 #1443

@IDTK13170

Description

@IDTK13170

Describe the bug
After updating to Astroid Framework v3.3.12, accessibility errors regarding ARIA menus are reported by wave.webaim.org for the submenu items of the main menu. The ARIA labels for submenu titles display correctly, but WAVE reports "Broken ARIA menu" for submenu navigation (the menu uses tabs). This issue is now present on multiple sites using Astroid (example: kb.joomla.fr) and was not present in previous framework versions.

To Reproduce
Steps to reproduce the behavior:

  1. Install Astroid 3.3.12
  2. Open site or demo with submenu navigation
  3. Run accessibility checker (wave.webaim.org)
  4. Observe "Broken ARIA menu" errors for submenus

Expected behavior
Submenus should have the correct ARIA markup and pass accessibility validation tools such as wave.webaim.org. Previous Astroid versions had submenu ARIA properly configured.

Screenshots
WAVE accessibility report for broken ARIA menu submenus

System Informations (please complete the following information):

  • Joomla Version: [e.g. Joomla 5]
  • PHP Version [e.g. PHP 8]
  • Astroid Version: Astroid 3.3.12
  • Device: [e.g. Desktop, mobile]
  • OS: [e.g. Windows, macOS, Linux]
  • Browser: [e.g. Chrome, Firefox, Edge]

Additional context

  • The main menu ARIA displays correctly, but submenus are reported as broken.
  • The menu implementation uses tabs.
  • The bug affects multiple sites, appears after the latest Astroid update.
  • Example site: https://www.pennes-mirabeau.org/
  • This regression was not present in Astroid prior to 3.3.12.
  • Component files involved: framework/library/astroid/Component/Menu.php, framework/frontend/header/menu/*, js/megamenu.js.

Relevant code snippets related to submenu ARIA rendering:

From js/megamenu.js (AstroidMegaMenuPro class > injectARIA function):

// Submenu ARIA rendering
subTrigger.setAttribute('aria-haspopup', 'true');
subTrigger.setAttribute('aria-expanded', 'false');
if (!subMenu.id) {
    subMenu.id = 'megamenu-sub-' + Math.random().toString(36).substr(2, 9);
}
subTrigger.setAttribute('aria-controls', subMenu.id);
subTrigger.setAttribute('role', 'button');
subMenu.setAttribute('role', 'menu');

From framework/library/astroid/Component/Menu.php (Menu component class):

echo '<nav class="..." aria-label="'.$headerType.' menu">';
... (submenus are rendered as `<ul class="nav-submenu megamenu-submenu-level-1">`)

See also:

Thank you for your work and consideration on accessibility.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    Status

    Done

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions