filter element target on keyboard event

src/app/components/preview/preview.component.html

@@ -14,8 +14,8 @@
     [canNavigateNext]="nextNodeId"
     [overlayMode]="true"
     (showViewerChange)="onVisibilityChanged($event)"
-    (navigateBefore)="onNavigateBefore()"
-    (navigateNext)="onNavigateNext()"
+    (navigateBefore)="onNavigateBefore($event)"
+    (navigateNext)="onNavigateNext($event)"
   >
     <adf-viewer-sidebar *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.file"></aca-info-drawer>

src/app/components/preview/preview.component.ts

@@ -113,6 +113,11 @@ export class PreviewComponent extends PageComponent
     '-TYPE:"lnk:link"'
   ];
 
+  private containersSkipNavigation = [
+    'adf-viewer__sidebar',
+    'mat-dialog-container'
+  ];
+
   constructor(
     private contentApi: ContentApiService,
     private preferences: UserPreferencesService,
@@ -258,7 +263,14 @@ export class PreviewComponent extends PageComponent
   }
 
   /** Handles navigation to a previous document */
-  onNavigateBefore(): void {
+  onNavigateBefore(event: MouseEvent | KeyboardEvent): void {
+    if (
+      event.type !== 'click' &&
+      this.shouldNavigate(event.target as HTMLElement)
+    ) {
+      return;
+    }
+
     if (this.previousNodeId) {
       this.router.navigate(
         this.getPreviewPath(this.folderId, this.previousNodeId)
@@ -267,7 +279,14 @@ export class PreviewComponent extends PageComponent
   }
 
   /** Handles navigation to a next document */
-  onNavigateNext(): void {
+  onNavigateNext(event: MouseEvent | KeyboardEvent): void {
+    if (
+      event.type !== 'click' &&
+      this.shouldNavigate(event.target as HTMLElement)
+    ) {
+      return;
+    }
+
     if (this.nextNodeId) {
       this.router.navigate(this.getPreviewPath(this.folderId, this.nextNodeId));
     }
@@ -487,4 +506,20 @@ export class PreviewComponent extends PageComponent
       return acc;
     }, []);
   }
+
+  private shouldNavigate(element: HTMLElement): boolean {
+    let currentElement = element.parentElement;
+
+    while (currentElement && !this.isChild(currentElement.classList)) {
+      currentElement = currentElement.parentElement;
+    }
+
+    return !!currentElement;
+  }
+
+  private isChild(list: DOMTokenList): boolean {
+    return Array.from(list).some((className: string) =>
+      this.containersSkipNavigation.includes(className)
+    );
+  }
 }