[JS] Emit "invisible" borders for containers

[paulcam206]

Related Issue

Fixes VSO 24095690

Description

When a user puts their system in high contrast mode, their user agent will override CSS properties in order to display content in the same high contrast mode. There's no way for us (the website) to know if this is happening. The user will of course lose some of our styling cues (e.g. TextBlock's color property). This is expected, but we are losing one critical bit of useful visual state -- container borders.

Here's what our Container sample card looks like:

Normal	High Contrast Black

The fix on our end is to emit an "invisible" border on containers (specifically, we emit a 1px solid border that is the same color as the container's backgroundColor). Here's how it looks with our fix:

Normal	High Contrast Black

How Verified

• local build

Microsoft Reviewers: Open in CodeFlow

[ghost]

Hi @paulcam206. Thanks for helping make the AdaptiveCards JS renderer + tooling better. As additional verification, once the JS build succeeds, please go to the test site to test out your website/designer changes.