diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts index af768f9fe..d6925c131 100644 --- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts +++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts @@ -13,7 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { + ComponentFixture, + fakeAsync, + TestBed, + tick, +} from '@angular/core/testing'; import { ConsentDialogComponent } from './consent-dialog.component'; import { @@ -25,13 +30,20 @@ import { MatButtonModule } from '@angular/material/button'; import { of } from 'rxjs'; import { NEW_VERSION, VERSION } from '../../../mocks/version.mock'; import { MatIconTestingModule } from '@angular/material/icon/testing'; +import { FocusManagerService } from '../../../services/focus-manager.service'; +import SpyObj = jasmine.SpyObj; describe('ConsentDialogComponent', () => { let component: ConsentDialogComponent; let fixture: ComponentFixture; let compiled: HTMLElement; + let mockFocusManagerService: SpyObj; beforeEach(() => { + mockFocusManagerService = jasmine.createSpyObj('mockFocusManagerService', [ + 'focusFirstElementInContainer', + ]); + TestBed.configureTestingModule({ imports: [ ConsentDialogComponent, @@ -48,6 +60,7 @@ describe('ConsentDialogComponent', () => { }, }, { provide: MAT_DIALOG_DATA, useValue: {} }, + { provide: FocusManagerService, useValue: mockFocusManagerService }, ], }); fixture = TestBed.createComponent(ConsentDialogComponent); @@ -103,6 +116,15 @@ describe('ConsentDialogComponent', () => { expect(closeSpy).toHaveBeenCalledTimes(0); }); + it('should set focus to first focusable elem when close dialog', fakeAsync(() => { + component.confirm(true); + tick(100); + + expect( + mockFocusManagerService.focusFirstElementInContainer + ).toHaveBeenCalled(); + })); + describe('with new version available', () => { beforeEach(() => { component.data = { version: NEW_VERSION }; diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts index e84659748..3becacf89 100644 --- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts +++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts @@ -26,6 +26,8 @@ import { CalloutType } from '../../../model/callout-type'; import { NgIf } from '@angular/common'; import { MatCheckbox } from '@angular/material/checkbox'; import { FormsModule } from '@angular/forms'; +import { FocusManagerService } from '../../../services/focus-manager.service'; +import { timer } from 'rxjs'; type DialogData = { version: Version; @@ -49,6 +51,7 @@ export class ConsentDialogComponent { public readonly CalloutType = CalloutType; optOut = false; constructor( + private readonly focusManagerService: FocusManagerService, public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: DialogData ) {} @@ -59,5 +62,8 @@ export class ConsentDialogComponent { grant: !optOut, }; this.dialogRef.close(dialogResult); + timer(100).subscribe(() => { + this.focusManagerService.focusFirstElementInContainer(); + }); } }