DomHandler: getFocusableElements returns elements with hidden parents

[jasonverber]

Describe the bug

DomHandler.getFocusableElements checks the display and visibility of each element itself but doesn't account for ancestors with display: none. This results in unexpected behavior when tabbing in, for example, a dialog box with focus trap enabled.

Environment

Angular 17.0.8

Reproducer

No response

Angular version

17.0.8

PrimeNG version

17.3.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.19.0

Browser(s)

No response

Steps to reproduce the behavior

1. Hide the parent of an otherwise focusable element via display: none
2. Use focus trap and tab around
3. Observe how focus gets stuck or otherwise behaves unexpectedly.

Expected behavior

An element that is not displayed because its parent has display: none shouldn't be eligible for focus and thus should be excluded from the results.

[jasonverber]

I can add a Stackblitz if 100% necessary.

[cetincakiroglu]

Hi,

Yes, could you please share a stackblitz also, so we can identify the issue clearly?

[jasonverber]

Hopefully this Stackblitz reproduces the issue clearly.

[cetincakiroglu]

Hi,

Thanks for reporting the issue and the PR but it caused errors in some of the components. For example; tab functionality throws console errors in dropdown. Probably it's same in the multiselect, autocomplete etc. Reverting the PR and re-opening the issue. Moving the issue to the 17.Future.

[jasonverber]

@cetincakiroglu sorry about that -- it looks like it was the dropdowns with virtual scroll that were causing the issue? My new PR fixes this issue without breaking those.

I was calling fosuableElement.getComputedStyle whereas previously the global getComputedStyle was being used twice. I adjusted my fix to use the global one and consolidated what had been two calls into one. I hope this fixes it without causing any additional issues -- I ran it locally and tried all the dropdowns as well as all (I think, there's so many!) of the autocomplete and multiselect examples.