Description

If you have controls inside a dialog and between the controls there is another dialog with buttons, then you can't tab from one component to the other. Apart from that you can't tab from time picker to the next input.

I think the following code causes this issue:

Instead of checking aria-hidden only on the element itself, it should also check if any parent has this attribute:

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.closest('[aria-hidden="true"]'));
}

• igniteui-angular version: 20.0.11

Steps to reproduce

<igx-dialog [isOpen]="true">
  <igx-input-group>
    <label igxLabel>Input</label>
    <input igxInput />
  </igx-input-group>
  <igx-dialog>
    <igx-dialog-actions>
      <button>test</button>
    </igx-dialog-actions>
  </igx-dialog>
  <igx-input-group>
    <label igxLabel>Input</label>
    <input igxInput />
  </igx-input-group>
  <igx-time-picker> </igx-time-picker>
  <igx-input-group>
    <label igxLabel>Input</label>
    <input igxInput />
  </igx-input-group>
</igx-dialog>

Result

You can't tab from Input 1 to Input 2 and you can't tab from time picker to the next input.

Attachments

https://stackblitz.com/edit/19wlhnff