Contribution: Toolbar low and high contrast

[tw15egan]

@m-battelli commented on Fri Jan 03 2020

Brief description

I have designed a new pattern using standard components of the Carbon Design System (V10).
It is an useful pattern, easily standardable to be included in the Carbon library and easily customizable based on the use cases.
Essentially, the toolbar could be part of the widest range of products where it is necessary a main actions set ready to use and positionable in the most suitable way on the screen.
I have explored visually the low and high contrast versions for consistency with the rest of standard components.

White theme

Gray 10 theme

Gray 90 theme

Gray 100 theme

Use case
I have adopted this pattern to build and interact with diagram model.
This use case is available within Cloud Pak for Automation / Decisions.

---

@aagonzales commented on Thu Jan 09 2020

This is awesome! I only have one piece of feedback:

The dividers between sections should be a color instead of a cap, like the original toolbar.

[m-battelli]

Working on advanced toolbar with major number of actions.

[mjabbink]

@m-battelli the low contrast versions may have some color contrast ratio issues to solve to pass accessibility. The container itself probably fails on G10 and G90 theme above. Double check that the icons on the backgrounds have the right contrast to pass (in low contrast versions)

[aagonzales]

The low contrast is the as-is experience I believe for the existing toolbars. According to my understanding of non-text contrast rules the background only needs to be 3:1 contrast is there's no other indicator to determine where the interactive element is.

@mjabbink I'm bet you're thinking of the content switcher issue. To my understanding that didn't pass because without the background in non-selected items the label just looks like body text in the content switcher. However here in a the toolbar I think the icons stand on their own as established actions and don't need to a 3:1 contrast background. This would be same for elsewhere in the system that we use icons for a trigger, like overflow menu or tooltip.

That said I do think some of those colored icons on the G90 do look like they might fail contrast.

[mjabbink]

Yes. I guess if the container of the toolbar is not required to have the contrast then just the colored icons might have issues