Panel: Panel Content focusable and announced by assistive technology even when collapsed

[roesnera]

Describe the bug

When using toggleable panel components, the content of the panel is still focusable when collapsed and therefore available to screen readers. This makes it confusing and inconsistent for users who navigate around using just the keyboard, as they will be focusing content that is not displayed visually, and screen readers will still announce these elements despite their parent element having aria-hidden="true" because their content is focusable.

Environment

I encountered this bug using Orca and the Ungoogled Chromium browser, and I have been advised that it also occurs when using Jaws in an unspecified browser.

Reproducer

https://stackblitz.com/edit/github-w4fae2w1?file=src%2Fapp%2Fapp.component.html

Angular version

18.0.1

PrimeNG version

18.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.17.0

Browser(s)

No response

Steps to reproduce the behavior

1. Go to a toggleable panel with focusable content elements
2. Collapse the panel
3. Using your tab key to navigate, navigate forwards to the next focusable element

Expected behavior

Once the panel is collapsed and the focusable content is focused, you can interact with it as normal using your keyboard. If you are using assistive technology, you can also prompt it to announce the focused element, despite being the child of an element that (when the panel is in a collapsed state) is marked with "aria-hidden='true'"