Merge pull request #16189 from IgniteUI/mkirkova/fix-16156-master

Filter the hidden elements in getFocusableElements - 20.1.x

Author: kacheshmarova

projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.spec.ts

@@ -5,6 +5,7 @@ import { IgxFocusTrapDirective } from './focus-trap.directive';
 
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
+import { IgxTimePickerComponent } from '../../time-picker/time-picker.component';
 
 describe('igxFocusTrap', () => {
     beforeEach(waitForAsync(() => {
@@ -161,6 +162,39 @@ describe('igxFocusTrap', () => {
         fix.detectChanges();
         expect(document.activeElement).toEqual(button.nativeElement);
     }));
+
+    it('should focus only visible focusable elements on Tab key pressed', () => {
+        const fix = TestBed.createComponent(TrapFocusTestComponent);
+        fix.detectChanges();
+
+        fix.componentInstance.showTimePicker = true;
+        fix.detectChanges();
+
+        const focusTrap = fix.debugElement.query(By.directive(IgxFocusTrapDirective));
+        const buttons = fix.debugElement.queryAll(By.css('button'));
+        const inputs = fix.debugElement.queryAll(By.css('input'));
+        const timePickerInput = fix.debugElement.query(By.css('.igx-input-group__input'));
+
+        UIInteractions.triggerEventHandlerKeyDown('Tab', focusTrap);
+        fix.detectChanges();
+        expect(document.activeElement).toEqual(inputs[0].nativeElement);
+
+        UIInteractions.triggerEventHandlerKeyDown('Tab', focusTrap);
+        fix.detectChanges();
+        expect(document.activeElement).toEqual(inputs[1].nativeElement);
+
+        UIInteractions.triggerEventHandlerKeyDown('Tab', focusTrap);
+        fix.detectChanges();
+        expect(document.activeElement).toEqual(timePickerInput.nativeElement);
+
+        UIInteractions.triggerEventHandlerKeyDown('Tab', focusTrap);
+        fix.detectChanges();
+        expect(document.activeElement).toEqual(buttons[buttons.length - 1].nativeElement);
+
+        UIInteractions.triggerEventHandlerKeyDown('Tab', focusTrap);
+        fix.detectChanges();
+        expect(document.activeElement).toEqual(inputs[0].nativeElement);
+    });
 });
 
 
@@ -177,14 +211,19 @@ describe('igxFocusTrap', () => {
             <input type="password" placeholder="Enter Password" name="psw">
         }
         <br>
+        @if (showTimePicker) {
+            <igx-time-picker> </igx-time-picker>
+        }
+        <br>
         @if (showButton) {
             <button>SIGN IN</button>
         }
     </div>`,
-    imports: [IgxFocusTrapDirective]
+    imports: [IgxFocusTrapDirective, IgxTimePickerComponent]
 })
 class TrapFocusTestComponent {
     public showInput = true;
     public showButton = true;
     public focusTrap = true;
+    public showTimePicker = false;
 }

projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.ts

@@ -80,7 +80,7 @@ export class IgxFocusTrapDirective implements AfterViewInit, OnDestroy {
     private getFocusableElements(element: Element) {
         return Array.from(element.querySelectorAll(
             'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
-        )).filter(el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+        )).filter(el => !el.hasAttribute('disabled') && !el.closest('[aria-hidden="true"]'));
     }
 
     private getFocusedElement(): HTMLElement | null {