search

AccessibleForAll / AccessibleWebDev

A resource for developers wanting to learn the basics of accessibility
https://accessibleweb.dev
MIT License
172 stars 95 forks source link

Missing arrow keys navigation support in theme switcher menu #340

Closed SatyamSetia closed 1 year ago

SatyamSetia commented 1 year ago

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[bot] commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.