722 visual focus states improvement

[dhinrichs-scottlogic]

Description

Added focus styles to all interactive elements. For most it's the accent-border-colour, some additionally have a white border so that the focus is easier to spot. Outline is offset inwards or outwards for some elements to make it easier to see.

Screenshots

A few button examples with the new focus, check out the branch for a full view of all focus outlines.

Checklist

Have you done the following?

• [x] Linked the relevant Issue
• [ ] Added tests
• [x] Ensured the workflow steps are passing

[gsproston-scottlogic]

Looking good! I'm wondering if we need a different style for the outline on the 'x' on some of the modals. The colour is a bit similar to the background:

But then again these modal designs will change at some point, so might not be worth doing.

[dhinrichs-scottlogic]

Looking good! I'm wondering if we need a different style for the outline on the 'x' on some of the modals. The colour is a bit similar to the background:

But then again these modal designs will change at some point, so might not be worth doing.

That's a good point, and this is what I would suggest for an easy mid-term fix: Adding a white border on focus in addition to the turquoise outline:

[dhinrichs-scottlogic]

I just discovered focus-visible, which is exactly like focus, but better! Learning something new every day! Will update that and make the requested changes

[chriswilty]

@dhinrichs-scottlogic Did you want a rounded border on the dialog outline?

If so, border-radius 0.625rem on the dialog will achieve that.