add LinkText and underline to HC button-link (#4537)

beyackle2 · beyackle · compulim · web-flow · commit da90755b43a8 · 2022-12-09T13:01:47.000-08:00
* add LinkText and underline to HC button-link

* add new unit tests for Retry underline

* fix test typo

* add new snapshot

* Update screenshot

* Add entry

Co-authored-by: Benjamin Yackley &lt;beyackle@microsoft.com&gt;
Co-authored-by: William Wong &lt;compulim@users.noreply.github.com&gt;
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 [#4558](https://github.com/microsoft/BotFramework-WebChat/issues/4558). In high contrast mode, "Retry" link button should use link color as defined by [CSS System Colors](https://w3c.github.io/csswg-drafts/css-color/#css-system-colors), by [@beyackle2](https://github.com/beyackle2) in PR [#4537](https://github.com/microsoft/BotFramework-WebChat/pull/4537)
+
 ### Changed
 
 -  Updated test harness to use [Selenium Hub 4.6.0](https://hub.docker.com/r/selenium/hub) and [Chrome 107](https://hub.docker.com/r/selenium/node-chrome), by [@compulim](https://github.com/compulim) in PR [#4540](https://github.com/microsoft/BotFramework-WebChat/pull/4540)
diff --git a/__tests__/__image_snapshots__/html/accessibility-live-region-activity-status-send-failed-contrast-js-live-region-should-render-send-failed-retry-correctly-in-high-contrast-mode-1-snap.png b/__tests__/__image_snapshots__/html/accessibility-live-region-activity-status-send-failed-contrast-js-live-region-should-render-send-failed-retry-correctly-in-high-contrast-mode-1-snap.png
diff --git a/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.contrast.html b/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.contrast.html
@@ -0,0 +1,66 @@
+<!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>
+    <div id="webchat"></div>
+    <script>
+      run(
+        async function () {
+          const store = testHelpers.createStore();
+
+          const directLine = testHelpers.createDirectLineEmulator(store);
+
+          await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [
+            {
+              name: 'forced-colors',
+              value: 'active'
+            }
+          ]});
+
+          WebChat.renderWebChat(
+            {
+              directLine,
+              store,
+              styleOptions: {
+                groupTimestamp: 60000,
+                sendTimeout: 5000
+              }
+            },
+            document.getElementById('webchat')
+          );
+
+          await pageConditions.uiConnected();
+
+          const { disconnect, flush } = pageObjects.observeLiveRegion();
+
+          try {
+            const sendMessage = await directLine.emulateOutgoingActivity('Hello, World!');
+
+            await directLine.emulateIncomingActivity('Aloha!');
+
+            sendMessage.rejectPostActivity(new Error('artificial error'));
+
+            await pageConditions.became(
+              'failed to send message',
+              () => pageElements.activityStatuses()[0]?.innerText === 'Send failed. Retry.',
+              1000
+            );
+            
+          } finally {
+            
+            await host.snapshot();
+
+            disconnect();
+          }
+        },
+        { ignoreErrors: true }
+      );
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.contrast.js b/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.contrast.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('live region', () => {
+  test('should render "Send Failed. Retry" correctly in high-contrast mode', () =>
+    runHTML('accessibility.liveRegion.activityStatus.sendFailed.contrast.html'));
+});
diff --git a/packages/component/src/Utils/InlineMarkdown.js b/packages/component/src/Utils/InlineMarkdown.js
@@ -68,6 +68,12 @@ const InlineMarkdown = ({ children, onReference, references }) => {
           fontFamily: 'inherit',
           fontSize: 'inherit',
           padding: 0
+        },
+        '@media screen and (forced-colors: active)': {
+          '& button[data-markdown-href]': {
+            color: 'LinkText',
+            textDecoration: 'underline'
+          }
         }
       }) + '',
     [accent, styleToClassName]
