Skip disabled submenu triggers in keyboard navigation

Apply the same :not(.disabled):not(:disabled) filter used for direct
menu items when collecting submenu triggers, so arrow keys do not land
on disabled nested menu entries.

Author: aljojoby9

js/src/menu.js

@@ -787,8 +787,9 @@ class Menu extends BaseComponent {
   _getItemsInMenu(menu) {
     // Items may be direct children of `.menu`, or submenu triggers nested as
     // `.menu > .submenu > .menu-item` (see menu-submenu visual tests / docs).
+    // Always use SELECTOR_VISIBLE_ITEMS so disabled triggers are skipped too.
     return SelectorEngine.find(
-      `:scope > ${SELECTOR_VISIBLE_ITEMS}, :scope > ${SELECTOR_SUBMENU_TOGGLE}`,
+      `:scope > ${SELECTOR_VISIBLE_ITEMS}, :scope > ${SELECTOR_SUBMENU} > ${SELECTOR_VISIBLE_ITEMS}`,
       menu
     ).filter(element => isVisible(element))
   }

js/tests/unit/menu.spec.js

@@ -2862,6 +2862,51 @@ describe('Menu', () => {
       })
     })
 
+    it('should skip disabled submenu triggers during keyboard navigation', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<div>',
+          '  <button class="btn" data-bs-toggle="menu">Menu</button>',
+          '  <div class="menu">',
+          '    <div class="submenu" id="submenu1">',
+          '      <button class="menu-item" type="button">Submenu 1</button>',
+          '      <div class="menu"><a class="menu-item" href="#">Action 1</a></div>',
+          '    </div>',
+          '    <div class="submenu" id="submenuDisabled">',
+          '      <button class="menu-item" type="button" disabled>Disabled submenu</button>',
+          '      <div class="menu"><a class="menu-item" href="#">Hidden</a></div>',
+          '    </div>',
+          '    <div class="submenu" id="submenu2">',
+          '      <button class="menu-item" type="button">Submenu 2</button>',
+          '      <div class="menu"><a class="menu-item" href="#">Action 2</a></div>',
+          '    </div>',
+          '  </div>',
+          '</div>'
+        ].join('')
+
+        const btnMenu = fixtureEl.querySelector('[data-bs-toggle="menu"]')
+        const submenu1Trigger = fixtureEl.querySelector('#submenu1 > .menu-item')
+        const submenu2Trigger = fixtureEl.querySelector('#submenu2 > .menu-item')
+        const disabledTrigger = fixtureEl.querySelector('#submenuDisabled > .menu-item')
+
+        btnMenu.addEventListener('shown.bs.menu', () => {
+          submenu1Trigger.focus()
+
+          const keydown = createEvent('keydown', { bubbles: true })
+          keydown.key = 'ArrowDown'
+          submenu1Trigger.dispatchEvent(keydown)
+
+          expect(document.activeElement).toEqual(submenu2Trigger)
+          expect(document.activeElement).not.toEqual(disabledTrigger)
+          resolve()
+        })
+
+        // eslint-disable-next-line no-new
+        new Menu(btnMenu)
+        btnMenu.click()
+      })
+    })
+
     it('should open submenu with ArrowRight key', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [