fix: add focus management to UUITabElement with focus and blur event listeners to avoid problems with shadow dom and detecting the active focus

Author: Jonny Muir

packages/uui-tabs/lib/uui-tab.element.ts

@@ -64,11 +64,24 @@ export class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) {
   @property({ type: String, reflect: true })
   public orientation?: 'horizontal' | 'vertical' = 'horizontal';
 
+  #focus: boolean;
+
   constructor() {
     super();
     this.addEventListener('click', this.onHostClick);
+    this.addEventListener('focus', this.#onFocus);
+    this.addEventListener('blur', this.#onBlur);
+    this.#focus = false;
   }
 
+  #onFocus = () => {
+    this.#focus = true;
+  };
+
+  #onBlur = () => {
+    this.#focus = false;
+  };
+
   private onHostClick(e: MouseEvent) {
     if (this.disabled) {
       e.preventDefault();
@@ -136,7 +149,11 @@ export class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) {
    */
   public hasFocus() {
     const button = this.shadowRoot?.querySelector('#button');
-    return document.activeElement === button || document.activeElement === this;
+    return (
+      this.#focus ||
+      document.activeElement === button ||
+      document.activeElement === this
+    );
   }
 
   render() {