fix(wizard): move wizard focus after page change

Signed-off-by: Matt Hippely <[email protected]>

projects/angular/src/wizard/providers/wizard-navigation.service.spec.ts

@@ -10,6 +10,7 @@ import { ClrWizard } from '../wizard';
 
 import { PageCollectionService } from './page-collection.service';
 import { WizardNavigationService } from './wizard-navigation.service';
+import { ClrWizardPage } from '../wizard-page';
 
 export default function (): void {
   describe('Wizard Navigation Service', function () {
@@ -320,6 +321,18 @@ export default function (): void {
       expect(fourthPage.completed).toBe(false, 'validate fourthPage.completed is still false as expected');
     });
 
+    it('.goTo() should emit the current page for navItemChanged subject', function () {
+      // const startPage = wizardNavigationService.pageCollection.getPageByIndex(0);
+      const secondPage = wizardNavigationService.pageCollection.getPageByIndex(1);
+      let pageTest: ClrWizardPage;
+      wizardNavigationService.currentPageChanged.subscribe(page => (pageTest = page));
+
+      expect(pageTest).toBeUndefined();
+      wizardNavigationService.goTo(secondPage, true);
+      context.detectChanges();
+      expect(pageTest).toBe(secondPage);
+    });
+
     it('.setFirstPageCurrent() should set the first page as the current page', function () {
       const testPage = wizardNavigationService.pageCollection.getPageByIndex(2);
       const firstPage = wizardNavigationService.pageCollection.getPageByIndex(0);

projects/angular/src/wizard/providers/wizard-navigation.service.ts

@@ -5,8 +5,7 @@
  */
 
 import { Injectable, OnDestroy, TemplateRef } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Subject } from 'rxjs';
+import { Subject, Observable } from 'rxjs';
 import { Subscription } from 'rxjs';
 
 import { ClrWizardPage } from '../wizard-page';

projects/angular/src/wizard/wizard.spec.ts

@@ -722,5 +722,24 @@ export default function (): void {
         expect(wizard.pageCollection.pagesCount).toBe(0);
       });
     });
+
+    describe('View and Behavior', () => {
+      let context: TestContext<ClrWizard, TemplateApiWizardTestComponent>;
+      let wizard: ClrWizard;
+
+      beforeEach(function () {
+        context = this.create(ClrWizard, TemplateApiWizardTestComponent);
+        wizard = context.clarityDirective;
+        context.detectChanges();
+      });
+      describe('Page title focus', () => {
+        it('should be placed on the page title after page change', () => {
+          wizard.pageCollection.lastPage.makeCurrent();
+          context.detectChanges();
+          const titleString = context.hostElement.querySelector('.modal-title').textContent.trim();
+          expect(titleString).toEqual(document.activeElement.textContent.trim());
+        });
+      });
+    });
   });
 }

projects/angular/src/wizard/wizard.ts

@@ -434,7 +434,6 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
     if (!pageId) {
       return;
     }
-
     this.navService.goTo(pageId);
   }
 
@@ -471,7 +470,13 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
   }
 
   private listenForPageChanges(): Subscription {
-    return this.navService.currentPageChanged.subscribe(() => this.currentPageChanged.emit());
+    return this.navService.currentPageChanged.subscribe(() => {
+      // Added to address VPAT-749:
+      //   When clicking on a wizard tab, focus should move to that
+      //   tabs content to make the wizard more accessible.
+      this.wizardTitle?.nativeElement.focus();
+      this.currentPageChanged.emit();
+    });
   }
 
   private updateNavOnPageChanges(): void {