[Bug]: Spinner component fails accessibility. Need to add Stroke Alpha 2, Modify Brand Stroke 2 high contrast values.

[redongreen]

Library

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

System Info

https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/components-spinner--default

Are you reporting Accessibility issue?

yes

Reproduction

https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/components-spinner--default

Bug Description

Context

Currently spinner component primary variant is not accessible in high contrast.

This is partially due to the fact that we never created a token to support the look and feel of our spinner spec. The spec originally instructed engineers to hard code a value in place.

Full HC audit can be found here; Figma link

To do

To fix the spinner, we need to add two new stroke tokens

Add new token

Add new token Neutral Stroke Alpha 2
Light theme: White 20% alpha
Dark theme: White 20% alpha
High contrast theme: hcCanvas #000000

Add new token Brand Stroke 2 Contrast
Light theme: Comm 140 #B4D6FA
Dark theme: Comm 50 #0E4775
High contrast theme: hcCanvas #000000

Update existing component

Ensure that we are following the updated token assignment. Link to component spec.

cc @daisygeng

Logs

https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/components-spinner--default

Requested priority

High

Products/sites affected

https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/components-spinner--default

Are you willing to submit a PR to fix?

no

Validations

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

[behowell]

@miroslavstastny can you help @tomi-msft with adding the new token? Thanks!

[redongreen]

I updated the ticket based on @miroslavstastny audit findings.

Usage conflict

Brand Stroke 2 is used as a track in spinner component; this requires a black color in high contrast.
Ex.

Brand Stroke 2 is also used as a stroke outline for the badge; this requires a white color in high contrast.
Ex.

Therefore, we will need a new token to provide brand tint color in light and dark theme while optimizing for the current high-contrast theme.

I propose that we add a new token Brand Stroke 2 Contrast