From 596a37ae71d8d55e5e43c4f4287784a1fc2536db Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Tue, 25 Mar 2025 13:37:30 +0000
Subject: [PATCH] Focus Version button on Welcome modal close

---
 .../consent-dialog.component.spec.ts          | 21 +++++++++----------
 .../consent-dialog.component.ts               |  9 +++++---
 2 files changed, 16 insertions(+), 14 deletions(-)

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 d6925c131..e1d4ec4cf 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
@@ -30,20 +30,13 @@ 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<ConsentDialogComponent>;
   let compiled: HTMLElement;
-  let mockFocusManagerService: SpyObj<FocusManagerService>;
 
   beforeEach(() => {
-    mockFocusManagerService = jasmine.createSpyObj('mockFocusManagerService', [
-      'focusFirstElementInContainer',
-    ]);
-
     TestBed.configureTestingModule({
       imports: [
         ConsentDialogComponent,
@@ -60,7 +53,6 @@ describe('ConsentDialogComponent', () => {
           },
         },
         { provide: MAT_DIALOG_DATA, useValue: {} },
-        { provide: FocusManagerService, useValue: mockFocusManagerService },
       ],
     });
     fixture = TestBed.createComponent(ConsentDialogComponent);
@@ -117,12 +109,19 @@ describe('ConsentDialogComponent', () => {
   });
 
   it('should set focus to first focusable elem when close dialog', fakeAsync(() => {
+    const button = document.createElement('BUTTON');
+    button.classList.add('version-content');
+    document.querySelector('body')?.appendChild(button);
+
+    const versionButton = window.document.querySelector(
+      '.version-content'
+    ) as HTMLButtonElement;
+    const buttonFocusSpy = spyOn(versionButton, 'focus');
+
     component.confirm(true);
     tick(100);
 
-    expect(
-      mockFocusManagerService.focusFirstElementInContainer
-    ).toHaveBeenCalled();
+    expect(buttonFocusSpy).toHaveBeenCalled();
   }));
 
   describe('with new version available', () => {
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 51c2b8ce3..bba25c218 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,7 +26,6 @@ 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 = {
@@ -48,7 +47,6 @@ type DialogData = {
   styleUrl: './consent-dialog.component.scss',
 })
 export class ConsentDialogComponent {
-  private readonly focusManagerService = inject(FocusManagerService);
   dialogRef = inject<MatDialogRef<ConsentDialogComponent>>(MatDialogRef);
   data = inject<DialogData>(MAT_DIALOG_DATA);
 
@@ -62,7 +60,12 @@ export class ConsentDialogComponent {
     };
     this.dialogRef.close(dialogResult);
     timer(100).subscribe(() => {
-      this.focusManagerService.focusFirstElementInContainer();
+      const versionButton = window.document.querySelector(
+        '.version-content'
+      ) as HTMLButtonElement;
+      if (versionButton) {
+        versionButton.focus();
+      }
     });
   }
 }