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 b140584e2c..fd5d95152e 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 @@ -30,8 +30,8 @@ [ngClass]="{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }" (keydown.arrowdown)="tabGroupsArrowDown(); $event.preventDefault()" (keydown.arrowup)="tabGroupsArrowUp(); $event.preventDefault()" - (focusin)="tabGroupsFocusIn()" - (focusout)="tabGroupsFocusOut()" + (focusin)="trapFocusInTablist()" + (focusout)="resetTabIndex()" > @@ -44,6 +44,7 @@ 'sky-vertical-tabset-content-hidden': !tabService.contentVisible() }" [@contentEnter]="tabService.animationContentVisibleState" + (focusin)="resetTabIndex()" >
@if (!tabService.tabsVisible()) { 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 5f64b89eb2..7fea6de67b 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 @@ -446,6 +446,44 @@ describe('Vertical tabset component', () => { expect(elementHasFocus(tabButtons[0])).toBeTrue(); }); + it('should reset tab index when leaving tab list view in mobile view', () => { + mediaQueryController.setBreakpoint('xs'); + const fixture = createTestComponent(); + const el = fixture.nativeElement; + const tabset = getTabset(fixture); + fixture.detectChanges(); + + expect(tabset.tabIndex).toBe(0); + + // click show tabs button + const showTabsButton = el.querySelector( + '.sky-vertical-tabset-show-tabs-btn', + ); + showTabsButton.click(); + fixture.detectChanges(); + + // focus into tablist + const tabsContainer = getTabsContainer(fixture); + SkyAppTestUtility.fireDomEvent(tabsContainer, 'focusin'); + fixture.detectChanges(); + + expect(tabset.tabIndex).toBe(-1); + + // click the second tab + const allTabs = el.querySelectorAll('.sky-vertical-tab'); + allTabs[1].click(); + fixture.detectChanges(); + + // focus the tabset content container + const verticalTabsetContent = el.querySelector( + '.sky-vertical-tabset-content', + ); + SkyAppTestUtility.fireDomEvent(verticalTabsetContent, 'focusin'); + fixture.detectChanges(); + + expect(tabset.tabIndex).toBe(0); + }); + it('should set a tab active=false when set to undefined', () => { const fixture = createTestComponent(); 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 2573ca3549..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 @@ -194,7 +194,7 @@ export class SkyVerticalTabsetComponent this.tabService.focusActiveTab(this.tabGroups); } - protected tabGroupsFocusIn(): void { + protected trapFocusInTablist(): void { // This will set the tab index of the the vertical tabset element to -1 // while focus is inside the tab list, allowing Shift+Tab to move // to the next element above the tab list element. Otherwise focus would @@ -202,7 +202,7 @@ export class SkyVerticalTabsetComponent this.tablistHasFocus = true; } - protected tabGroupsFocusOut(): void { + protected resetTabIndex(): void { this.tablistHasFocus = false; }