diff --git a/projects/angular/src/wizard/providers/wizard-navigation.service.spec.ts b/projects/angular/src/wizard/providers/wizard-navigation.service.spec.ts index f2c5084ba7..095ae5cf70 100644 --- a/projects/angular/src/wizard/providers/wizard-navigation.service.spec.ts +++ b/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); diff --git a/projects/angular/src/wizard/providers/wizard-navigation.service.ts b/projects/angular/src/wizard/providers/wizard-navigation.service.ts index e7627fbab3..17006b68b1 100644 --- a/projects/angular/src/wizard/providers/wizard-navigation.service.ts +++ b/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'; diff --git a/projects/angular/src/wizard/wizard.spec.ts b/projects/angular/src/wizard/wizard.spec.ts index 5bf624ce28..96c4d7d2b2 100644 --- a/projects/angular/src/wizard/wizard.spec.ts +++ b/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; + 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()); + }); + }); + }); }); } diff --git a/projects/angular/src/wizard/wizard.ts b/projects/angular/src/wizard/wizard.ts index 994339d761..50237ce271 100644 --- a/projects/angular/src/wizard/wizard.ts +++ b/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 {