Accordion: Accessibility issues using keyboard navigation on accordion with form-elements inside (v16)

[Gykonik]

Describe the bug

When placing form elements such as input-number, cascade-select, and multi-select inside the Accordion panels, the keyboard controls (specifically the up and down arrow keys) do not function correctly.

After, i.e., selecting the CascadeSelect and expanding it using enter, I cannot press the down arrow key to get to the options. Instead, the first Accordion Panel gets selected.

Related to this: Focusable elements inside collapsed accordion panels are also highlighted if I navigate with the tab key. From my point of view, that makes no sense. At the moment, I developed a workaround to change tabIndex on content within hidden panels to 1, but this should be the default behavior I suppose.

So to sum it up:

1. Arrow Key navigation of form elements within accordion panels doesn't work
2. Tab-Navigation doesn't properly ignore collapsed content

Environment

Windows 10

Reproducer

https://stackblitz.com/edit/fcgd4a?file=src%2Fapp%2Fdemo%2Faccordion-basic-demo.ts,src%2Fapp%2Fdemo%2Faccordion-basic-demo.html

Angular version

16.2.0

PrimeNG version

16.2.0

Build / Runtime

Angular CLI App

Language

ALL

Node version (for AoT issues node --version)

16.0.2

Browser(s)

No response

Steps to reproduce the behavior

1. Open the provided StackBlitz demo.
2. Use Tab-navigation to get to an accordion panel (there you can already notice that it also focuses elements in collapsed tabs)
3. Open MultiSelect or CascadeSelect using spacebar / enter
4. Try to navigate into the actual options by using tab/arrow keys
   tab/arrow

Expected behavior

1. Content of collapsed panels should be un-tabbable
2. When using arrow keys/tab on form elements within one panel, it should behave as if the form element would be isolated (that is, default navigation as described in the documentation)

[GiacomoDM]

For your second point I cannot reproduce the error on version 16.2. If an accordion tab is collapsed and I press tab, the focus moves correctly to the next tab header or next focusable element outside the tabs.

[Gykonik]

That's strange - the Stackblitz I've uploaded is 16.2.0, and the issue still persists. When the first tab is focused, and I press tab, I need to press tab 3 times in order to properly focus the second tab.

[Gykonik]

Note that Issue 1 still doesn't work with PrimeNG v.16.9.1. I've updated the Version in the following example:

https://stackblitz.com/edit/fcgd4a-wrfyw9?file=src%2Fapp%2Fdemo%2Faccordion-basic-demo.ts,package.json

While the second problem is solved, one still cannot navigate inside the dropdown menu of the second accordion panel using the arrow keys. The focus jumps to the first accordion panel's header.

[marcschroeder]

Does anyone know about a workround for this issue?

[cetincakiroglu]

Fixed in v17: https://stackblitz.com/edit/ejdody?file=src%2Fapp%2Faccordion-basic-demo.html,src%2Fapp%2Faccordion-basic-demo.ts

Also, a fix will be provided for v16-lts

[jase88]

@cetincakiroglu how would that work with a nested button inside the accordion header?

If tabbing to the button and hitting return, the accordion is collapsing/expanding:
https://stackblitz.com/edit/ejdody-gp1wwn?file=src%2Fapp%2Faccordion-basic-demo.html

The only workaround I can think of is to capture all click, keyboard.space and keyboard.return events explicitly on every button.

Is this a separate issue?

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!