Bug 65: Navigation — Nested Menus Without ARIA

WCAG 4.1.2 (Name, Role, Value) | Dropdown/nested menus not marked as expandable or not announced properly.

Bug: Submenu Trigger Not Marked
<!-- BUG: No indication this expands submenu --> <span>Products ▼</span> <ul>...</ul> <!-- FIXED: HAL adds ARIA --> <button aria-haspopup="true" aria-expanded="false">Products</button> <ul>...</ul>
Bug: Submenu Hidden Without aria-hidden

When submenu is hidden (display: none), screen readers may still announce it. HAL ensures aria-hidden="true" on hidden submenus.

Bug: No Keyboard Navigation

Nested menus often only open on mouse hover or click. Keyboard users can't navigate with arrow keys. HAL ensures:

  • Arrow Down/Right opens submenu
  • Arrow Up/Left closes submenu
  • Escape closes submenu
  • Tab moves to next menu item
Bug: Nested Menu Not in List Structure
<!-- BUG: Submenu not semantic list --> <nav> <a href="/">Products</a> <div> <!-- Should be ul/li --> <a href="/prod1">Product 1</a> </div> </nav>
How HAL Fixes This: HAL detects nested menu patterns and adds ARIA attributes (aria-haspopup, aria-expanded, aria-hidden) to parent items. HAL ensures submenu items are in proper list structure. HAL adds keyboard event handlers for arrow key navigation and ESC to close. HAL manages focus appropriately when opening/closing submenus.