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,27 +35,34 @@
   [overlapTrigger]="true"
   class="app-search-options-menu"
 >
-  <app-search-input-control
-    #searchInputControl
-    (click)="$event.stopPropagation()"
-    (submit)="onSearchSubmit($event)"
-    (searchChange)="onSearchChange($event)"
+  <div
+    (keydown.tab)="$event.stopPropagation()"
+    (keydown.shift.tab)="$event.stopPropagation()"
   >
-  </app-search-input-control>
-  <mat-hint *ngIf="hasLibraryConstraint()" class="app-search-hint">{{
-    'SEARCH.INPUT.HINT' | translate
-  }}</mat-hint>
+    <div cdkTrapFocus>
+      <app-search-input-control
+        #searchInputControl
+        (click)="$event.stopPropagation()"
+        (submit)="onSearchSubmit($event)"
+        (searchChange)="onSearchChange($event)"
+      >
+      </app-search-input-control>
+      <mat-hint *ngIf="hasLibraryConstraint()" class="app-search-hint">{{
+        'SEARCH.INPUT.HINT' | translate
+      }}</mat-hint>
 
-  <div id="search-options">
-    <mat-checkbox
-      *ngFor="let option of searchOptions"
-      id="{{ option.id }}"
-      [(ngModel)]="option.value"
-      [disabled]="option.shouldDisable()"
-      (change)="searchByOption()"
-      (click)="$event.stopPropagation()"
-    >
-      {{ option.key | translate }}
-    </mat-checkbox>
+      <div id="search-options">
+        <mat-checkbox
+          *ngFor="let option of searchOptions"
+          id="{{ option.id }}"
+          [(ngModel)]="option.value"
+          [disabled]="option.shouldDisable()"
+          (change)="searchByOption()"
+          (click)="$event.stopPropagation()"
+        >
+          {{ option.key | translate }}
+        </mat-checkbox>
+      </div>
+    </div>
   </div>
 </mat-menu>