Accessibility: make sure, that the focus of all interactive elements is consistent

[JuliaKirschenheuter]

This is an accessibility issue.

Some elements on the page have not the same focus styles. There are some examples:

Try to make sure, that all interactive elements have the same focus on a NC Vue level. It is important, that this styles have enough contrast + width.

[nfebe]

@nextcloud/designers Please, can you suggest a color for the focus? So that the focus color can be defined as a variable in nextcloud core css?

I have seen more use of

outline: 2px solid var(--color-main-text) !important;

Example : #2899

--color-main-text is darkish and I wonder if it matches the theme design. Even with the growing use, there are still places where different colors and border sizes are used for focus hence the need for us to pick a color and introduce two new scss variables for example --color-action-focus, --border-size-focus

[jancborchardt]

@fenn-cs so Airbnb for example uses black+white so it works on any background, any theme, even images:

This seems best, if possible?

[jancborchardt]

@marcoambrosini at least this is what I also remember you suggested? cc @nextcloud/designers too.

[nfebe]

@jancborchardt I think it's possible we just need a consensus so that we can enforce this going forward to ensure the needed consistency.

[nimishavijay]

Airbnb for example uses black+white so it works on any background, any theme, even images:

I agree! Suggestion: for the colors we use --color-main-background in light mode and dark mode (so #ffffff and #181818) so that it looks seamless in light and dark modes. I also noticed that the border radius for some of the elements is not consistent, it should be a border around the hover feedback. Example:

Also a point to note: The position of the elements should not shift (especially keep in mind because a double border is used here)

[nfebe]

I saw this and I think it looks great too. (Especially in the sense that the that shade of blue matches with Nextcloud theme color)

Thoughts for #ffffff and #006aa3 (the difference is replacing black with our --color-primary-element ???

[szaimen]

I would also say that using --color-primary-element as border-line looks much better. WDYT @jancborchardt @nimishavijay

[raimund-schluessler]

I would also say that using --color-primary-element as border-line looks much better. WDYT @jancborchardt @nimishavijay

The problem with --color-primary-element is that it is user defined and you cannot rely on it having enough contrast to #ffffff. --color-primary-default #0082c9 could be an option, though

[szaimen]

I think we now adjust the color if it should be too bright or dark: nextcloud/server#38159
Or is this not enough?

[marcoambrosini]

I think that the airbnb way with black and white always guarantees very high visibility and it's probably the best way to go.
To accomplish this without jumping content they add 2 box shadows. We could do the same with --color-main-text inner and --color-main-background outer