[MGTP-file-list- Property -File list upload]: ‘Upload File’ Button is not adopting Aquatic/Desert contrast theme.

[Raisul123]

Test Environment: OS Build: Windows 11  Version: 24H2 (OS Build 26058.1400)  Browser: Edge dev  Browser Version 123.0.2400.1 (Official build) dev (64-bit) URL: Overview - Docs ⋅ Storybook (mgt.dev)

Pre-requisite: Turn on high contrast aquatic mode from system setting-> Accessibility-> Contrast theme>Aquatic and desert

Repro Steps:

1. Open the above URL
2. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
3. Navigate to the ‘MGTP-file-list’ and activate it.
4. Navigate to the ‘Property’ and activate it.
5. Navigate to the ‘"File list upload " and activate it.
6. Navigate to ‘Upload File’ using tab key.
7. Verify the issue.

Actual Result: ‘Upload File’ Button is not adopting Aquatic/Desert contrast theme.

Expected Result: ‘Upload File’ Button should adopt Aquatic/Desert contrast theme.

Observation: issue repro throughout application

User Impact: When any 'control' is not adopting 'Aquatic mode' theme, it will be difficult for users having low vision to navigate easily to the desired element and access or understand the purpose of control.

“ Have feedback on bugs logged, please tag bug as “A11yRCA“ and add your feedback in the comment section. “

Attachments:

Expected behavior of Button.

[vagpt]

Hi @gavinbarron

We have added comment in its PR #3139.

[vagpt]

Hi @gavinbarron,

We have routed this bug to Fluent team and we will provide the update here as soon as we get from them.

[Raisul123]

Please refer to the comment from Fluent UI team: The buttons are showing up correctly when contrast themes are active on the linked doc site. This is a screenshot with the Aquatic theme, showing the standard button with normal button styling, and the primary button with visually emphasized button styling. Both use the Contrast Theme's own colors:

Reference Fluent Bug ID: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/15406

[gavinbarron]

@Raisul123 you're confusing the Fluent team with the Fluent Web Components team, they are separate.

Using the Fluent Web Components documentation site you can see the behavior reported: https://learn.microsoft.com/en-us/fluent-ui/web-components/components/button?pivots=typescript Desert Aquatic

Now all that said the Fluent Web Components will be moving to align to the Fluent2 colors for high contrast modes with their next major version

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

This issue has been automatically marked as stale because it has been 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.