Accessibility: Channel menu doesn't follow standard accessible keyboard behavior

[mattermod]

Steps to reproduce

• Tab to the channel menu button (channel name dropdown button at the top of the channel)
• Press ENTER or SPACE, the menu should open
• Press DOWN or UP to traverse through the menu items

Observed

• Pressing DOWN or UP doesn't seem to do anything
• TAB does switch focus, but that’s not expected (see below)

Expected

• When a menu opens, the keyboard focus is placed on the first item
• DOWN should move the focus to the next menu item, wrapping to the first item when it reaches the end
• UP should move the focus to the previous menu item, wrapping from the first item to the last
• TAB and SHIFT+TAB do not move focus among items within the menu, but should move to the next/previous tabbable element outside the menu
• When a menu item is focused, ENTER executes the menu item and closes the menu
• RIGHT key:
  • When focus is on a menu item that has a submenu, RIGHT opens the submenu and places focus on its first item
• LEFT key:
  • When focused within a submenu, LEFT closes the submenu and places focus on the parent menu item that the submenu originated from
• ESC closes the menu and returns focus to the original trigger that opened the menu

Note: The channel options menu that is opened from a channel item in the LHS appears to follow these guidelines properly.

Reference

https://www.w3.org/WAI/ARIA/apg/patterns/menubar/

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-55276

[ahmadJT]

@amyblais Please can I work on this issue?