-
Bug
-
Resolution: Unresolved
-
Normal
-
None
-
None
-
None
When pressing the Tab key to move the focus through elements on a page like /artist/create or /release/add, a bunch of invisible menu items in the header get focused, while visible elements get skipped. This makes the site harder to use for people who depend on keyboard navigation.
Here's the focus order that I see, starting from the top:
- MusicBrainz logo (as expected)
- /user/me (invisible, note that username is skipped)
- /account/applications (invisible)
- /user/me/subscriptions/artist (invisible)
- /logout (invisible)
- /user/me/collections (invisible, note that "My data" was skipped)
- /user/me/ratings (invisible)
- (additional invisible items in "My data" menu)
- search input (as expected)
- entity type menu (as expected)
- search button (as expected)
- /doc/About (invisible, note that "About us" was skipped)
- (additional items in "About us" menu)
- etc.
I think that the top-level items (username, "My data", "About us", etc.) should always be included in the focus order, and their menu items should only be included when the corresponding menu is expanded.
I'd expect this to just work automatically, but it seems like there are (at least) several reasons why it doesn't:
- The top-level items have tabindex="-1" set on them to take them out of the tab order.
- The invisible menu items are bizarrely shifted offscreen with a left: -10000px CSS rule instead of being hidden with display: none.