To achieve universal hover, focus and active styling for most clickable/focusable elements through a single helper component.
This allows developers to quickly add our uniform styles to any custom component.
It's implemented in all of our components (or at least it should be - might be missing some but I'll fix those later on if something should come up).
The ideas behind the design & UX
These changes are made in cooperation with @filipjakobsen. Here are his words on the design and UX.
The purpose of the AccessibleFocus design is three-fold:
The accessibleFocus style means that when people increase contrast or change system background color with Theming, in the future, we can make sure the focus-styling is still very visible.
The accessibleFocus style means we maintain the styling of focusable elements in one place, so we — with a few exceptions — can control the focus styling in one place and keep it consistent across the system
The accessibleFocus style also means that we can ensure a very visible focus styling across all browsers, avoiding doubt or ambiguity in how the styling will look in different browsers.
The styling is meant to fit the general styling of the system, while still being conspicuous enough that ambiguity of what's in focus is not a problem.
The dot provides, in addition to the styled box, a very clear and 100%-contrast interface element which can easily be recognised even on things that already stand out in some other way through their styling.