User menu is not keyboard accessible

[muffinresearch]

The dropdown user menu needs to be keyboard accessible otherwise those links are completely obscured to anyone that can't use a mouse.

The username menu should be focusable, and when focused that should open the menu and make it possible to tab down through the links.

[muffinresearch]

@willdurand pointed out on irc that enter does open the drop-down, so this might be more a question of adding a focus style to the user button.

Would also be worth reviewing if there's any additional hinting we should be doing via aria attrs to provide additional hints to assistive tech.

[willdurand]

On Chrome, this is what I observe when I use tab:

[muffinresearch]

IIRC chrome adds a lot in terms of default focus styles - we may just need an explicit focus style added to fix making focus visible on FF (Also I'd be curious to know if we're turning any defaults off for FF in CSS that we shouldn't be). If you're using chrome to develop it would be recommended to switch to Firefox nightly to make sure you're seeing things the way a firefox user would since that's our primary audience.

[willdurand]

Chrome adds a browser style for *:focus, which uses outline. This is also what Bootstrap does. An easy fix would be to add such a rule to have a consistent focus style on all browsers.

[willdurand]

If you're using chrome to develop it would be recommended to switch to Firefox nightly to make sure you're seeing things the way a firefox user would since that's our primary audience.

I use Chrome, FF55 and FF Nightly.

[muffinresearch]

I've looked at this a bit more closely and the weird part about it, is the span seems to get focus after the button.

Adding an explicit :focus style to the button means you can see when the button is focused but as the span is focusable (no idea why) you also need to work around the span focus by adding tabindex="-1" so that after the button the search box (or the links in the menu if the menu was opened are the next things to focus on).

[muffinresearch]

QA notes:

Before the fix - you can't see the focus on the user button when tabbing to it when logged in. Also the span around the username can be focused (1 tab after focusing the button) which doesn't make any sense.

With the fix in play:

• First log in
• Use the keyboard to tab to the user button - it should have an outline.
• Pressing space or enter opens the menu (this was already the case)
• Pressing tab again focuses on the links inside the menu.

With the menu closed:

• Use the keyboard to tab to the user button
• Without opening the dropdown, pressing tab again should focus the search input.

I'm going to file another bug to make the search input focus styles more noticeable.

[muffinresearch]

I've filed a separate bug for the aria attributes: https://github.com/mozilla/addons/issues/10790

[vcarciu]

@muffinresearch : "More popular extensions", "Browse this collection", "More featured Themes" and "More trending extensions" are not focused while navigating with the keyboard. Also, the static panes which replaced the carousel are not highlighted when navigating with keyboard.

Please let me know if you want new issues or if we can track this here.

[vcarciu]

Verified as fixed. Logged another issue for the previous comment : mozilla/addons#10990