Custom focus indicator is not accessible

Problem/Motivation

We've implemented behaviour that removes the default browser focus outline (search for outline: 0 for examples).

However, the alternative we implement to indicate keyboard focus states does not always pass accessibility guidelines. An example of this can be seen on the login button, both with the default Open Social colors as well as with custom brand colors.

The user login and create post forms are good examples of where such elements are used. The dropdown for contextual actions on activities and the "back to inbox" button in private messages are other interactive elements that need this change. There are probably more interactive elements not listed here.

Steps to reproduce

Proposed resolution

Finding different focus styles that fit within our current customisation abilities is very difficult. Therefor we propose to re-instate the default focus indicator. This isn't as pretty but is a lot clearer for people who use the keyboard to navigate Open Social.

Undo all removal of focus outlines on interact-able elements (e.g. buttons, links, dropdowns, etc.) and ensure the default browser focus is shown.

Remaining tasks

User interface changes

The default browser outline style is now shown when a user uses the keyboard to focus an interactable element. This styling does not respect platform branding.

API changes

Data model changes