fix(components/tabs): vertical tabs keyboard operable in mobile view (#…

…3150) (#3151)
blackbaud · Feb 14, 2025 · ec7abbb · ec7abbb
1 parent 184c9f6
commit ec7abbb
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
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
@@ -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()"
     >
       <ng-content />
     </div>
@@ -44,6 +44,7 @@
         'sky-vertical-tabset-content-hidden': !tabService.contentVisible()
       }"
       [@contentEnter]="tabService.animationContentVisibleState"
+      (focusin)="resetTabIndex()"
     >
       <div #skySideContent></div>
       @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
@@ -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
@@ -195,15 +195,15 @@ 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
     // be trapped on the currently focused tab.
     this.tablistHasFocus = true;
   }
 
-  protected tabGroupsFocusOut(): void {
+  protected resetTabIndex(): void {
     this.tablistHasFocus = false;
   }