fix(a11y): fix forced colors for file upload button

[gavinbarron]

Closes #3109

PR Type

• Bugfix

Description of the changes

Adds forced-colors styles to ensure that the correct colors are applied when high contrast modes are selected

PR checklist

• Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• Stories have been added and existing stories have been tested
• Added appropriate documentation. Docs PR:

• Accessibility tested and approved
• License header has been added to all new source files (yarn setLicense)
• Contains NO breaking changes

Other information

[gavinbarron]

@Raisul123 I believe that this fixes the high contrast mode issue with the file upload button

[github-actions]

📖 The updated storybook is available here

[github-actions]

📖 The updated storybook is available here

[github-actions]

📖 The updated storybook is available here

[github-actions]

📖 The updated storybook is available here

[Raisul123]

Hi @gavinbarron ,
Verified the issue on above "The updated storybook is available here" URL,
and observe that issue is still repro, Upload files button is not adopting Aquatic theme as per guideline.
Upload file button visually appeared as selected text.

PFA

Guideline:

[gavinbarron]

@Raisul123 this follows the implementation of the fluent-button as seen here: https://fluent-components.azurewebsites.net/?path=/docs/components-button--button as you should see that implementation uses different colors and we simply are being consistent with that implementation.

[github-actions]

📖 The updated storybook is available here

[gavinbarron]

@Raisul123 can you offer any insight as to why the fluent-button that uses colors from the forced colors palette does not provide an acceptable solution?

I suspect that I might have to mark this as A11yExternal as the colors that are being show here are the ones from the fluent-button.

[github-actions]

📖 The updated storybook is available here

[Mnickii]

@vagpt copying you here , related to PR #3139

[github-actions]

📖 The updated storybook is available here

[github-actions]

📖 The updated storybook is available here

[vagpt]

Hi @Mnickii and @gavinbarron,

This issue is still repro on the updated URL as of now it is looks like a selected text and we have seen this behavior at Fluent side as well so could you please suggest us whether do we need to follow the external process and route this bug to Fluent team or not?

Snippet:

[gavinbarron]

Here we can see that these buttons follow the same colors in "Aquatic", given that these colors are applied in forced colors this behavior holds for "Desert", "Dusk", and "Night Sky".

The fluent web component shows a repro here: https://fluent-components.azurewebsites.net/?path=/docs/components-button--button.

Please route this issue to the fluent team as we're consistent with their implementation.

[github-actions]

📖 The updated storybook is available here

[github-actions]

Package	Line Rate	Branch Rate	Complexity	Health
mgt-components.src.components	86%	75%	0	✔
mgt-components.src.components.mgt-contact	68%	83%	0	➖
mgt-components.src.components.mgt-file	62%	100%	0	➖
mgt-components.src.components.mgt-file-list	46%	100%	0	❌
mgt-components.src.components.mgt-file-list.mgt-file-upload	49%	86%	0	❌
mgt-components.src.components.mgt-get	22%	100%	0	❌
mgt-components.src.components.mgt-messages	68%	100%	0	➖
mgt-components.src.components.mgt-organization	47%	100%	0	❌
mgt-components.src.components.mgt-person	82%	100%	0	✔
mgt-components.src.components.mgt-person-card	77%	49%	0	✔
mgt-components.src.components.mgt-picker	80%	100%	0	✔
mgt-components.src.components.mgt-profile	40%	100%	0	❌
mgt-components.src.components.mgt-tasks-base	87%	100%	0	✔
mgt-components.src.components.mgt-theme-toggle	100%	100%	0	✔
mgt-components.src.components.mgt-todo	79%	100%	0	✔
mgt-components.src.components.sub-components.mgt-flyout	78%	53%	0	✔
mgt-components.src.components.sub-components.mgt-spinner	100%	100%	0	✔
mgt-components.src.graph	38%	78%	0	❌
mgt-components.src.styles	92%	80%	0	✔
mgt-components.src.utils	79%	27%	0	✔
mgt-element.dist.es6.components.src.components	72%	73%	0	➖
mgt-element.dist.es6.mock.src.mock	91%	77%	0	✔
mgt-element.dist.es6.providers.src.providers	85%	76%	0	✔
mgt-element.dist.es6.src	91%	80%	0	✔
mgt-element.dist.es6.utils.src.utils	68%	71%	0	➖
mgt-element.src	93%	40%	0	✔
mgt-element.src.components	78%	100%	0	✔
mgt-element.src.mock	81%	56%	0	✔
mgt-element.src.providers	84%	100%	0	✔
mgt-element.src.utils	72%	91%	0	➖
Summary	67% (14551 / 21559)	74% (523 / 703)	0	➖

[github-actions]

📖 The updated storybook is available here