Trap the tab in the cdk overlay for the search input to make it possible to reach the Search filter checkboxes (#1227)

src/app/components/search/search-input.module.ts

@@ -29,9 +29,15 @@ import { CoreModule } from '@alfresco/adf-core';
 import { SearchInputComponent } from './search-input/search-input.component';
 import { SearchInputControlComponent } from './search-input-control/search-input-control.component';
 import { ContentModule } from '@alfresco/adf-content-services';
+import { A11yModule } from '@angular/cdk/a11y';
 
 @NgModule({
-  imports: [CommonModule, CoreModule.forChild(), ContentModule.forChild()],
+  imports: [
+    CommonModule,
+    CoreModule.forChild(),
+    ContentModule.forChild(),
+    A11yModule
+  ],
   declarations: [SearchInputComponent, SearchInputControlComponent],
   exports: [SearchInputComponent, SearchInputControlComponent]
 })

src/app/components/search/search-input/search-input.component.html

@@ -35,6 +35,11 @@
   [overlapTrigger]="true"
   class="app-search-options-menu"
 >
+  <div
+    (keydown.tab)="$event.stopPropagation()"
+    (keydown.shift.tab)="$event.stopPropagation()"
+  >
+    <div cdkTrapFocus>
       <app-search-input-control
         #searchInputControl
         (click)="$event.stopPropagation()"
@@ -58,4 +63,6 @@
           {{ option.key | translate }}
         </mat-checkbox>
       </div>
+    </div>
+  </div>
 </mat-menu>