fix(components/tabs): puts focus on active tab in mobile view

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()"

libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.spec.ts

@@ -428,6 +428,33 @@ 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 and wait for timer to finish
+    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();
+  }));
+
   it('should focus the first tab when the tabs container is focused and no tab is active', () => {
     mediaQueryController.setBreakpoint('lg');
     const fixture = createTestComponent();