feat(ui): add keyboard navigation for confirmation dialog box focusin…

…g the next button with left,right arrow keys
johannesjo · Jan 23, 2025 · 1a1e5cc · 1a1e5cc
1 parent 0cf7b04
commit 1a1e5cc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/app/ui/dialog-confirm/dialog-confirm.component.html b/src/app/ui/dialog-confirm/dialog-confirm.component.html
@@ -9,23 +9,27 @@
   <div class="wrap-buttons">
     <button
       tabindex="1"
+      #cancelButton
       (click)="close(false)"
       class="btn btn-primary"
       mat-button
       type="button"
+      (keydown.ArrowRight)="focusNextButton(confirmButton)"
     >
       <mat-icon>close</mat-icon>
       {{(data.cancelTxt || T.G.CANCEL)|translate}}
     </button>
 
     <button
       tabindex="2"
+      #confirmButton
       (click)="close(true)"
       e2e="confirmBtn"
       class="btn btn-primary submit-button"
       color="primary"
       type="button"
       mat-stroked-button
+      (keydown.ArrowLeft)="focusNextButton(cancelButton)"
     >
       <mat-icon>check</mat-icon>
       {{(data.okTxt || T.G.OK)|translate}}

diff --git a/src/app/ui/dialog-confirm/dialog-confirm.component.ts b/src/app/ui/dialog-confirm/dialog-confirm.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, ViewChild } from '@angular/core';
 import {
   MAT_DIALOG_DATA,
   MatDialogActions,
@@ -18,6 +18,8 @@ import { TranslatePipe } from '@ngx-translate/core';
   imports: [MatDialogContent, MatDialogActions, MatButton, MatIcon, TranslatePipe],
 })
 export class DialogConfirmComponent {
+  @ViewChild('cancelButton', { read: MatButton }) cancelButton!: MatButton;
+  @ViewChild('confirmButton', { read: MatButton }) confirmButton!: MatButton;
   private _matDialogRef = inject<MatDialogRef<DialogConfirmComponent>>(MatDialogRef);
   data = inject(MAT_DIALOG_DATA);
 
@@ -26,4 +28,11 @@ export class DialogConfirmComponent {
   close(res: any): void {
     this._matDialogRef.close(res);
   }
+
+  focusNextButton(nextButton: MatButton): void {
+    const buttonElement = nextButton._elementRef.nativeElement;
+    if (buttonElement) {
+      buttonElement.focus();
+    }
+  }
 }