From ed2f02fa5cb4b13cf9fabd0df059bd0429344ffe Mon Sep 17 00:00:00 2001
From: kurilova <sonnycactus@gmail.com>
Date: Mon, 3 Jun 2024 11:14:08 +0000
Subject: [PATCH] Adds announce when settings or certificate panel is opened

---
 modules/ui/src/app/app.component.spec.ts | 36 +++++++++++++++++++++++-
 modules/ui/src/app/app.component.ts      |  6 +++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts
index df773ccff..11d534842 100644
--- a/modules/ui/src/app/app.component.spec.ts
+++ b/modules/ui/src/app/app.component.spec.ts
@@ -65,6 +65,7 @@ import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { CertificatesComponent } from './pages/certificates/certificates.component';
 import { of } from 'rxjs';
 import { WINDOW } from './providers/window.provider';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 const windowMock = {
   location: {
@@ -81,6 +82,7 @@ describe('AppComponent', () => {
   let store: MockStore<AppState>;
   let focusNavigation = true;
   let mockFocusManagerService: SpyObj<FocusManagerService>;
+  let mockLiveAnnouncer: SpyObj<LiveAnnouncer>;
 
   const enterKeyEvent = new KeyboardEvent('keydown', {
     key: 'Enter',
@@ -111,6 +113,7 @@ describe('AppComponent', () => {
     mockFocusManagerService = jasmine.createSpyObj('mockFocusManagerService', [
       'focusFirstElementInContainer',
     ]);
+    mockLiveAnnouncer = jasmine.createSpyObj('mockLiveAnnouncer', ['announce']);
 
     TestBed.configureTestingModule({
       imports: [
@@ -129,6 +132,7 @@ describe('AppComponent', () => {
       ],
       providers: [
         { provide: TestRunService, useValue: mockService },
+        { provide: LiveAnnouncer, useValue: mockLiveAnnouncer },
         {
           provide: State,
           useValue: {
@@ -327,6 +331,21 @@ describe('AppComponent', () => {
     expect(component.settingsDrawer.open).toHaveBeenCalledTimes(1);
   }));
 
+  it('should announce settingsDrawer open on openSetting', fakeAsync(() => {
+    fixture.detectChanges();
+
+    spyOn(component.settingsDrawer, 'open').and.returnValue(
+      Promise.resolve('open')
+    );
+
+    component.openSetting();
+    tick();
+
+    expect(mockLiveAnnouncer.announce).toHaveBeenCalledWith(
+      'The settings panel is opened'
+    );
+  }));
+
   it('should call settingsDrawer open on click settings button', () => {
     fixture.detectChanges();
 
@@ -672,7 +691,7 @@ describe('AppComponent', () => {
     expect(generalSettingsButton).toBeDefined();
   });
 
-  it('should call settingsDrawer open on click settings button', () => {
+  it('should call certificates open on click certificates button', () => {
     fixture.detectChanges();
 
     const settingsBtn = compiled.querySelector(
@@ -684,6 +703,21 @@ describe('AppComponent', () => {
 
     expect(component.certDrawer.open).toHaveBeenCalledTimes(1);
   });
+
+  it('should announce certificatesDrawer open on openCert', fakeAsync(() => {
+    fixture.detectChanges();
+
+    spyOn(component.certDrawer, 'open').and.returnValue(
+      Promise.resolve('open')
+    );
+
+    component.openCert();
+    tick();
+
+    expect(mockLiveAnnouncer.announce).toHaveBeenCalledWith(
+      'The certificates panel is opened'
+    );
+  }));
 });
 
 @Component({
diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts
index 97e017daf..fd38c3bca 100644
--- a/modules/ui/src/app/app.component.ts
+++ b/modules/ui/src/app/app.component.ts
@@ -33,6 +33,7 @@ import { appFeatureKey } from './store/reducers';
 import { SettingsComponent } from './pages/settings/settings.component';
 import { AppStore } from './app.store';
 import { TestRunService } from './services/test-run.service';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 const DEVICES_LOGO_URL = '/assets/icons/devices.svg';
 const DEVICES_RUN_URL = '/assets/icons/device_run.svg';
@@ -71,7 +72,8 @@ export class AppComponent {
     private state: State<AppState>,
     private readonly focusManagerService: FocusManagerService,
     private testRunService: TestRunService,
-    public appStore: AppStore
+    public appStore: AppStore,
+    private liveAnnouncer: LiveAnnouncer
   ) {
     this.appStore.getDevices();
     this.appStore.getSystemStatus();
@@ -157,10 +159,12 @@ export class AppComponent {
     this.settings.getSystemInterfaces();
     this.settings.getSystemConfig();
     await this.settingsDrawer.open();
+    await this.liveAnnouncer.announce('The settings panel is opened');
   }
 
   async openCert() {
     await this.certDrawer.open();
+    this.liveAnnouncer.announce('The certificates panel is opened');
   }
 
   consentShown() {