fix: ensure overflow button always has correct tabindex

Author: web-padawan

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

@@ -268,6 +268,7 @@ export const MenuBarMixin = (superClass) =>
     set _hasOverflow(hasOverflow) {
       if (this._overflow) {
         this._overflow.toggleAttribute('hidden', !hasOverflow);
+        this._overflow.setAttribute('tabindex', hasOverflow ? '0' : '-1');
       }
     }
 
@@ -761,8 +762,7 @@ export const MenuBarMixin = (superClass) =>
      */
     _setFocused(focused) {
       if (focused) {
-        const selector = this.tabNavigation ? '[focused]' : '[tabindex="0"]';
-        const target = this.querySelector(`vaadin-menu-bar-button${selector}`);
+        const target = this._buttons.find((btn) => isElementFocused(btn));
         if (target) {
           this._buttons.forEach((btn) => {
             this._setTabindex(btn, btn === target);

packages/menu-bar/test/dom/__snapshots__/menu-bar.test.snap.js

@@ -56,7 +56,7 @@ snapshots["menu-bar basic"] =
     hidden=""
     role="menuitem"
     slot="overflow"
-    tabindex="0"
+    tabindex="-1"
   >
     <div aria-hidden="true">
       ···
@@ -156,7 +156,7 @@ snapshots["menu-bar opened"] =
     hidden=""
     role="menuitem"
     slot="overflow"
-    tabindex="0"
+    tabindex="-1"
   >
     <div aria-hidden="true">
       ···

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

@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { sendKeys } from '@vaadin/test-runner-commands';
-import { fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { fixtureSync, nextRender, nextResize, nextUpdate } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-menu-bar.js';
 
@@ -138,6 +138,62 @@ describe('keyboard navigation', () => {
           expect(buttons[3].hasAttribute('focused')).to.be.true;
         });
       });
+
+      describe('overflow', () => {
+        beforeEach(async () => {
+          menu.items = [{ text: 'Item Foo' }, { text: 'Item Bar' }];
+          await nextRender();
+          buttons = menu._buttons;
+        });
+
+        it('should move focus back to the overflow button on Shift + Tab after Tab', async () => {
+          // Hide all buttons except overflow
+          menu.style.maxWidth = '100px';
+          await nextResize(menu);
+
+          firstGlobalFocusable.focus();
+          await sendKeys({ press: 'Tab' });
+          expect(document.activeElement).to.equal(menu._overflow);
+
+          await sendKeys({ press: 'Tab' });
+          expect(document.activeElement).to.equal(lastGlobalFocusable);
+
+          await sendKeys({ press: 'Shift+Tab' });
+          expect(document.activeElement).to.equal(menu._overflow);
+        });
+
+        it('should move focus back to the overflow button on Tab after Shift + Tab', async () => {
+          // Show 1 button + overflow
+          menu.style.maxWidth = '120px';
+          await nextResize(menu);
+
+          lastGlobalFocusable.focus();
+          await sendKeys({ press: 'Shift+Tab' });
+          expect(document.activeElement).to.equal(menu._overflow);
+
+          await sendKeys({ press: 'Shift+Tab' });
+          expect(document.activeElement).to.equal(firstGlobalFocusable);
+
+          await sendKeys({ press: 'Tab' });
+          expect(document.activeElement).to.equal(menu._overflow);
+        });
+
+        it('should move focus back to the overflow button on Tab after button is hidden', async () => {
+          lastGlobalFocusable.focus();
+          await sendKeys({ press: 'Shift+Tab' });
+          expect(document.activeElement).to.equal(buttons[1]);
+
+          await sendKeys({ press: 'Shift+Tab' });
+          expect(document.activeElement).to.equal(firstGlobalFocusable);
+
+          // Hide all buttons except overflow
+          menu.style.maxWidth = '100px';
+          await nextResize(menu);
+
+          await sendKeys({ press: 'Tab' });
+          expect(document.activeElement).to.equal(menu._overflow);
+        });
+      });
     });
 
     describe('tab navigation mode', () => {