Add focus-visible outline for checkboxes and radio buttons

[PVince81]

To make keyboard navigation visible in forms.
When clicking with the mouse it doesn't appear (it's the magic of :focus-visible instead of :focus)

Ref https://www.w3.org/WAI/WCAG21/quickref/#focus-visible

This is how it looks like in this PR using the outline style and tabbing with the keyboard:

Without this it is almost impossible to find out what checkbox or radio button is currently focussed.

Tested with the settings pages and in the talk app.

@nextcloud/designers

[PVince81]

need to test more locations

• BUG: adjust outline offset for lonely checkboxes (file list):

• TODO: action checkbox needs smaller outline offset (might need fixing in nextcloud-vue):

or remove outline completely there as we already have the left side blue indicator

[PVince81]

adjusted files checkboxes specifically:

[PVince81]

I wonder if we should also add such box around buttons, only for keyboard navigation.
Would you know which of these elements is currently focussed ?

(to be fixed separately)

[skjnldsv]

Yes please!! ❤️
I think we can tune it a bit so it's a tad more pleasant (rounded borders, etc etc)

[PVince81]

seems we can't consistently add rounded borders to outlines: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius

I don't want to make this a real border as it will mess up with the layout in many places

[skjnldsv]

I don't want to make this a real border as it will mess up with the layout in many places

nonono, definitely! It needs to stay as floating as default html is! :)
If we can't at least improve the design a bit, let's leave it like that!

[PVince81]

I'm mostly worried about triggering additional work for every app developer related to checkboxes if we merge this.
Not sure if it's too late already or not to do so.

[skjnldsv]

I'm mostly worried about triggering additional work for every app developer related to checkboxes

What extra work do you have in mind?
I think this will just dispatch and apply to all apps silently? No? Do we need to do anything else?

[PVince81]

I predict that it won't always look good depending how checkboxes are used in apps, so tweaks by app devs will be needed.
In this PR I already had to tweak some of the file list parts
Also see how it affects the outline around the ActionCheckbox, which means we'll have to adjust that one as well.

[PVince81]

since we're now at the beginning of 22 I think we could merge this.

it should leave enough time for app developers to adjust in case this causes visual glitches

[marcoambrosini]

I think that the focus outline should be --color-main-text, at least that's what was decided for buttons.

[PVince81]

with --color-main-text now:

@ma12-co