User menu button lacks keyboard operability

[henrycatalinismith]

Steps to reproduce

1. Log in.
2. Attempt to focus the user menu with the tab key.

Expected outcome

The user menu should be keyboard operable as per WCAG success criterion 2.1.1.

Actual outcome

The user menu isn't keyboard operable as it's not possible to move keyboard focus onto it using the the tab key. In the following GIF, the tab keypress when the logo is focused should focus the user menu. Instead focus skips over it to the signup link.

Severity

The success criterion covering this issue is WCAG conformance level A – the minimum level. Most organizations aim for a conformance level of AA, which includes all level A criteria. This issue's severity is relatively high as it completely blocks all access to the affected functionality.

Recommendation

Use a <button> element instead of a <div> for the clickable element so that it'll be able to receive keyboard focus by default.