From 5450335538d0ed41e8893a13505155854978a76e Mon Sep 17 00:00:00 2001 From: Sandhya Adhirvuh Date: Fri, 28 Feb 2025 11:16:49 -0500 Subject: [PATCH] fix(components/tabs): puts focus on active tab in mobile view (#3182) Co-authored-by: Sandhya Adhirvuh --- .../vertical-tabset.component.html | 1 + .../vertical-tabset.component.spec.ts | 27 +++++++++++++++++++ 2 files changed, 28 insertions(+) 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();