search

microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
924 stars 287 forks source link

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

Open Raisul123 opened 4 months ago

Raisul123 commented 4 months ago

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:

Upload file button is not adopting HC theme

Expected behavior of Button. Aquatic - Guideline

vagpt commented 3 months ago

Hi @gavinbarron

We have added comment in its PR #3139.

vagpt commented 1 month ago

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 commented 1 month ago

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

image

gavinbarron commented 2 days ago

@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 image Aquatic image

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