fix: ensure menu-bar is focusable after closing and moving focus (#10273) (#10276)

Co-authored-by: Serhii Kulykov <[email protected]>

Author: vaadin-bot

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

@@ -104,11 +104,12 @@ export const KeyboardDirectionMixin = (superclass) =>
       if (
         this._tabNavigation &&
         key === 'Tab' &&
-        ((idx > currentIdx && event.shiftKey) || (idx < currentIdx && !event.shiftKey))
+        ((idx > currentIdx && event.shiftKey) || (idx < currentIdx && !event.shiftKey) || idx === currentIdx)
       ) {
         // Prevent "roving tabindex" logic and let the normal Tab behavior if
         // - currently on the first focusable item and Shift + Tab is pressed,
-        // - currently on the last focusable item and Tab is pressed.
+        // - currently on the last focusable item and Tab is pressed,
+        // - currently on the only focusable item and Tab is pressed
         return;
       }
 

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

@@ -245,6 +245,18 @@ const runTests = (defineHelper, baseMixin) => {
       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

@@ -780,7 +780,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

@@ -455,4 +455,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]);
+    });
+  });
 });