search

azouaoui-med / react-pro-sidebar

React Pro Sidebar provides a set of components for creating high level and customizable side navigation
https://azouaoui-med.github.io/react-pro-sidebar/
MIT License
1.69k stars 414 forks source link

TAB key press Navigation Skips Collapsed Submenu Items in Latest Version #223

Closed rkirandas closed 4 weeks ago

rkirandas commented 3 months ago

Package: react-pro-sidebar v1.1.0 Demo Site: Demo Site

Video Demonstration

https://github.com/azouaoui-med/react-pro-sidebar/assets/62564910/05b9fdbe-b9a6-454c-848e-8eae64ab65de

Description

In the latest version of react-pro-sidebar (v1.1.0), when attempting to navigate through the menus and submenus using the TAB key, the navigation does not skip the collapsed submenu items. This issue is demonstrated in the linked video.

Steps to Reproduce

  1. Focus on the sidebar section with all submenus in a closed state.
  2. Press the TAB key for the first time, which selects the Charts menu.
  3. Press the TAB key again. The Charts menu loses focus, and it seems no other menu is selected, but it appears to navigate to the Charts submenus, which are in a collapsed state.
  4. Press TAB two more times to navigate to the next menu option, Maps.

Expected Behavior

In comparison, the following demo in CodeSandbox using version 0.6.0 of react-pro-sidebar demonstrates the expected behavior. When navigating with the TAB key, the navigation skips the collapsed submenus.

Please provide guidance on how to achieve the expected TAB navigation behavior, as demonstrated in the version 0.6.0 demo, in the latest version of the library.

stale[bot] commented 1 month ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.