[BITV] 9.1.4.1/3.1 - Styling menubar - active contrast

[AndyScherzinger]

For many elements like "B" and "I", selected styles are visually marked by a pale blue background (1.5:1 to white) and a change of text color (black to blue, 2.2:1). Both remain below the contrast difference of 3:1 that is needed to indicate the state visually. (2)

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-45ae33ca9f-v3-n1

• 9.1.4.1/10.1 - https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-45ae33ca9f-v10-n1

[juliusknorr]

@jancborchardt I remember we had discussed the current style, but to match the constrast we'd need to use rather black as the color for the active indicator.

Shall we just switch to the secondary style as the active indicator or would you have any other suggestion?

For comparison the NcButton component, but they don't have dedicated active states

[AndyScherzinger]

@jancborchardt what do you think about #3860 (comment) - pending decision is a blocker for resolving the issue by the devs. However contrast is too low. So everything works here except secondary style.

[jancborchardt]

Shall we just switch to the secondary style as the active indicator or would you have any other suggestion?

Yes, that sounds the most reasonable and consistent.

[AndyScherzinger]

Yes, that sounds the most reasonable and consistent.

@jancborchardt So everything works here except secondary style. So that can't be used...

[jancborchardt]

@AndyScherzinger Why does it not work? The contrast as used for the secondary button is even triple-A compliant:

[JuliaKirschenheuter]

@AndyScherzinger Why does it not work? The contrast as used for the secondary button is even triple-A compliant:

@jancborchardt color is absolutely ok. But the background-color to the white background is not ok ;(
Reference: nextcloud/server#36948
How could we move with it?

And which possibility do we have for the dark mode?

[jancborchardt]

Then we either need to use the primary style for highlighting (which might be a bit much), or we do it again like we had some time before with the small dot below the active elements. @juliushaertl do we still have CSS for that by any chance?

And if you know what I mean, do you have a preference? I think the version with the dot below the active icon probably looks a bit cleaner.

[juliusknorr]

I would prefer the primary then, as the dot is not very common among other editing tools and I think we removed it in the past because it was not easy to discover and looked more like a notification.

I've also looked at other tools and noticed that except apple, all seem to stick to a light background with doesn't match contrast requirements.

Could we come up with a global definition of how active style of a button or element is indicated? The current style is also used in other places or there are other parts where the contrast doesn't match in a similar way:

• Improve NcCheckboxRadioSwitch and use for NcAppSidebarTabs nextcloud-libraries/nextcloud-vue#3945
• App navigation active style (e.g. talk/mail) fix: adjust active element visibility in nclistitem nextcloud-libraries/nextcloud-vue#4158
• App content list (e.g. mail messages)

[jancborchardt]

@juliushaertl you're right, for active app nav and app content list we already are switching to primary style as per @JuliaKirschenheuter, then we should indeed do it here too, and for any other active style.

[JuliaKirschenheuter]

@jancborchardt ok, does it means that all active elements like

would have styles from primary (button), like

right?

Another alternative would be to use high contrast border. What would you prefer?

[jancborchardt]

@JuliaKirschenheuter yes, we should use primary style as indicator for active items. This is what e.g. iOS Notes does as well, as @juliushaertl mentioned.

---

Additionally but separately, we need to fix our secondary button style as it's not accessible.

If we look at Material Design as reference, they have:
https://m3.material.io/components/all-buttons

• 2 Filled button: our primary
• 3 Filled tonal button: our secondary – so theirs is not accessible?
• 4 Outlined button: We could move our secondary to this?
• 5/6 Text/icon button: Our tertiary

@nextcloud/designers what do you think? I'd say just moving to outline style for secondary button is simplest and safest.

[JuliaKirschenheuter]

• 3 Filled tonal button: our secondary – so theirs is not accessible?

If i understood @michaelnissenbaum correct: it depends on a context. An active button have to have min. 3:1 contrast. In which cases are we using our secondary buttons?

If we would use "4 Outlined button" as secondary button - that would be accessible, yes.

[JuliaKirschenheuter]

by the way, Material Design is not immediately accessible.
Here is a same problem

as was reported in our issue: nextcloud/server#36947

[jancborchardt]

Yep exactly. So we should move our secondary button from tonal to outlined, so that when we use it, it is accessible. :)

[juliusknorr]

As mentioned in chat outline is not very clear to differentiate then to the focus state.

@jancborchardt I think we need the design team here to jump in and bring up mockups as clear definition for the following buttons adding additional states.

Might be enough to define those for tertiary buttons for the use cases I know of.

States we have

Normal

Disabled

Focus

States we'd need definition

• Active
• Active focus

References of existing usages of this case

Text

Collabora

AppNavigationItem (not a button but should probably use a similar style)

[JuliaKirschenheuter]

Suggestion for hover (like focus state)

Hover

[JuliaKirschenheuter]

https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

[luka-nextcloud]

Do we have final decision and a summary of it here?

[juliusknorr]

Still up for discussion, let's wait for feedback from designers on this one.

[JuliaKirschenheuter]

this is done

[juliusknorr]

@JuliaKirschenheuter We would still need to switch to a different active style, right? We can take care of that using nextcloud-libraries/nextcloud-vue#4344, but maybe you can quickly confirm that this is required.

[susnux]

@JuliaKirschenheuter is this fixed? I thought only the focus issues was solved, what about the active state?