Dialog: (accessibility) "display: none" inside dialog breaks focus tabbing

[arnodemer]

Describe the bug

When a Dialog contains a section with "display: none" and a as child of section, user cannot reach each focusable input/buttons/... using TAB key.

Reproducer

https://stackblitz.com/edit/qejj7w?file=src%2FApp.jsx

PrimeReact version

10.5.1

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. open stackBlitz app (spawn from Dialog basic showcase)
2. use tab to move set focus on all input & buttons: (this works)
3. open dialog
4. use tab to move focus around dialog's buttons and inputs: Focus is stopped on input due to "display: none" section.

50 cents: Issue comes from DomHandler.getFocusableElements() ?

Note that issue is not the same as #4035

Expected behavior

All focusable elements inside a dialog box should be reached using Tab (Shift+Tab) key.

[KirilCycle]

Hi @melloware,
Can i take this ? I understand why this happens, I'm curious if the onKeyDown method is strictly necessary for the dialog component. It function perfectly without it. Is this included for broader browser compatibility?

[melloware]

@KirilCycle submit a PR and PrimeTek and I can review and see. I have to study it to see.