fix(modal): focus modal title when modal opened

The tests need to wait for stable so that `cdkFocusInitial` works properly and doesn't log a warning. This fixes a regression I introduced in 7c811ae.
vmware-clarity · Jan 12, 2023 · 25b2354 · 25b2354
1 parent 78e47f2
commit 25b2354
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/projects/angular/src/modal/modal.html b/projects/angular/src/modal/modal.html
@@ -27,7 +27,7 @@
 
       <div class="modal-content">
         <div class="modal-header--accessible">
-          <div class="modal-title-wrapper" id="{{modalId}}" clrFocusOnViewInit>
+          <div class="modal-title-wrapper" id="{{modalId}}" cdkFocusInitial tabindex="-1">
             <ng-content select=".modal-title"></ng-content>
           </div>
           <button

diff --git a/projects/angular/src/modal/modal.spec.ts b/projects/angular/src/modal/modal.spec.ts
@@ -67,7 +67,7 @@ describe('Modal', () => {
   let modal: ClrModal;
   const commonStrings = new ClrCommonStringsService();
 
-  beforeEach(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
       imports: [CdkTrapFocusModule, ClrModalModule, NoopAnimationsModule],
       declarations: [TestComponent, TestDefaultsComponent],
@@ -77,6 +77,8 @@ describe('Modal', () => {
     fixture.detectChanges();
     compiled = fixture.nativeElement;
     modal = fixture.componentInstance.modalInstance;
+
+    await fixture.whenStable();
   });
 
   function flushAndExpectOpen(componentFixture: ComponentFixture<any>, open: boolean): void {

diff --git a/projects/angular/src/wizard/wizard.spec.ts b/projects/angular/src/wizard/wizard.spec.ts
@@ -23,11 +23,13 @@ export default function (): void {
         let wizard: ClrWizard;
         let component: UnopenedWizardTestComponent;
 
-        beforeEach(function () {
+        beforeEach(async function () {
           context = this.create(ClrWizard, UnopenedWizardTestComponent);
           wizard = context.clarityDirective;
           component = context.hostComponent;
           context.detectChanges();
+
+          await context.fixture.whenStable();
         });
 
         describe('open', () => {
@@ -105,12 +107,14 @@ export default function (): void {
         let pageCollectionService: PageCollectionService;
         let wizard: ClrWizard;
 
-        beforeEach(function () {
+        beforeEach(async function () {
           context = this.create(ClrWizard, BasicWizardTestComponent);
           wizardNavigationService = context.getClarityProvider(WizardNavigationService);
           pageCollectionService = context.getClarityProvider(PageCollectionService);
           wizard = context.clarityDirective;
           context.detectChanges();
+
+          await context.fixture.whenStable();
         });
 
         describe('currentPage', () => {
@@ -234,10 +238,12 @@ export default function (): void {
       let context: TestContext<ClrWizard, TemplateApiWizardTestComponent>;
       let wizard: ClrWizard;
 
-      beforeEach(function () {
+      beforeEach(async function () {
         context = this.create(ClrWizard, TemplateApiWizardTestComponent);
         wizard = context.clarityDirective;
         context.detectChanges();
+
+        await context.fixture.whenStable();
       });
 
       describe('Current page onchange', () => {
@@ -616,10 +622,12 @@ export default function (): void {
       let context: TestContext<ClrWizard, DynamicWizardTestComponent>;
       let wizard: ClrWizard;
 
-      beforeEach(function () {
+      beforeEach(async function () {
         context = this.create(ClrWizard, DynamicWizardTestComponent);
         wizard = context.clarityDirective;
         context.detectChanges();
+
+        await context.fixture.whenStable();
       });
 
       it('pages can be added via an ngFor', () => {
@@ -726,10 +734,12 @@ export default function (): void {
       let context: TestContext<ClrWizard, TemplateApiWizardTestComponent>;
       let wizard: ClrWizard;
 
-      beforeEach(function () {
+      beforeEach(async function () {
         context = this.create(ClrWizard, TemplateApiWizardTestComponent);
         wizard = context.clarityDirective;
         context.detectChanges();
+
+        await context.fixture.whenStable();
       });
 
       describe('Page title focus', () => {
@@ -746,10 +756,12 @@ export default function (): void {
       let context: TestContext<ClrWizard, TemplateApiWizardTestComponent>;
       let wizard: ClrWizard;
 
-      beforeEach(function () {
+      beforeEach(async function () {
         context = this.create(ClrWizard, TemplateApiWizardTestComponent);
         wizard = context.clarityDirective;
         context.detectChanges();
+
+        await context.fixture.whenStable();
       });
 
       describe('aria-labelledby', () => {