1891645 - List within the Megalist includes both the arrow navigation and Tab navigation for some controls

Status: RESOLVED WONTFIX

(Toolkit :: Form Autofill, defect, P3)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Focus order screenshot from the Accessibility Inspector with list marked as 12 and other items being 13-16

Setup:

1. Enable the Megalist by setting browser.megalist.enabled=true in about:config
2. Open a Bookmarks sidebar by pressing ctrl/cmd+B, then change the sidebar switcher from Bookmarks to Passwords (megalist)

Megalist list includes both the arrow navigation and Tab navigation for some controls this would create a more cumbersome keyboard navigation for keyboard-only users, because there would be duplicated tab stops for the URLs and ... buttons when they're already focusable with up/down arrows within the list.

Expected keyboard behavior:

1. [done] From the search field, press Tab for the focus to move to the entire list of cards. The list container shows the keyboard focus indication (outline)
2. [done] Press Down arrow to move the focus to the next card, i.e. from Addresses to Payment methods.
   1. Similar to the address bar navigation
   2. When an entry is present (i.e. a saved password), the Up/Down arrows would move the focus between the focusable elements like hyperlinks and cards.
3. [done] Show … when the card is focused (with arrow navigation)
4. Include the ... button into the context menu of the arrow focusable element
5. [to be done] Pressing Tab would move the focus out of the list (to the web content)
   1. [existent] Tab moves the focus to the ... of the focused (with arrows) card, then Tab moves the focus to the URL/... buttons etc. And only after passing all controls within the list, the focus moves out of the list to the web content
6. [optional] If/when we add multi-line inputs, we may need to add Ctrl+Down arrow to exit the entry field (and use aria-description string, aria-describedby or similar to provide a short hint to a screen reader user)
   1. We could/may always move Ctrl+Down/Up between any field (multi-line too)
7. [optional for efficiency] PageUp/PageDown to move between cards (Addresses, Payment methods, etc.)

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:serg, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Ryan Casey]

Please refer to this A11y spec for this bug: https://www.figma.com/design/usz3vFNmj4PlUURWk7aZIe/Autofill-%2B-credential-management?node-id=8706-264635&t=46XNexlZQQ5CxP82-1