Bug: Cannot activate menu items with keyboard

[kcarrandale]

Describe the bug You cannot activate the links/buttons in the admin area after tabbing to them.

To Reproduce Steps to reproduce the behavior:

1. Go to /admin/1/campaigns
2. Use the tab key to go to the user icon button or any of the admin menu items (Campaigns, People, Message Review, Tags, Settings, Phone Numbers, or Switch to texter) and press enter or space. (I have not tested all of the buttons/links in the main content, but it's possibly an issue there as well.)
3. The link/button doesn't activate.

Expected behavior The user should be able to activate links/buttons with just a keyboard. See WebAIM: Keyboard Accessibility for more information on specific behaviors depending on item type.

Screenshots N/A

Platform:

• OS: Windows 10
• Browser: Firefox
• Desktop
• Version 10.0

Additional context I'm new to this, so I'm not sure what's practical within React/Spoke, but possible fixes for this type of issue include:

• Coding all the menus as unordered lists of links within a nav element. This is the standard accessible format for menus; see Menu Structure for more information. I don't know if this is compatible with the way things are set up, however.
• Add the correct function to a keyboard event, not just onClick. More information: Keyboard-navigable JavaScript widgets. Right now there appears to be stuff happening with onKeyDown, but it isn't activating anything. (It seems to be removing the button animation when the user hits escape?)

This bug is kind of related to issue #1928, since it has to do with keyboard navigation in the admin area.

[arena]

this would be a really good improvement for many reasons

you mention the admin ui, but this also applies to the texter ui --- maybe nice to keep them separate in 3 "buckets" because fixing it everywhere is such a big project: global nav (e.g. the menu), the whole admin ui, the whole texter ui

[kcarrandale]

I agree! It definitely makes sense to divide it up like that. I was testing out admin stuff since the instance didn't have any active texting, but texter ui and global nav accessibility is probably slightly higher priority than admin. (Although we want disabled folks to be able to be admins, too!)