High contrast: push button should be highlighted (#4746)

compulim · web-flow · commit be67477e1d48 · 2023-06-15T11:05:20.000-07:00
* High contrast: push button should be highlighted

* Add entry

* Update snapshot
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+-  Fixes [#4718](https://github.com/microsoft/BotFramework-WebChat/issues/4718). In high contrast mode, Adaptive Card buttons, when pushed, should highlighted properly, by [@compulim](https://github.com/compulim), in PR [#4746](https://github.com/microsoft/BotFramework-WebChat/pull/4746)
+
 ## [4.15.8] - 2023-06-06
 
 ### Breaking changes
diff --git a/__tests__/__image_snapshots__/chrome-docker/video-js-video-1-snap.png b/__tests__/__image_snapshots__/chrome-docker/video-js-video-1-snap.png
diff --git a/__tests__/__image_snapshots__/html/high-contrast-hero-card-push-button-js-in-high-contrast-mode-hero-card-with-buttons-pushed-should-be-highlighted-1-snap.png b/__tests__/__image_snapshots__/html/high-contrast-hero-card-push-button-js-in-high-contrast-mode-hero-card-with-buttons-pushed-should-be-highlighted-1-snap.png
diff --git a/__tests__/html/highContrast.heroCard.pushButton.html b/__tests__/html/highContrast.heroCard.pushButton.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(
+        async function () {
+          const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+          await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+            features: [{ name: 'forced-colors', value: 'active' }]
+          });
+
+          WebChat.renderWebChat(
+            {
+              directLine,
+              store
+            },
+            document.getElementById('webchat')
+          );
+
+          await pageConditions.uiConnected();
+
+          await directLine.emulateIncomingActivity({
+            type: 'message',
+            text: '',
+            attachmentLayout: 'carousel',
+            attachments: [
+              {
+                contentType: 'application/vnd.microsoft.card.hero',
+                content: {
+                  title: 'Details about image 1',
+                  subtitle: 'This is the subtitle',
+                  text: 'Price: $XXX.XX USD',
+                  buttons: [
+                    {
+                      type: 'imBack',
+                      value: 'Place to buy',
+                      title: 'Places To Buy'
+                    },
+                    {
+                      type: 'imBack',
+                      value: 'Related Products',
+                      title: 'Related Products'
+                    }
+                  ]
+                }
+              }
+            ]
+          });
+
+          await pageConditions.numActivitiesShown(1);
+
+          (await directLine.actPostActivity(() => host.click(document.querySelector('.ac-pushButton')))).resolveAll();
+
+          await pageConditions.numActivitiesShown(2);
+          await pageConditions.allOutgoingActivitiesSent();
+
+          await host.snapshot();
+        },
+        { ignoreErrors: 'artificial error' }
+      );
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/highContrast.heroCard.pushButton.js b/__tests__/html/highContrast.heroCard.pushButton.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('In high contrast mode', () => {
+  test('hero card with buttons pushed should be highlighted', () => runHTML('highContrast.heroCard.pushButton.html'));
+});
diff --git a/packages/bundle/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.ts b/packages/bundle/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.ts
@@ -73,7 +73,14 @@ export default function ({
       '& .ac-pushButton[aria-pressed="true"]': {
         backgroundColor: cardPushButtonBackgroundColor,
         borderColor: cardPushButtonBackgroundColor,
-        color: cardPushButtonTextColor
+        color: cardPushButtonTextColor,
+
+        '@media (forced-colors: active)': {
+          backgroundColor: 'Highlight',
+          borderColor: 'Highlight',
+          color: 'HighlightText',
+          forcedColorAdjust: 'none'
+        }
       },
 
       '& input[aria-disabled="true"]': {
