Fixing Panel's Overlay in high contrast mode

[aneeshack4]

Pull request checklist

• Addresses an existing issue: Fixes Panel: Overlay not transparent in high contrast mode #7095
• Include a change request file using $ npm run change

Description of changes

Fixing background color of overlay so that screen behind panel isn't hidden in HC mode when panel's open. This is what it looks like now with the overlay's background set to transparent. If I can improve this in any way, please let me know! I just took a shot at it with setting the overlay's background color to transparent.

Focus areas to test

The different high contrast modes on Edge (and Firefox too?)

Microsoft Reviewers: Open in CodeFlow

[Jahnp]

Tagging @betrue-final-final when he has a sec for HC issues. This looks good to me, and I believe follows the patterns we have for other modal components (e.g. dialog)

[betrue-final-final]

For now this makes sense, but I'd like to investigate whether the opposite is in fact the better design for people with low vision.

[Jahnp]

I totally agree! I could see a case to be made for treating modal experiences as "focused" ones where it's standard to hide the background. I feel like this has been discussed before... would be a good HIG topic :)

[msft-github-bot]

🎉office-ui-fabric-react@v6.106.3 has been released which incorporates this pull request.:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[betrue-final-final]

Now that I have had time to think about this it may be alarming if the background disappears. Part of the purpose of panels and dialogs is to keep context. A thicker border may be a good improvement.