User menu button lacks keyboard operability
henrycatalinismith opened this issue · comments
Steps to reproduce
- Log in.
- 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.