Component: Panel menu tabbing incorrectly sets selected item

[erber014]

Describe the bug

There is an issue with tabbing in the panel menu where the selected item incorrectly gets set to the first item inside the panel menu despite the focus being set to the correct item.

Error is reproducible on https://primeng.org/panelmenu#basic

Environment

primeng.org

Reproducer

No response

Angular version

primeng.org

PrimeNG version

v17.0.0-beta.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

Whatever the official site uses

Browser(s)

No response

Steps to reproduce the behavior

https://primeng.org/panelmenu#basic

Expected behavior

No response

[ashikjs]

@erber014 I can not regenerate this case can you recheck or make video.

[erber014]

Maybe I was unclear in my description. The focus is set correctly when tabbing but the selectedItem does not seem to be changed. I can tab down to for example "Delete" in the primeng.org example, and when i press enter or space it is very clear that "New" is still selected.

The correct / expected behavior can be seen when using up or down arrows to move the selected item. This previously also worked by tabbing, which now seems broken.

[ashikjs]

Generate path:

1. Click by mouse
2. Use keyboard arrow to move or change menu
3. then you see this issues

[erber014]

@erber014

By default, when you use the tabindex attribute on a div element and set it to 0, the element becomes "programmatically focusable," meaning it can receive focus both via keyboard navigation and mouse clicks.

When this div receives focus, most browsers apply a default focus styling to indicate that the element is currently focused. However, the behavior you're observing with an anchor () element is also correct. Anchors receive browser focus styles only when accessed via keyboard navigation, not when clicked with the mouse.

If you want the div with tabindex='0' to behave more like an anchor in terms of focus styling, you may need to override or reset the default focus styles applied by the browser. You can use CSS to style the :focus pseudo-class and remove or modify the default styles to achieve the desired appearance.

/* Reset or modify default focus styles for the tabbable div */
div[tabindex='0']:focus {
  outline: none; /* Remove the default outline */
  /* Add your custom focus styles here */
}

I think you are still misunderstanding my issue. This has nothing to do with styling of focused element, I dont really care about that. What I am experiencing is a change of functionality related to TABBING, which I believe is a bug, but maybe there has just been a change in the component. In previous versions like v15 LTS, tabbing meant that the selected element in the menu changed, now it does not. When "New"-element is the selected element, pressing enter or space results in this menu item expanding or collapsing. In previous versions I could TAB away from the "New"-element and PRESS enter or space and NOTHING would happen since the selected element is no longer "New", but another element.

We are using links in our PanelMenu to route to other components/urls and we used to be able to tab to change between items and press enter or space to go to these URLS. This now does not work.

Is this clear enough @ashikjs ?

[ashikjs]

@erber014 Ya, Sorry for my miss understanding. I recheck this bugs and finally got it. Keyboard TAB and left,right arrow not work properly same time.

After control submenu by left-right arrow if we press TAB and again try to control by left-right arrow then it generate.

[jermylucas]

This issue is a duplicate of #13630 Note, the specific tabbing issue described was partly due to a "focus" error, and is fixed as part of the "flickering focus" issue completed in issue #14236

After this fix is complete however, you will notice an issue with the Tabbing but not the same as described here.

When it comes to fixing, note that in PR #13724 @cetincakiroglu says:

For accessibility, pressing the tab key should shift focus to the next header, not an element inside the panel, similar to the behavior on https://primevue.org/panelmenu/.

This PR has not been merged yet due to this issue

[calummm]

Could we please provide an option to allow tab to also work inside the panel or investigate a screen reader issue? It appears arrow keys do not function as expected when using screen readers such as NVDA. Typically, the first element is reachable with arrow keys and then nothing.

Additionally, the numpad enter does not correctly trigger an action on the elements. Is there a reason why we are using a div with role="button" over a button element?