refactor: inline mixin logic into vaadin-tab (#9437)

Author: web-padawan

packages/tabs/src/vaadin-tab-mixin.d.ts

@@ -8,9 +8,9 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { tabStyles } from './styles/vaadin-tab-styles.js';
-import { TabMixin } from './vaadin-tab-mixin.js';
 
 /**
  * `<vaadin-tab>` is a Web Component providing an accessible and customizable tab.
@@ -37,10 +37,10 @@ import { TabMixin } from './vaadin-tab-mixin.js';
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes ItemMixin
  * @mixes ThemableMixin
- * @mixes TabMixin
  */
-class Tab extends TabMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class Tab extends ItemMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-tab';
   }
@@ -61,9 +61,31 @@ class Tab extends TabMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))
   ready() {
     super.ready();
 
+    this.setAttribute('role', 'tab');
+
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
   }
+
+  /**
+   * Override an event listener from `KeyboardMixin`
+   * to handle clicking anchors inside the tabs.
+   * @param {!KeyboardEvent} event
+   * @protected
+   * @override
+   */
+  _onKeyUp(event) {
+    const willClick = this.hasAttribute('active');
+
+    super._onKeyUp(event);
+
+    if (willClick) {
+      const anchor = this.querySelector('a');
+      if (anchor) {
+        anchor.click();
+      }
+    }
+  }
 }
 
 defineCustomElement(Tab);