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()"
+    (navigateBefore)="onNavigateBefore($event)"
-    (navigateNext)="onNavigateNext()"
+    (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)
+    );
+  }
 }

src/app/components/viewer/viewer.component.html

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

src/app/components/viewer/viewer.component.ts

@@ -112,6 +112,10 @@ export class AppViewerComponent implements OnInit, OnDestroy {
   fileName: string;
 
   private previewLocation: string;
+  private containersSkipNavigation = [
+    'adf-viewer__sidebar',
+    'mat-dialog-container'
+  ];
 
   constructor(
     private router: Router,
@@ -237,13 +241,26 @@ export class AppViewerComponent implements OnInit, OnDestroy {
     }
   }
 
-  onNavigateBefore(): void {
+  onNavigateBefore(event: MouseEvent | KeyboardEvent): void {
-    const location = this.getFileLocation();
+    if (
+      event.type !== 'click' &&
+      this.shouldNavigate(event.target as HTMLElement)
+    ) {
+      return;
+    }
 
+    const location = this.getFileLocation();
     this.store.dispatch(new ViewNodeAction(this.previousNodeId, { location }));
   }
 
-  onNavigateNext(): void {
+  onNavigateNext(event: MouseEvent | KeyboardEvent): void {
+    if (
+      event.type !== 'click' &&
+      this.shouldNavigate(event.target as HTMLElement)
+    ) {
+      return;
+    }
+
     const location = this.getFileLocation();
     this.store.dispatch(new ViewNodeAction(this.nextNodeId, { location }));
   }
@@ -437,4 +454,20 @@ export class AppViewerComponent implements OnInit, OnDestroy {
       .parseUrl(this.navigationPath || this.router.url)
       .root.children[PRIMARY_OUTLET].toString();
   }
+
+  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)
+    );
+  }
 }