Missing arrow keys navigation support in theme switcher menu

[SatyamSetia]

Describe the bug
Keyboard navigation using arrow keys is not supported in theme-switcher menu items currently.

To Reproduce
Try using arrow keys on theme-switcher. It scrolls the page instead of navigating among theme menu items.

Expected behaviour
Since it is a menu with 3 menu items - Device settings, light mode and dark mode. As per ideal accessibility experience -

1. Focus should shift automatically to the first theme option when theme-switcher button is clicked or pressed with enter/space.
2. it should support navigation using up/down arrow keys. Currently it works with tab/shift+tab.

Additional context
Reference link with more details on ideal menu button experience from a11y standpoint - https://www.w3.org/WAI/ARIA/apg/patterns/menubar/

[github-actions]

Hello @SatyamSetia, thanks for raising an issue in this project. The maintainers of this project are volunteers so please be understanding if it takes time before you get a response. We still appreciate your help with raising issues!

[SatyamSetia]

Hey, @EmmaDawsonDev
Just wanted to share my interest on working this bug fix if in-case you find it to be a relevant issue to be fixed.

My proposal for the fix -
Creating a reusable component for menu button with menu items with proper accessibility support as per the guidelines mentioned here - https://www.w3.org/WAI/ARIA/apg/patterns/menubar/

[EmmaDawsonDev]

Hi Satyam, Thanks for raising this issue. This component follows the disclosure pattern from the APG. This is usually recommended over the menu pattern and preferred by screen reader users. The menu pattern is misunderstood and the word misused. It's meant specifically for things that behave like native operating system menus, not for drop downs, pop ups or anything else on a website we might refer to as a menu.

This article is a good read https://adrianroselli.com/2023/05/be-careful-using-menu.html

[SatyamSetia]

Thanks for the details @EmmaDawsonDev. It makes sense to me as well now. Looks like we can close this issue since it is a valid implementation.