fix: do not include nested child nodes in tabs items (#10043) (#10122)

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

Author: vaadin-bot

packages/a11y-base/src/list-mixin.js

@@ -6,7 +6,6 @@
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getNormalizedScrollLeft, setNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
-import { getFlattenedElements } from '@vaadin/component-base/src/dom-utils.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { isElementHidden } from './focus-utils.js';
 import { KeyboardDirectionMixin } from './keyboard-direction-mixin.js';
@@ -138,7 +137,7 @@ export const ListMixin = (superClass) =>
 
       const slot = this.shadowRoot.querySelector('slot:not([name])');
       this._observer = new SlotObserver(slot, () => {
-        this._setItems(this._filterItems(getFlattenedElements(this)));
+        this._setItems(this._filterItems([...this.children]));
       });
     }
 

packages/a11y-base/test/list-mixin.test.js

@@ -12,7 +12,6 @@ import {
   keyDownChar,
   nextRender,
   nextUpdate,
-  oneEvent,
 } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
@@ -166,47 +165,6 @@ const runTests = (defineHelper, baseMixin) => {
     });
   });
 
-  describe('wrapped list with slotted items', () => {
-    let wrapper;
-
-    beforeEach(async () => {
-      wrapper = document.createElement('div');
-      document.body.appendChild(wrapper);
-
-      const root = wrapper.attachShadow({ mode: 'open' });
-      root.innerHTML = `
-        <${listTag}>
-          <slot></slot>
-        </${listTag}>
-      `;
-
-      wrapper.innerHTML = `
-        <${itemTag}>Item 0</${itemTag}>
-        <${itemTag}>Item 1</${itemTag}>
-        <${itemTag}>Item 2</${itemTag}>
-      `;
-
-      list = wrapper.shadowRoot.querySelector(listTag);
-      await oneEvent(list, 'items-changed');
-    });
-
-    afterEach(() => {
-      document.body.removeChild(wrapper);
-    });
-
-    it('should set items based on the children count', () => {
-      expect(list.items.length).to.be.equal(3);
-    });
-
-    it('should move focus to the next element on ArrowRight', async () => {
-      list.orientation = 'horizontal';
-      await nextUpdate(list);
-      list.focus();
-      arrowRight(list);
-      expect(list.items[1].focused).to.be.true;
-    });
-  });
-
   describe('selection', () => {
     beforeEach(async () => {
       list = fixtureSync(`

test/integration/tabs-menu-bar.test.js

@@ -0,0 +1,35 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import '@vaadin/menu-bar';
+import '@vaadin/tabs';
+
+describe('tabs with menu-bar', () => {
+  let tabs;
+
+  beforeEach(async () => {
+    tabs = fixtureSync(`
+      <vaadin-tabs>
+        <vaadin-tab>
+          <span>Tab 1</span>
+        </vaadin-tab>
+      </vaadin-tabs>
+    `);
+    await nextRender();
+  });
+
+  it('should not include menu-bar items in tabs items', async () => {
+    const menu = document.createElement('vaadin-menu-bar');
+    const item = document.createElement('vaadin-menu-bar-item');
+    item.textContent = 'Menu item';
+    menu.items = [{ component: item }];
+
+    const tab = document.createElement('vaadin-tab');
+    tab.textContent = 'Tab 2';
+    tab.appendChild(menu);
+    tabs.appendChild(tab);
+    await nextRender();
+
+    expect(tabs.items.length).to.equal(2);
+    expect(tabs.items.includes(item)).to.be.false;
+  });
+});