From fe6ff282eb4c33d9a4e3b6afd2b8f1f56d54719c Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Thu, 11 Apr 2024 09:23:20 +0000
Subject: [PATCH] 333349715: (fix) GAR 1.3 The disabled system settings panel
 contains a focusable element

---
 .../settings/general-settings.component.html  |  3 +-
 .../settings/general-settings.component.scss  | 11 +++
 .../general-settings.component.spec.ts        | 67 ++++++++++++-------
 .../settings/general-settings.component.ts    | 12 +++-
 4 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/modules/ui/src/app/pages/settings/general-settings.component.html b/modules/ui/src/app/pages/settings/general-settings.component.html
index 7bdeb8dc8..36849b42e 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.html
+++ b/modules/ui/src/app/pages/settings/general-settings.component.html
@@ -58,9 +58,10 @@ <h2 class="settings-drawer-header-title">System settings</h2>
           [options]="vm.internetOptions">
         </app-settings-dropdown>
       </ng-container>
-      <p class="message">
+      <p class="message" [ngClass]="{ disabled: settingsDisable }">
         If a port is missing from this list, you can
         <a
+          #reloadSettingLink
           (click)="reloadSetting()"
           (keydown.enter)="reloadSetting()"
           (keydown.space)="reloadSetting()"
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.scss b/modules/ui/src/app/pages/settings/general-settings.component.scss
index e97c97d1e..6bec40683 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.scss
+++ b/modules/ui/src/app/pages/settings/general-settings.component.scss
@@ -130,3 +130,14 @@
   background-color: rgba(255, 255, 255, 0.7);
   z-index: 2;
 }
+
+.disabled {
+  .message-link {
+    cursor: default;
+    pointer-events: none;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.spec.ts b/modules/ui/src/app/pages/settings/general-settings.component.spec.ts
index 0187f2501..8095468fd 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.spec.ts
+++ b/modules/ui/src/app/pages/settings/general-settings.component.spec.ts
@@ -116,6 +116,47 @@ describe('GeneralSettingsComponent', () => {
     expect(mockLoaderService.setLoading).toHaveBeenCalledWith(true);
   });
 
+  describe('#settingsDisable', () => {
+    it('should disable setting form when get settingDisable as true ', () => {
+      spyOn(component.settingForm, 'disable');
+
+      component.settingsDisable = true;
+
+      expect(component.settingForm.disable).toHaveBeenCalled();
+    });
+
+    it('should enable setting form when get settingDisable as false ', () => {
+      spyOn(component.settingForm, 'enable');
+
+      component.settingsDisable = false;
+
+      expect(component.settingForm.enable).toHaveBeenCalled();
+    });
+
+    it('should disable "Save" button when get settingDisable as true', () => {
+      component.settingsDisable = true;
+
+      const saveBtn = compiled.querySelector(
+        '.save-button'
+      ) as HTMLButtonElement;
+
+      expect(saveBtn.disabled).toBeTrue();
+    });
+
+    it('should disable "Refresh" link when settingDisable', () => {
+      component.settingsDisable = true;
+
+      const refreshLink = compiled.querySelector(
+        '.message-link'
+      ) as HTMLAnchorElement;
+
+      refreshLink.click();
+
+      expect(refreshLink.hasAttribute('aria-disabled')).toBeTrue();
+      expect(mockLoaderService.setLoading).not.toHaveBeenCalled();
+    });
+  });
+
   describe('#closeSetting', () => {
     beforeEach(() => {
       component.ngOnInit();
@@ -152,32 +193,6 @@ describe('GeneralSettingsComponent', () => {
 
       expect(mockSettingsStore.setDefaultFormValues).toHaveBeenCalled();
     });
-
-    it('should disable setting form when get settingDisable as true ', () => {
-      spyOn(component.settingForm, 'disable');
-
-      component.settingsDisable = true;
-
-      expect(component.settingForm.disable).toHaveBeenCalled();
-    });
-
-    it('should enable setting form when get settingDisable as false ', () => {
-      spyOn(component.settingForm, 'enable');
-
-      component.settingsDisable = false;
-
-      expect(component.settingForm.enable).toHaveBeenCalled();
-    });
-
-    it('should disable "Save" button when get settingDisable as true', () => {
-      component.settingsDisable = true;
-
-      const saveBtn = compiled.querySelector(
-        '.save-button'
-      ) as HTMLButtonElement;
-
-      expect(saveBtn.disabled).toBeTrue();
-    });
   });
 
   describe('#saveSetting', () => {
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.ts b/modules/ui/src/app/pages/settings/general-settings.component.ts
index 5ef2b4fc2..c0e957ded 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.ts
+++ b/modules/ui/src/app/pages/settings/general-settings.component.ts
@@ -15,11 +15,13 @@
  */
 import {
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnDestroy,
   OnInit,
   Output,
+  ViewChild,
 } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Subject, takeUntil, tap } from 'rxjs';
@@ -39,6 +41,7 @@ import { LoaderService } from '../../services/loader.service';
   providers: [SettingsStore],
 })
 export class GeneralSettingsComponent implements OnInit, OnDestroy {
+  @ViewChild('reloadSettingLink') public reloadSettingLink!: ElementRef;
   @Output() closeSettingEvent = new EventEmitter<void>();
 
   private isSettingsDisable = false;
@@ -98,6 +101,9 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
   }
 
   reloadSetting(): void {
+    if (this.settingsDisable) {
+      return;
+    }
     this.showLoading();
     this.getSystemInterfaces();
     this.settingsStore.getSystemConfig();
@@ -122,11 +128,13 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
   }
 
   private disableSettings(): void {
-    this.settingForm.disable();
+    this.settingForm?.disable();
+    this.reloadSettingLink?.nativeElement.setAttribute('aria-disabled', 'true');
   }
 
   private enableSettings(): void {
-    this.settingForm.enable();
+    this.settingForm?.enable();
+    this.reloadSettingLink?.nativeElement.removeAttribute('aria-disabled');
   }
 
   private createSettingForm() {