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..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()" 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..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 @@ -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();