[Bug]: Toast action button color contrast

[gouttierre]

Library

React Components / v9 (@fluentui/react-components)

System Info

n/a

Are you reporting Accessibility issue?

yes

Reproduction

https://uifabric.visualstudio.com/iss/_workitems/edit/10218

Bug Description

Actual Behavior

The current action button in toast is the transparent button variant set to the Brand Foreground link color. This brand foreground link color doesn't pass accessibility (3:1) against the primary text token in the Loop brand and possibly other brand colors.

Expected Behavior

The solution is to change the button from transparent button to default secondary button at the small size. We also need to investigate all brand link colors against foreground 1 to make sure they pass 3:1.

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[gouttierre]

@tudorpopams Fyi on a new item for backlog review.

[tudorpopams]

@ling1726 I just assigned this to your team. Please include it in your next planning session.

[george-cz]

Hi @gouttierre,

the Toast itself doesn't really have any Action button. We are using a Link component in our docs as action button, but you can use anything you'd like, including a Button component.

Should this ticket be about updating the docs?

[miroslavstastny]

This is not Toast specific. The stories render Link component on the default background. The link foreground is specific to a brand ramp used. cc @redongreen

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!