Accessibility in "Flex Dark mode"

[flex-interactions-pilot]

Hi!
I have been reported some accessibility colours of the dark mode in Flex.
Therefore I will need to do some tweaks to it.
I am wondering if this is somethings that needs to be updated in some sort of library?

An example is:

Thanks!
Isabela

[nkrantz]

Hi @flex-interactions-pilot (Isabela)! Could you give me some more information about where you're getting the above Buttons? Are those screenshots from design or from code? I'm just trying to understand where those styles are coming from, because they aren't the colors we use for our Dark Mode Buttons. Check out this storybook for all of our Button designs in light mode and dark mode. You'll see that the Button text color stays the same in dark mode -- we do regular color contrast testing on all of our components and tokens so you can be sure that any components you use out-of-the-box pass accessibility standards!

Happy to help investigate why your Button styles are off if you pulled those screenshots from code and you're using our Buttons without making any style changes. Let me know!

[nkrantz]

If you could share a reproduction in a CodeSandbox, that would be helpful as well.

[flex-interactions-pilot]

Thanks @nkrantz
What I shared is the current behaviour vs what I was proposing.
Now that I see your comment it might be worth it to get in touch with the engineers and see what is happening there, because it looks like that (black typo) in all flex.
This is the doc that engineers share with us: https://docs.google.com/document/d/1fSejXe6fb4D87vTWkECVmngFlo5dgv_zY_-YwA9A0q4/edit#heading=h.1zhnrgrwn7uj . There we have all the issues that have been reported to us.
Thanks!

[loreina]

Hey Isabela! Could you ask one of your engineers to create a CodeSandbox so our team can investigate the issue further? Alternatively, feel free to sign up for our office hours with an engineer so we can debug in real time.

[arpitbatra123]

Hey @loreina. Arpit this side. I was the one who reported the original issue. I dug into the code a bit, and found out that the a11y issues that we've reported uses a Button component implementation that is a button from material-ui under the hood. We could, of course, replace the internal Button component usage with the Paste button which could fix this from the get-go but it could have downstream implications as the internal Button component is used in multiple places.

The good thing about the issues that I've reported is that the styles supports overrides using values from paste tokens, so here are 2 ways we could go ahead and solve the issue:

1. Modify styles of the Button component, to make sure the colors are tokens are from Paste and thus has no a11y issue
2. Override styles only for the Buttons we've discovered that have the a11y issue, so that our solution is scoped down and does not have any additional effects.

[gloriliale]

Hi @arpitbatra123! Thanks for letting us know what the issue was, and for the update on your next steps. Let us know if there's anything else we can do to help!