feat(components/tabs): wizard keyboard nav and roles (#558)

Author: Blackbaud-ErikaMcVey

libs/components/modals/src/lib/modules/modal/modal.component.html

@@ -59,7 +59,7 @@
     <div
       class="sky-modal-content sky-padding-even-large"
       role="region"
-      tabindex="0"
+      tabindex="-1"
       [attr.aria-labelledby]="modalHeaderId"
       [attr.id]="modalContentId"
       (skyModalScrollShadow)="scrollShadowChange($event)"

libs/components/tabs/src/lib/modules/tabs/fixtures/tabset.component.fixture.html

@@ -1,5 +1,9 @@
 <div [ngStyle]="{'max-width.px': tabMaxWidth}">
-  <sky-tabset [ariaLabel]="ariaLabel" [ariaLabelledBy]="ariaLabelledBy">
+  <sky-tabset
+    [ariaLabel]="ariaLabel"
+    [ariaLabelledBy]="ariaLabelledBy"
+    tabStyle="tabs"
+  >
     <sky-tab [tabHeading]="tab1Heading" [active]="activeTab === 0">
       <div class="tabset-test-content-1">{{tab1Content}}</div>
     </sky-tab>

libs/components/tabs/src/lib/modules/tabs/tab-button-adapter.service.ts

@@ -0,0 +1,11 @@
+import { ElementRef, Injectable } from '@angular/core';
+
+/**
+ * @internal
+ */
+@Injectable()
+export class SkyTabButtonAdapterService {
+  public focusButtonLink(buttonEl: ElementRef): void {
+    buttonEl.nativeElement.querySelector('a').focus();
+  }
+}

libs/components/tabs/src/lib/modules/tabs/tab-button-view-model.ts

@@ -0,0 +1,16 @@
+import { SkyTabIndex } from './tab-index';
+
+/**
+ * @internal
+ */
+export type TabButtonViewModel = {
+  active: boolean;
+  ariaControls: string;
+  buttonHref: string;
+  buttonId: string;
+  buttonText: string;
+  buttonTextCount: string;
+  closeable: boolean;
+  disabled: boolean;
+  tabIndex: SkyTabIndex;
+};

libs/components/tabs/src/lib/modules/tabs/tab-button.component.html

@@ -6,8 +6,9 @@
   }"
 >
   <a
+    #tabButtonEl
     class="sky-btn-tab"
-    role="tab"
+    [attr.role]="elementRole"
     [attr.aria-controls]="ariaControls"
     [attr.aria-disabled]="disabled"
     [attr.aria-selected]="active"
@@ -19,9 +20,10 @@
       'sky-btn-tab-disabled': disabled,
       'sky-tab-btn-closeable': closeable
     }"
-    [tabindex]="disabled ? '-1' : '0'"
+    [tabindex]="active ? '0' : '-1'"
     (click)="onButtonClick($event)"
     (keydown)="onTabButtonKeyDown($event)"
+    (focus)="onFocus()"
   >
     <span class="sky-tab-heading">
       {{ buttonText }}
@@ -34,6 +36,7 @@
   <button
     *ngIf="closeable"
     class="sky-btn-tab-close"
+    [tabindex]="closeBtnTabIndex"
     type="button"
     [attr.aria-label]="'skyux_tab_close' | skyLibResources: buttonText"
     [disabled]="disabled"

libs/components/tabs/src/lib/modules/tabs/tab-button.component.ts

@@ -1,13 +1,25 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
+  OnDestroy,
   Output,
   ViewEncapsulation,
 } from '@angular/core';
 
+import { Subject } from 'rxjs';
+import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+
+import { SkyTabButtonAdapterService } from './tab-button-adapter.service';
+import { SkyTabIndex } from './tab-index';
 import { SkyTabsetStyle } from './tabset-style';
+import { SkyTabsetService } from './tabset.service';
+
+const DEFAULT_ELEMENT_ROLE = 'tab';
 
 /**
  * @internal
@@ -16,10 +28,11 @@ import { SkyTabsetStyle } from './tabset-style';
   selector: 'sky-tab-button',
   templateUrl: './tab-button.component.html',
   styleUrls: ['./tab-button.component.scss'],
+  providers: [SkyTabButtonAdapterService],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class SkyTabButtonComponent {
+export class SkyTabButtonComponent implements AfterViewInit, OnDestroy {
   @Input()
   public active: boolean;
 
@@ -45,14 +58,65 @@ export class SkyTabButtonComponent {
   public disabled: boolean;
 
   @Input()
-  public tabStyle: SkyTabsetStyle;
+  public tabIndex: SkyTabIndex;
+
+  @Input()
+  public get tabStyle(): SkyTabsetStyle {
+    return this.#_tabStyle;
+  }
+
+  public set tabStyle(style: SkyTabsetStyle | undefined) {
+    this.#_tabStyle = style;
+    this.elementRole = style === 'tabs' ? DEFAULT_ELEMENT_ROLE : undefined;
+  }
 
   @Output()
   public buttonClick = new EventEmitter<void>();
 
   @Output()
   public closeClick = new EventEmitter<void>();
 
+  constructor(
+    elementRef: ElementRef,
+    adapterService: SkyTabButtonAdapterService,
+    changeDetectorRef: ChangeDetectorRef,
+    tabsetService: SkyTabsetService
+  ) {
+    this.#adapterService = adapterService;
+    this.#changeDetectorRef = changeDetectorRef;
+    this.#elementRef = elementRef;
+    this.#tabsetService = tabsetService;
+  }
+
+  public elementRole: string | undefined = DEFAULT_ELEMENT_ROLE;
+  public closeBtnTabIndex = '-1';
+
+  #_tabStyle: SkyTabsetStyle;
+  #adapterService: SkyTabButtonAdapterService;
+  #changeDetectorRef: ChangeDetectorRef;
+  #elementRef: ElementRef;
+  #tabsetService: SkyTabsetService;
+  #ngUnsubscribe = new Subject<void>();
+
+  public ngAfterViewInit(): void {
+    this.#tabsetService.focusedTabBtnIndex
+      .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
+      .subscribe((focusedIndex) => {
+        if (focusedIndex === this.tabIndex) {
+          this.closeBtnTabIndex = '0';
+          this.focusBtn();
+        } else {
+          this.closeBtnTabIndex = '-1';
+        }
+        this.#changeDetectorRef.markForCheck();
+      });
+  }
+
+  public ngOnDestroy(): void {
+    this.#ngUnsubscribe.next();
+    this.#ngUnsubscribe.complete();
+  }
+
   public onButtonClick(event: any): void {
     if (!this.disabled) {
       this.buttonClick.emit();
@@ -83,4 +147,12 @@ export class SkyTabButtonComponent {
     event.stopPropagation();
     event.preventDefault();
   }
+
+  public focusBtn(): void {
+    this.#adapterService.focusButtonLink(this.#elementRef);
+  }
+
+  public onFocus(): void {
+    this.#tabsetService.setFocusedTabBtnIndex(this.tabIndex);
+  }
 }

libs/components/tabs/src/lib/modules/tabs/tabset-nav-button.component.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, async, fakeAsync, tick } from '@angular/core/testing';
+import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { expect, expectAsync } from '@skyux-sdk/testing';
 import { SkyLogService } from '@skyux/core';
 
@@ -64,13 +64,13 @@ describe('Tabset navigation button', () => {
 
   describe('wizard style', () => {
     describe('without finish button', () => {
-      it('should be accessible', async(async () => {
+      it('should be accessible', async () => {
         const fixture = TestBed.createComponent(SkyWizardTestFormComponent);
         fixture.detectChanges();
         await fixture.whenStable();
         fixture.detectChanges();
         await expectAsync(fixture.nativeElement).toBeAccessible();
-      }));
+      });
 
       describe('previous button', () => {
         it('should navigate to the previous tab when clicked', fakeAsync(() => {

libs/components/tabs/src/lib/modules/tabs/tabset.component.html

@@ -1,12 +1,16 @@
 <div
   class="sky-tabset"
-  role="tablist"
+  [attr.role]="elementRole"
   [attr.aria-label]="ariaLabel"
   [attr.aria-labelledby]="ariaLabelledBy"
   [ngClass]="
     'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle
   "
   (window:resize)="onWindowResize()"
+  (keydown.arrowright)="onRightKeyDown()"
+  (keydown.arrowleft)="onLeftKeyDown()"
+  (keydown.home)="onHomeKeyDown()"
+  (keydown.end)="onEndKeyDown()"
 >
   <span class="sky-tabset-dropdown">
     <sky-dropdown *ngIf="tabDisplayMode === 'dropdown'" buttonType="tab">
@@ -88,6 +92,7 @@
     [buttonTextCount]="tabButton.buttonTextCount"
     [closeable]="tabButton.closeable"
     [disabled]="tabButton.disabled"
+    [tabIndex]="tabButton.tabIndex"
     [tabStyle]="tabStyle"
     (buttonClick)="onTabButtonClick(tabButton)"
     (closeClick)="onTabCloseClick(tabButton)"