Problem/Motivation

With Accessible Menu 1.0.1, the Bootstrap 5 adapter (accessible-menu-bootstrap-5 2.1.0), and Bootstrap JavaScript enabled, keyboard input can be handled by both Bootstrap and Accessible Menu. A Top Link Disclosure submenu can throw a JavaScript exception or skip items when ArrowDown/ArrowUp is pressed. The issue reproduces without a Drupal theme, with either Bootstrap 5.1.3 or 5.3.8 loaded once.

Steps to reproduce

  1. Configure a Bootstrap 5 Top Link Disclosure menu with a parent link, a separate submenu toggle, three child links, hover disabled, and optional keyboard support enabled.
  2. Tab to the toggle and press Space, ArrowDown, ArrowDown, ArrowUp, and Escape.
  3. Expect the first, second, and first child respectively, then a closed submenu with focus on its toggle. Observe an exception or a skipped item instead.

The template toggle lacks the Bootstrap data attribute used to find its owner from a submenu key event. Adding that attribute alone does not resolve duplicate key handling: the adapter disables Bootstrap lazily on its show event, but Accessible Menu can already have opened the real submenu.

Proposed resolution

Initialize the adapter's Bootstrap cancellation before user input, while preserving standalone Accessible Menu operation and unrelated Bootstrap dropdowns. Cover nested menus, repeated Drupal behavior attachment, and both supported keyboard and pointer interaction in real-browser regression tests. Target 1.x, used by the stable release; the shared generator on 2.x should be assessed for a corresponding follow-up.

Remaining tasks

  • Implement and verify failing-before/passing-after browser regressions.
  • Verify a clean Drupal installation and submit an Issue-fork MR for maintainer review.

Discovered while validating #3627282: Update the Tags menu to use an Accessible Menu dropdown. Theme-specific contrast, layout, and duplicate library issues are tracked separately in Bootstrap Cloud #3621976. No merge or release is requested as part of this report.

Issue fork accessible_menu-3628260

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

ai_yas created an issue. See original summary.

ai_yas opened merge request !14

ai_yas’s picture

ai_yas commented
Status: Needs work » Needs review

Implemented in MR!14, from the issue-fork branch 3628260-bootstrap-keyboard into 1.x.

The same browser regression suite fails four cases on the unchanged base and passes all 12 with commit 7b04350d83781b75266493fb02f0372829e63251. Issue-fork CI passed. Tests cover Bootstrap 5.1.3 and 5.3.8, arrow keys, Home/End/Escape, nested toggles, repeated attach/click/Enter, other adapter menu types, standalone menus, and unrelated native dropdowns.

A fresh Drupal 11.4.8 Minimal/SQLite installation with the separate Bootstrap Cloud fix also passed 98 integration checks across English, Japanese, Simplified Chinese, and Thai, including 320–1440px layouts and emulated touch. Physical-device and screen-reader testing are not claimed. Ready for maintainer review; no merge or closure performed.

nickdjm’s picture

nickdjm
he/him
commented
Status: Needs review » Postponed (maintainer needs more info)

Is this just hacking a feature into Accessible Menu Bootstrap 5's library? Why not request this change in the library itself?

If this is an issue with the base library, we can look at it there.