A11y: Mobile nav menu items should be navigable via keyboard up and down keys

[bacitracin]

Describe the task

When the screen is narrower and the mobile nav hamburger button pops up, it is not reachable or operable via keyboard navigation. Since it's not reachable by keyboard, screenreaders are affected as well.

This ticket is the SECOND part of making the mobile nav more accessible. This ticket must be completed first.

1. You should be able to use UP and DOWN arrow keys to navigate the menu items.
2. Focus state should be visible
3. Pressing ENTER or SPACE will choose the option. The menu should close and you'll go to that page.

Resources

Total expected behavior of the menu:
(First ticket):
You should be able to TAB to the hamburger menu, press ENTER or SPACE and the dropdown opens.

(THIS ticket)
Then you can use the UP or DOWN arrow keys to navigate the items (with focus state visible). Press ENTER or SPACE to choose one of the items. The menu should close and you'll go to that page.

(Third ticket)
While the dropdown is open pressing ESC or TAB will close the dropdown and focus will go back to the hamburger button. The page will not change.

See this example for most of the desired behavior (except for the behavior while the dropdown is open and pressing TAB.) https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/#mythical-page-content

[github-actions]

This issue has been marked as stale because it has been open for 30 days with no activity.