User menu a11y changes to allow use of spacebar, escape key and arrows to navigate

[caesar2164]

@talbs, @adampalay - Here's another A11Y PR for you guys to check.

In short, this makes the user menu easier to use with the keyboard:

• space when focused on arrow opens and closes menu
• escape when menu open closes the menu
• up and down arrow keys navigates between menu items

[caesar2164]

added roles for a11y

[talbs]

@caesar2164, thanks for the work you've put together.

In general all of the new roles, attributes, and UI behavior changes look good. As we chatted about over HipChat, let's try syncing up tabbing in the expanded dropdown menu so that it matches the scoped navigation you've set up with the arrow up/down events. So to recap, once focused and selected (through enter, click, or spacebar), the dropdown menu should lock a user's actions to that menu until that locked focus is escaped (escape button, click, etc.)

We can have TPG confirm that this consistency is the right way to go once they review to confirm fixes.

[caesar2164]

@talbs & @adampalay - here's the Tab and Shift + Tab changes

[adampalay]

the thing about children().children('a'): I think it makes sense to make this more generalized: follow the lead here and make a focusableElementsString for dropdowns. Or just do find('a') (I can't think of other dropdown elements we'd want to focus on). It may be overkill for this instance, but it's going to be helpful if a) we alter the html slightly, and b) if other people want to make their dropdowns accessible, but don't have the exact ul>li>a structure we have. I know @jmclaus was asking about this PR earlier today.

[jzoldak]

@caesar2164 regarding the acceptance test failure, on commit 55a48ec. We have refactored and improved a lot of the helper methods for the tests over the past couple weeks. Please rebase so they will run more reliably.

[caesar2164]

@jzoldak - thanks, just rebased and started a manual test so hopefully this can get wrapped up before @adampalay and @talbs go home today.

@adampalay - I think your issue is dealt with now that I only catch the tab and shift-tab key presses when the menu is open.

[adampalay]

it'll be much cleaner if you replaced line 18 with
if ( event.which == 32) { dropdownMenuToggle.click(); event.preventDefault(); }

[caesar2164]

I guess I could, but that code would have to stay inside the catchKeyPress function anyway as I want to catch spacebar key presses inside the open menu as well...

[adampalay]

The only keypress you're worried about when dropdownMenuToggle is in focus is the spacebar. Since focus is restricted to the dropdown once it is opened, when the dropdown is open, focus will never be on the dropdownMenuToggle, so we don't need to define any special rules for it

[adampalay]

👍

[talbs]

@caesar2164, things look good to me as well. Thanks for the fixes.

👍

[sarina]

Giulio! Dude!!! Merging is a two-step process - click the merge button, wait a few seconds, then click the Delete branch button! Thanks :)

[caesar2164]

JEEZ! I clicked merge, then I had to go talk to someone!!! @sarina - you're gonna burst an artery being so strung out! ;)

[sarina]

always i got my 👀 on you...