search

modrinth / code

The Modrinth monorepo containing all code which powers Modrinth!
https://modrinth.com
Other
972 stars 180 forks source link

Elements behind the mobile user menu can still be focused #1678

Open MMK21Hub opened 1 year ago

MMK21Hub commented 1 year ago

Describe the bug

When on a viewport narrow enough to use the bottom navigation bar (>1095px), buttons, links and multiselects that aren't part of the menu can still be focused on (using that Tab key) and activated (using the Enter key).

Steps to reproduce

  1. Resize your browser window until the bottom navigation bar is shown
  2. Click the menu button on the right of the bottom navigation bar
  3. Use the Tab key to move focus to the end of the modal
  4. Continue to press Tab

Expected behavior

Focus would "loop back" to the start of the modal, or it would "tail off" and some other part of the browser UI would gain focus.

Screenshot

A multiselect drop-down visible beneath the user menu

Flowko commented 1 year ago

I honestly don't see the need to fix this because you don't have a tab on tablet/mobile devices, so it won't be an issue.

MMK21Hub commented 1 year ago

Hi! There are a few cases I can see where you might encounter this bug. Firstly, the bottom navigation bar shows on any narrow viewport regardless of device type, meaning that keyboard-based navigation is degraded if I happen to be using Modrinth in a smaller window. Secondly, while I haven't used such accessibility tools on my phone, I'd imagine tools such as TalkBack would rely on the accessibility tree being representative of the visual state of the app to accurately give audio feedback.

Finally, I am the kind of mad person who would plug a USB keyboard into their phone just for fun, which would lead to me being affected by this issue :sweat_smile:

modrinth/code#1624 was a similar bug with the old bottom navigation bar, although it arguably hindered usage more than this bug does.