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;
}