Fix/1843 [tabs] tab using btn more does not trigger routerlink (#1856)

* trying to improve clicking on a tab when clicking menu item

* Clicking menu item with link, partially working

* tabs improvements, almost working with links

* fixing selecting tab without links from menu

* links with menu button tests

* cleanup

* changeset

* removed unnecessary keydown

Author: anna-lach

.changeset/cruel-years-refuse.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/tabs': patch
+---
+
+Fix triggering tabs from `sl-menu-button` with links (routerLink).

packages/components/tabs/src/tab-group.spec.ts

@@ -328,4 +328,47 @@ describe('sl-tab-group', () => {
       expect(menuButton).to.exist;
     });
   });
+
+  describe('links with menu button', () => {
+    let tab: Tab;
+    let link: HTMLAnchorElement;
+
+    beforeEach(async () => {
+      el = await fixture(html`
+        <sl-tab-group style="width: 50px">
+          <sl-tab href="javascript:void(0)">One</sl-tab>
+          <sl-tab href="javascript:void(0)">Two</sl-tab>
+          <sl-tab disabled href="javascript:void(0)">Disabled</sl-tab>
+          <sl-tab href="javascript:void(0)">Four</sl-tab>
+        </sl-tab-group>
+      `);
+
+      // We need to wait for the RovingTabindexController to do its thing
+      await new Promise(resolve => setTimeout(resolve, 50));
+
+      tab = el.querySelector('sl-tab')!;
+      link = tab.renderRoot.querySelector('a')!;
+    });
+
+    it('should have a menu button', async () => {
+      await el.updateComplete;
+
+      const menuButton = el.renderRoot.querySelector('sl-menu-button');
+
+      expect(menuButton).to.exist;
+    });
+
+    it('should click the tab link when the user clicks the menu item', () => {
+      const onClick = spy();
+
+      link.addEventListener('click', onClick);
+
+      const menuButton = el.renderRoot.querySelector('sl-menu-button'),
+        menuItems = menuButton!.querySelectorAll('sl-menu-item');
+
+      menuItems[0].click();
+
+      expect(onClick).to.have.been.called;
+    });
+  });
 });

packages/components/tabs/src/tab-group.ts

@@ -295,6 +295,7 @@ export class TabGroup extends ScopedElementsMixin(LitElement) {
 
   #onClick(event: Event & { target: HTMLElement }): void {
     const tab = event.target.closest('sl-tab');
+
     if (!tab) {
       return;
     }
@@ -317,6 +318,10 @@ export class TabGroup extends ScopedElementsMixin(LitElement) {
   }
 
   #onMenuItemClick(tab: Tab): void {
+    if (tab.href) {
+      tab.renderRoot.querySelector('a')?.click();
+    }
+
     this.#updateSelectedTab(tab);
   }