Tutorial note buttons lack visible focus indicators

[henrycatalinismith]

Steps to reproduce

1. Log in and open an assignment.
2. When the tutorial tooltip appears, try to focus the I understand button to dismiss it using only the keyboard.

Expected outcome

Interactive elements such as buttons should have a visible focus indicator as per WCAG success criterion 2.4.7. Not all people can use a pointer input device, so meeting this success criteria enables those people to interact with the app. Here's a GIF showing this happening on Malmö stad's website.

Actual outcome

There's no focus indicator on the tooltip's buttons so it's impossible for a keyboard-only user to determine when they receive focus.

Severity

The success criterion covering this issue is WCAG level AA – the middle level. This is the conformance level that most organizations aim for. The lack of a focus indicator effectively makes these buttons inoperable, making the tooltips permanent and potentially obscuring other UI components, so the severity of this one is high.

Recommendation

The hover state for this component could be easily reused as a focus indocator by changing the selector from &:hover to &:hover, &:focus.