Adds focus on next or close button when certificate is deleted

modules/ui/src/app/pages/certificates/certificates.component.html

@@ -31,6 +31,9 @@ <h2 class="certificates-drawer-header-title">Certificates</h2>
     <section class="content-certificates">
       <app-certificate-item
         *ngFor="let certificate of vm.certificates"
+        [class.certificate-selected]="
+          certificate.name === vm.selectedCertificate
+        "
         [certificate]="certificate"
         (deleteButtonClicked)="
           deleteCertificate($event)

modules/ui/src/app/pages/certificates/certificates.component.spec.ts

@@ -13,7 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  TestBed,
+} from '@angular/core/testing';
 
 import { CertificatesComponent } from './certificates.component';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
@@ -132,5 +137,35 @@ describe('CertificatesComponent', () => {
         openSpy.calls.reset();
       }));
     });
+
+    describe('#focusNextButton', () => {
+      it('should focus next active element if exist', fakeAsync(() => {
+        const row = window.document.querySelector(
+          'app-certificate-item'
+        ) as HTMLElement;
+        row.classList.add('certificate-selected');
+        const nextButton = window.document.querySelector(
+          '.certificate-selected + app-certificate-item .certificate-item-delete'
+        ) as HTMLButtonElement;
+        const buttonFocusSpy = spyOn(nextButton, 'focus');
+
+        component.focusNextButton();
+
+        expect(buttonFocusSpy).toHaveBeenCalled();
+        flush();
+      }));
+
+      it('should focus navigation button if next active element does not exist', fakeAsync(() => {
+        const nextButton = window.document.querySelector(
+          '.certificates-drawer-content .close-button'
+        ) as HTMLButtonElement;
+        const buttonFocusSpy = spyOn(nextButton, 'focus');
+
+        component.focusNextButton();
+
+        expect(buttonFocusSpy).toHaveBeenCalled();
+        flush();
+      }));
+    });
   });
 });

modules/ui/src/app/pages/certificates/certificates.component.ts

@@ -68,6 +68,8 @@ export class CertificatesComponent implements OnDestroy {
   }
 
   deleteCertificate(name: string) {
+    this.store.selectCertificate(name);
+
     const dialogRef = this.dialog.open(DeleteFormComponent, {
       ariaLabel: 'Delete certificate',
       data: {
@@ -86,7 +88,24 @@ export class CertificatesComponent implements OnDestroy {
       .subscribe(deleteCertificate => {
         if (deleteCertificate) {
           this.store.deleteCertificate(name);
+          this.focusNextButton();
         }
       });
   }
+
+  focusNextButton() {
+    // Try to focus next interactive element, if exists
+    const next = window.document.querySelector(
+      '.certificate-selected + app-certificate-item .certificate-item-delete'
+    ) as HTMLButtonElement;
+    if (next) {
+      next.focus();
+    } else {
+      // If next interactive element doest not exist, close button will be focused
+      const menuButton = window.document.querySelector(
+        '.certificates-drawer-content .close-button'
+      ) as HTMLButtonElement;
+      menuButton?.focus();
+    }
+  }
 }

modules/ui/src/app/pages/certificates/certificates.store.spec.ts

@@ -68,13 +68,24 @@ describe('CertificatesStore', () => {
 
       certificateStore.updateCertificates([certificate]);
     });
+
+    it('should update selectedCertificate', (done: DoneFn) => {
+      const certificate = 'test';
+      certificateStore.viewModel$.pipe(skip(1), take(1)).subscribe(store => {
+        expect(store.selectedCertificate).toEqual(certificate);
+        done();
+      });
+
+      certificateStore.selectCertificate(certificate);
+    });
   });
 
   describe('selectors', () => {
     it('should select state', done => {
       certificateStore.viewModel$.pipe(take(1)).subscribe(store => {
         expect(store).toEqual({
           certificates: [],
+          selectedCertificate: '',
         });
         done();
       });

modules/ui/src/app/pages/certificates/certificates.store.ts

@@ -25,20 +25,30 @@ import { DatePipe } from '@angular/common';
 
 export interface AppComponentState {
   certificates: Certificate[];
+  selectedCertificate: string;
 }
 @Injectable()
 export class CertificatesStore extends ComponentStore<AppComponentState> {
   private certificates$ = this.select(state => state.certificates);
+  private selectedCertificate$ = this.select(
+    state => state.selectedCertificate
+  );
 
   viewModel$ = this.select({
     certificates: this.certificates$,
+    selectedCertificate: this.selectedCertificate$,
   });
 
   updateCertificates = this.updater((state, certificates: Certificate[]) => ({
     ...state,
     certificates,
   }));
 
+  selectCertificate = this.updater((state, selectedCertificate: string) => ({
+    ...state,
+    selectedCertificate,
+  }));
+
   getCertificates = this.effect(trigger$ => {
     return trigger$.pipe(
       exhaustMap(() => {
@@ -118,6 +128,7 @@ export class CertificatesStore extends ComponentStore<AppComponentState> {
   ) {
     super({
       certificates: [],
+      selectedCertificate: '',
     });
   }
 }