From fadf223632dcd2b191a14f0522db03aee69b8320 Mon Sep 17 00:00:00 2001
From: Sandhya Adhirvuh <sandhya.rajasabeson@blackbaud.me>
Date: Mon, 24 Feb 2025 15:36:43 -0500
Subject: [PATCH 1/4]  working

---
 .../vertical-tabset/vertical-tabset.component.html       | 2 +-
 .../modules/vertical-tabset/vertical-tabset.component.ts | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
index fd5d95152e..0d98ec84b5 100644
--- a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
+++ b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
@@ -51,7 +51,7 @@
         <button
           class="sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn"
           type="button"
-          (click)="tabService.showTabs()"
+          (click)="showTabs()"
         >
           <sky-icon icon="chevron-left" />
           {{ showTabsText }}
diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts
index b232ec1967..945bab29a7 100644
--- a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts
+++ b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts
@@ -213,4 +213,13 @@ export class SkyVerticalTabsetComponent
   protected tabGroupsArrowUp(): void {
     this.adapterService.focusPreviousButton(this.tabGroups);
   }
+
+  protected showTabs(): void {
+    this.tabService.showTabs();
+
+    // Wait for tabs to finish opening.
+    setTimeout(() => {
+      this.tabService.focusActiveTab(this.tabGroups);
+    });
+  }
 }

From 827491d42c93048413e838ec385ed52b6c21960c Mon Sep 17 00:00:00 2001
From: Sandhya Adhirvuh <sandhya.rajasabeson@blackbaud.me>
Date: Mon, 24 Feb 2025 17:01:37 -0500
Subject: [PATCH 2/4] unit test

---
 .../vertical-tabset.component.spec.ts         | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts
index 7fea6de67b..364c9e4eea 100644
--- a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts
+++ b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts
@@ -428,6 +428,34 @@ describe('Vertical tabset component', () => {
     flush();
   }));
 
+  it('should focus the active tab when the tab container is opened on mobile view', fakeAsync(() => {
+    mediaQueryController.setBreakpoint('xs');
+    const fixture = createTestComponent();
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement;
+
+    // click show tabs button to open tab group
+    let showTabsButton = el.querySelector('.sky-vertical-tabset-show-tabs-btn');
+    showTabsButton.click();
+    fixture.detectChanges();
+
+    // click second tab in second group
+    clickGroupButton(fixture, 1);
+    clickTab(fixture, 1, 1);
+
+    // open tab group
+    showTabsButton = el.querySelector('.sky-vertical-tabset-show-tabs-btn');
+    showTabsButton.click();
+    fixture.detectChanges();
+
+    const tabsContainer = getTabsContainer(fixture);
+
+    SkyAppTestUtility.fireDomEvent(tabsContainer, 'focus');
+    expect(elementHasFocus(getTab(fixture, 1, 1))).toBeTrue();
+    flush();
+  }));
+
   it('should focus the first tab when the tabs container is focused and no tab is active', () => {
     mediaQueryController.setBreakpoint('lg');
     const fixture = createTestComponent();

From dad933f5b77565355d722a1478aa01af7c25e181 Mon Sep 17 00:00:00 2001
From: Sandhya Adhirvuh <sandhya.rajasabeson@blackbaud.me>
Date: Thu, 27 Feb 2025 12:55:06 -0500
Subject: [PATCH 3/4] unit test remove flush and focus

---
 .../vertical-tabset/vertical-tabset.component.spec.ts      | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts
index 364c9e4eea..beaaf7dc2f 100644
--- a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts
+++ b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts
@@ -444,16 +444,13 @@ describe('Vertical tabset component', () => {
     clickGroupButton(fixture, 1);
     clickTab(fixture, 1, 1);
 
-    // open tab group
+    // open tab group and wait for timer to finish
     showTabsButton = el.querySelector('.sky-vertical-tabset-show-tabs-btn');
     showTabsButton.click();
     fixture.detectChanges();
+    tick();
 
-    const tabsContainer = getTabsContainer(fixture);
-
-    SkyAppTestUtility.fireDomEvent(tabsContainer, 'focus');
     expect(elementHasFocus(getTab(fixture, 1, 1))).toBeTrue();
-    flush();
   }));
 
   it('should focus the first tab when the tabs container is focused and no tab is active', () => {

From d7bec2f779fb2b0dc1c528c7487f4c67eaad2586 Mon Sep 17 00:00:00 2001
From: Sandhya Adhirvuh <sandhya.rajasabeson@blackbaud.me>
Date: Thu, 27 Feb 2025 14:01:55 -0500
Subject: [PATCH 4/4] add comment

---
 .../vertical-tabset/vertical-tabset.component.html       | 3 ++-
 .../vertical-tabset/vertical-tabset.component.spec.ts    | 2 ++
 .../modules/vertical-tabset/vertical-tabset.component.ts | 9 ---------
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
index 0d98ec84b5..5c003cf8cc 100644
--- a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
+++ b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
@@ -28,6 +28,7 @@
       class="sky-vertical-tabset-group-container"
       [@tabGroupEnter]="tabService.animationTabsVisibleState"
       [ngClass]="{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }"
+      (@tabGroupEnter.done)="tabsetFocus()"
       (keydown.arrowdown)="tabGroupsArrowDown(); $event.preventDefault()"
       (keydown.arrowup)="tabGroupsArrowUp(); $event.preventDefault()"
       (focusin)="trapFocusInTablist()"
@@ -51,7 +52,7 @@
         <button
           class="sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn"
           type="button"
-          (click)="showTabs()"
+          (click)="tabService.showTabs()"
         >
           <sky-icon icon="chevron-left" />
           {{ showTabsText }}
diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts
index beaaf7dc2f..bf55283732 100644
--- a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts
+++ b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts
@@ -448,6 +448,8 @@ describe('Vertical tabset component', () => {
     showTabsButton = el.querySelector('.sky-vertical-tabset-show-tabs-btn');
     showTabsButton.click();
     fixture.detectChanges();
+
+    //wait for animation to finish
     tick();
 
     expect(elementHasFocus(getTab(fixture, 1, 1))).toBeTrue();
diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts
index 945bab29a7..b232ec1967 100644
--- a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts
+++ b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts
@@ -213,13 +213,4 @@ export class SkyVerticalTabsetComponent
   protected tabGroupsArrowUp(): void {
     this.adapterService.focusPreviousButton(this.tabGroups);
   }
-
-  protected showTabs(): void {
-    this.tabService.showTabs();
-
-    // Wait for tabs to finish opening.
-    setTimeout(() => {
-      this.tabService.focusActiveTab(this.tabGroups);
-    });
-  }
 }