fix: ensure menu-bar is focusable after closing and moving focus

Author: web-padawan

packages/a11y-base/src/keyboard-direction-mixin.js

@@ -116,7 +116,7 @@ export const KeyboardDirectionMixin = (superclass) =>
         return;
       }
 
-      if (idx >= 0) {
+      if (idx >= 0 && idx !== currentIdx) {
         event.preventDefault();
         this._focus(idx, { focusVisible: true }, true);
       }

packages/a11y-base/test/keyboard-direction-mixin.test.js

@@ -238,5 +238,17 @@ describe('KeyboardDirectionMixin', () => {
       tabKeyDown(items[5]);
       expect(element.focused).to.not.equal(items[0]);
     });
+
+    it('should not prevent default on Tab keydown with only one item present', () => {
+      element.innerHTML = '<div tabindex="0">Foo</div>';
+      items = element.children;
+      items[0].focus();
+
+      const spy = sinon.spy();
+      element.addEventListener('keydown', spy);
+      tabKeyDown(items[0]);
+
+      expect(spy.firstCall.args[0].defaultPrevented).to.be.false;
+    });
   });
 });

packages/menu-bar/src/vaadin-menu-bar-mixin.js

@@ -761,7 +761,8 @@ export const MenuBarMixin = (superClass) =>
      */
     _setFocused(focused) {
       if (focused) {
-        const target = this.tabNavigation ? this.querySelector('[focused]') : this.querySelector('[tabindex="0"]');
+        const selector = this.tabNavigation ? '[focused]' : '[tabindex="0"]';
+        const target = this.querySelector(`vaadin-menu-bar-button${selector}`);
         if (target) {
           this._buttons.forEach((btn) => {
             this._setTabindex(btn, btn === target);

packages/menu-bar/test/keyboard-navigation.test.js

@@ -454,4 +454,45 @@ describe('keyboard navigation', () => {
       });
     });
   });
+
+  describe('single button', () => {
+    beforeEach(async () => {
+      menu.items = [{ text: 'Item 1', children: [{ text: 'Item 1 1' }] }];
+      await nextUpdate(menu);
+      buttons = menu._buttons;
+      firstGlobalFocusable.focus();
+    });
+
+    it('should be focusable on Shift + Tab after closing and moving focus by default', async () => {
+      await sendKeys({ press: 'Tab' });
+
+      await sendKeys({ press: 'ArrowDown' });
+      await nextRender();
+
+      await sendKeys({ press: 'Escape' });
+
+      await sendKeys({ press: 'Tab' });
+      expect(document.activeElement).to.equal(lastGlobalFocusable);
+
+      await sendKeys({ press: 'Shift+Tab' });
+      expect(document.activeElement).to.equal(buttons[0]);
+    });
+
+    it('should be focusable on Shift + Tab after closing and moving focus with Tab navigation', async () => {
+      menu.tabNavigation = true;
+
+      await sendKeys({ press: 'Tab' });
+
+      await sendKeys({ press: 'ArrowDown' });
+      await nextRender();
+
+      await sendKeys({ press: 'Escape' });
+
+      await sendKeys({ press: 'Tab' });
+      expect(document.activeElement).to.equal(lastGlobalFocusable);
+
+      await sendKeys({ press: 'Shift+Tab' });
+      expect(document.activeElement).to.equal(buttons[0]);
+    });
+  });
 });