307 add visual focus to all clickable elements

[pmarsh-scottlogic]

closes #307

I've poked around the website and most of it is quite keyboard friendly. I've gone and fixed the few parts which were not visibly focusable.

changes

• makes the focus on collapsible control sections more visible (white outline)
• makes the focus on the defence mechanism switches visible (white outline)

focussed collapsible control section

before

after

focussed defence mechanism switch

before

after

[gsproston-scottlogic]

Highlighting on the defence sliders is very nice and a long time coming, nice work! I am seeing a couple of visual issues though:

The line between the section header and content should be straight, but it's rounded at the sides now:

Not super critical but I think it'd be nice if we can have the same styling for the defences and the section headers. At the mo the highlight on the defence only really covers the words but it'd be nice if it covers the surrounding box as well:

[chriswilty]

Highlighting on the defence sliders is very nice and a long time coming, nice work! I am seeing a couple of visual issues though:

The line between the section header and content should be straight, but it's rounded at the sides now:

Not super critical but I think it'd be nice if we can have the same styling for the defences and the section headers. At the mo the highlight on the defence only really covers the words but it'd be nice if it covers the surrounding box as well:

We have bigger problems than just that:

Also will fix in my changes.

[chriswilty]

@gsproston-scottlogic Commit pushed for tidying up styles, can we get your eyes on this for a final review? Feel free to ask questions on anything you're unsure about.

[gsproston-scottlogic]

@gsproston-scottlogic Commit pushed for tidying up styles, can we get your eyes on this for a final review? Feel free to ask questions on anything you're unsure about.

Looks good! just a couple of visual quirks, though neither are particularly critical:

The config sections don't have rounded corners anymore:

The highlight for the config heading and defence mechanism looks different, I'd expect these to look the same:

[chriswilty]

@gsproston-scottlogic

The line between the section header and content should be straight, but it's rounded at the sides now

Ah, I was a bit confused by this comment, and took the rounded corners off everything!

Does this look weird though? Can also have square corners on the focus indicator if you prefer.

The highlight for the config heading and defence mechanism looks different, I'd expect these to look the same

Weird, that's not what I see on my browser (firefox developer):

What browser are you on? Hopefully back properly tomorrow and can tidy all this up...

[gsproston-scottlogic]

@gsproston-scottlogic

The line between the section header and content should be straight, but it's rounded at the sides now

Ah, I was a bit confused by this comment, and took the rounded corners off everything!

Does this look weird though? Can also have square corners on the focus indicator if you prefer.

The highlight for the config heading and defence mechanism looks different, I'd expect these to look the same

Weird, that's not what I see on my browser (firefox developer):

What browser are you on? Hopefully back properly tomorrow and can tidy all this up...

Oh yeah that does look a bit odd :') maybe square corners on the focus indicator would be better.
Interesting that the hightlight is different for you, I'm on Edge. 🤔

[chriswilty]

@gsproston-scottlogic

Looks like outline-color: white on .control-collapsible-section-header was causing the thick white outline. We probably shouldn't define an outline outside of a :focus selector anyway, so the latest commit fixes that. Another look please?

[gsproston-scottlogic]

Looks amazing! 👍

[heatherlogan-scottlogic]

Looks great