Library

React / v8 (@fluentui/react)

System Info

OS: Windows 11 and Windows 10\
Browsers: 
- Microsoft Edge Version 103.0.1264.37 (Official build) (64-bit)
- Google Chrome Version 103.0.5060.53 (Official Build) (64-bit)

Are you reporting Accessibility issue?

yes

Reproduction

https://codepen.io/katiearriagam/pen/PoQMbpw

Bug Description

Actual Behavior

In Chrome, hovering over the button does not change the background color nor text color. Similar issues are found on activating the button, toggling, etc. The screenshot below shows the button when hovered.

Expected Behavior

When hovering, the button should change background color. See the screenshot below. It shows the behavior in Edge which is correct.

One theory is that it might have to do with incorrect media queries. However, at a first glance, it looks like Fluent is doing the right thing by using the forced colors media query. I haven't found whether this is a regression on Fluent code. For an example of high contrast media queries (legacy vs. forced colors), see: https://codepen.io/katiearriagam/pen/ZErgpeb

Logs

No response

Requested priority

High

Products/sites affected

Office Online

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.