fix(a11y): contrast for active menubar buttons

[max-nextcloud]

📝 Summary

• Resolves: [BITV] 9.1.4.1/3.1 - Styling menubar - For many elements like "B" and "I", selected styles are visually marked by a pale blue background (1,2:1 to white) and remain below the contrast ratio of 3:1 that is needed to indicate the state visually. (2) #5065

🖼️ Screenshots

🏚️ Before	🏡 After

Dropdown menus (headings and callouts) are still low contrast:

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• we do not test UI look yet.
• documentation is not required.

[juliushaertl]

Thinking more about the dropdown, maybe it is already fine like it is as the primary trigger button already indicates the state?

[max-nextcloud]

Thinking more about the dropdown, maybe it is already fine like it is as the primary trigger button already indicates the state?

I'd be happy to merge this as is as a start and then discuss how to continue.

[juliushaertl]

• On light mode the color does not seem to fit.
• And I'm wondering if we shall give those a gap of 2px to make it look a bit nicer when two besides each other are active?

[szaimen]

• On light mode the color does not seem to fit.

Changing

text/src/components/Menu/ActionEntry.scss

Line 47 in e1afbfe

fill: var(--color-main-text);

to fill: var(--color-primary-element-text) should most likely fix it

[max-nextcloud]

I fixed the light colors by removing the customized styling and relying on the defaults:

dark	light

[max-nextcloud]

And I'm wondering if we shall give those a gap of 2px to make it look a bit nicer when two besides each other are active?

[szaimen]

LGTM from the screenshots but didnt test.

Maybe we should loop in Frank because it is kind of a drastic design change again?

[max-nextcloud]

Maybe we should loop in Frank because it is kind of a drastic design change again?

Let's check with @jancborchardt then.

[jancborchardt]

We do this the same in Office already, so yep while it is very present, accessibility- and consistency-wise this is a good solution. :)

[juliushaertl]

Cypress failures seem related

[max-nextcloud]

Cypress failures seem related

I think the failure on runner 3 actually is related.

Due to the larger spacing between buttons the more button is overlapped.

Maybe leave out the spacing when on mobile?

[max-nextcloud]

Removed the padding on mobile views (<768 according to texts definition).

Bildschirmaufzeichnung.vom.21.12.2023.08.11.03.webm

[max-nextcloud]

/backport to stable28

[JuliaKirschenheuter]

looks good, thanks a lot!

[max-nextcloud]

Cypress tests are still failing and the failure seems to be related.