diff --git a/modules/ui/src/app/pages/certificates/certificates.component.html b/modules/ui/src/app/pages/certificates/certificates.component.html
index 23781d330..d75f115b4 100644
--- a/modules/ui/src/app/pages/certificates/certificates.component.html
+++ b/modules/ui/src/app/pages/certificates/certificates.component.html
@@ -31,6 +31,9 @@
{
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();
+ }));
+ });
});
});
diff --git a/modules/ui/src/app/pages/certificates/certificates.component.ts b/modules/ui/src/app/pages/certificates/certificates.component.ts
index b29f17014..0e0b805b1 100644
--- a/modules/ui/src/app/pages/certificates/certificates.component.ts
+++ b/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();
+ }
+ }
}
diff --git a/modules/ui/src/app/pages/certificates/certificates.store.spec.ts b/modules/ui/src/app/pages/certificates/certificates.store.spec.ts
index bf7415b0b..f42b9e928 100644
--- a/modules/ui/src/app/pages/certificates/certificates.store.spec.ts
+++ b/modules/ui/src/app/pages/certificates/certificates.store.spec.ts
@@ -68,6 +68,16 @@ 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', () => {
@@ -75,6 +85,7 @@ describe('CertificatesStore', () => {
certificateStore.viewModel$.pipe(take(1)).subscribe(store => {
expect(store).toEqual({
certificates: [],
+ selectedCertificate: '',
});
done();
});
diff --git a/modules/ui/src/app/pages/certificates/certificates.store.ts b/modules/ui/src/app/pages/certificates/certificates.store.ts
index 4cc0830ff..4748ed05d 100644
--- a/modules/ui/src/app/pages/certificates/certificates.store.ts
+++ b/modules/ui/src/app/pages/certificates/certificates.store.ts
@@ -25,13 +25,18 @@ import { DatePipe } from '@angular/common';
export interface AppComponentState {
certificates: Certificate[];
+ selectedCertificate: string;
}
@Injectable()
export class CertificatesStore extends ComponentStore {
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[]) => ({
@@ -39,6 +44,11 @@ export class CertificatesStore extends ComponentStore {
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 {
) {
super({
certificates: [],
+ selectedCertificate: '',
});
}
}