Adjust files favorite marker to fulfill A11Y contrast requirements

[susnux]

• Resolves: [BITV] 9.1.4.11/3.4 - The "Favorites" yellow star does not meet the contrast requirements for graphical informative elements. (2) #36972

Summary

Follow up on #38333

The current star color (yellow) does not work for accessibility as the contrast is too low on the default background color, we need at least a contrast of 3:1 but it only had 1.5:1. So the first part of this PR adjusts the star color to "gold" which works with --color-main-background on dark and bright color themes as well as with the hover background colors.

The second parts adjusts the favorite marker it self, as there are too many possible colors (folders = primary color, default icon = gray, preview images = random colors) the favorite marker is now placed with a slim border of 2px (circle) to get a consistent background for contrast (similar to the online status on avatar).

Screenshots

before	after

Second version of the PR:

Details

before	after

Fist version of the PR:

Details

The current color does not work on the default bright color theme as it does not provide a contrast of at least 3:1.

Screenshots

before	after

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Screenshots before/after for front-end changes

[nickvergessen]

For me the contrast to the normal file icons is not getting too low. I can barely see it.
Also not sure if we need 3:1 by default (AA) or only in high contrast (AAA)

[nickvergessen]

I think this is about 2 different things right?

1. The action in the drop down (always against white/dark background, can simply use the color of all other action icons)
2. The icon on top of the filetype icon or worse thumbnail in the files list.
   I'm not sure we can find a matching color for that that won't fail with any file type icon.
   So maybe we need to add a border on the icon like shown here:
   https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#figure-two-star-ratings
   Or we have to do something else, since the icon is now basically invisible:
   

[susnux]

Yes I tried to find a matching color, but I do not think one exist. Because the color of the default filetype icons (gray), primary color for folders (blue) and background color (white) do not allow any yellowish color with enough contrast.

The current "gold" color does only work for white and black (and some slight gray like the hover colors).

Thats why I now think adding a "border" around the favorite marker is the only working solution as it makes the color independent from the filetype and preview images.

[jancborchardt]

Seems good, some questions / feedback:

• I’d say it’s better to keep the star in the top right, as bottom right is where the status is usually on avatars. Having it on the top right makes it very clear it’s a filename with a star vs an avatar with a status.
• The star has a circle around it which looks a bit off. Can it just be a star-shaped thick transparent gap?
• Is the contrast 3:1 not about text elements? Graphic elements have different contrast requirements?

[susnux]

I’d say it’s better to keep the star in the top right, as bottom right is where the status is usually on avatars. Having it on the top right makes it very clear it’s a filename with a star vs an avatar with a status.

I chose the lower right over the top, because the filetype icons have spacial outline on the right top (e.g. the "corner").
But I am fine with every position :)

The star has a circle around it which looks a bit off. Can it just be a star-shaped thick transparent gap?

I can create a mockup for this.

Is the contrast 3:1 not about text elements? Graphic elements have different contrast requirements?

3:1 is for text AA level and graphic elements, for text AAA level 4.5:1. Especially if we want BITV we need 3:1 for graphical elements.

[nickvergessen]

From my POV the "gold" is so far off from being a shiny yellow start, that we could also just make it black. It's not attention driving anymore anyway.

[susnux]

From my POV the "gold" is so far off from being a shiny yellow start, that we could also just make it black. It's not attention driving anymore anyway.

@nickvergessen
I agree, but yellow on white does not work 😞 For 3:1 contrast only that "old gold" or more orange would work.
But instead of black I would use primary color, it is more eye catching, at least if not all files are folders (as folders are already colored primary).

---

@jancborchardt
Here are some alternatives which might be better:

screenshot	what
	Golden star with star shaped background
	Golden star with round background like the user status
	Primary star with round background like the user status
	Black outline with yellow star for more contrast

(My personal preference of those would be the primary star with round background)

But there is an other option which I kind of like: Removing the star from the thumbnail and move the "favorite" action from the files actions to be always the first action. This way the favorite marker is also a usable action:

[jancborchardt]

@susnux thanks! :) The first proposal looks by far best. The border around it should just be a bit rounded so it’s not so spiky.

And yes, it needs to be in the top right, as in the bottom right we have the status, and as @nickvergessen said the star is also used for Talk conversations which can have the status icon in the bottom right for 1on1 conversations.

[susnux]

@jancborchardt is this enough roundness?

If yes then it would look like this:

bright	dark

[nickvergessen]

I'd still heavily prefer the "Black outline with yellow star for more contrast" instead of that no color brown replacement making it not stand out anymore

[jancborchardt]

@susnux could be a bit more rounded off but looks good! :)

@nickvergessen the issue with the black border yellow filled is that it looks super close to just an empty black border star, which is what usually denotes non-favoriting.

[jancborchardt]

@susnux thanks! The inward parts were actually ok (now weirdly too rounded), it was mostly the tips which were too pointy. :)

[susnux]

@jancborchardt Ok 😃 without rounding the inner corners it looks like this:

[jancborchardt]

Looks good! :)

[susnux]

Looks good! :)

Thank you! Rebased and squashed the commits, ready for reviews 😃