Account dropdown accessibility: Use arrow keys to navigate dropdown

[johnrozan]

Feature Request
As a peoplemover user with a disability
I would like to navigate the account dropdown with arrow keys
so that I have a consistent accessible dropdown experience across peoplemover

The W3C WAI documentation says to use arrow keys to navigate items within a menu bar item or drop-down list.

Press the 'Tab' key to move through the elements on the page. You can press 'Shift-Tab' to go backwards.
To move within elements such as drop-down lists and menu bars, press the arrow keys.

Acceptance Criteria
Given I tab to account dropdown
When I open dropdown with my keyboard
Then I can navigate the dropdown with arrow keys

Accessibility Criteria
Text and background color meets a minimum color contrast ratio of 4.5:1
All non-text content (e.g. images, icon) has alt text
Web page includes appropriate headings to communicate structure/hierarchy (h1>h2>h3)
All functionality is available to a keyboard
Focus styles are highly visible
Tab order is logical and aligns with the visual order
Voice over is understandable and logical
Aria labels are added to elements with no visible text
Decorative elements (e.g. non-informative icons) are hidden from screen readers
Form fields have appropriately coded labels that are visible during input
Links are visually identifiable and have a clear focus and active state
Notes
Please provide notes on this feature if applicable.