microsoft · compulim · Oct 17, 2023 · Oct 17, 2023 · Mar 21, 2024
@@ -78,6 +78,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4863](https://github.com/microsoft/BotFramework-WebChat/issues/4863). Disable dark theme for link references until chat history has dark theme support, by [@compulim](https://github.com/compulim), in PR [#4864](https://github.com/microsoft/BotFramework-WebChat/pull/4864)
 -  Fixes [#4866](https://github.com/microsoft/BotFramework-WebChat/issues/4866). Citation modal show fill screen width on mobile device and various fit-and-finish, by [@compulim](https://github.com/compulim), in PR [#4867](https://github.com/microsoft/BotFramework-WebChat/pull/4867)
 -  Fixes [#4878](https://github.com/microsoft/BotFramework-WebChat/issues/4878). `createStore` should return type of `Redux.Store`, by [@compulim](https://github.com/compulim), in PR [#4877](https://github.com/microsoft/BotFramework-WebChat/pull/4877)
+-  Fixes [#4907](https://github.com/microsoft/BotFramework-WebChat/issues/4907). Link references in high contrast mode should use `LinkText` color, by [@compulim](https://github.com/compulim), in PR [#4908](https://github.com/microsoft/BotFramework-WebChat/pull/4908)
 -  Fixes [#4957](https://github.com/microsoft/BotFramework-WebChat/issues/4957). Native chevron of the accordion in citation should be hidden, by [@compulim](https://github.com/compulim), in PR [#4958](https://github.com/microsoft/BotFramework-WebChat/pull/4958)
 
 ### Added

@@ -0,0 +1,87 @@
+<!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' },
+              { name: 'prefers-color-scheme', value: 'dark' }
+            ]
+          });
+
+          WebChat.renderWebChat(
+            {
+              directLine,
+              store
+            },
+            document.getElementById('webchat')
+          );
+
+          await pageConditions.uiConnected();
+
+          await directLine.emulateIncomingActivity({
+            entities: [
+              {
+                '@context': 'https://schema.org',
+                '@id': 'cite:1',
+                '@type': 'Claim',
+                type: 'https://schema.org/Claim',
+                text: 'Reprehenderit exercitation laborum labore ut. Nostrud do et ut nostrud nisi excepteur labore adipisicing nostrud nostrud ipsum id dolore. Anim aliquip incididunt incididunt sunt sit proident consectetur exercitation qui aliqua aliquip adipisicing nisi et. Id commodo labore sunt quis do aute cillum laborum veniam [proident](https://bing.com/).'
+              }
+            ],
+            text: `Sure, you should override the default proxy settings[1]\u200C[2], when your proxy server requires authentication[3].
+
+[1]: https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1
+[2]: https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings "Configure proxy server settings - Windows Server"
+[3]: cite:1 "Citation-1"
+`,
+            type: 'message'
+          });
+
+          await host.snapshot();
+
+          const linkDefinitionItems = pageElements.linkDefinitions()[0].querySelectorAll('[role="listitem"] > *');
+
+          pageElements.sendBoxTextBox().focus();
+          await host.sendShiftTab(3);
+          await host.sendKeys('ENTER');
+          await host.snapshot();
+
+          await host.sendTab(3);
+          await host.snapshot();
+
+          await host.sendTab();
+          await host.snapshot();
+
+          await host.sendTab();
+          await host.snapshot();
+
+          await host.sendTab();
+          await host.snapshot();
+
+          await host.sendKeys('ENTER');
+          await host.snapshot();
+        },
+        {
+          // High contrast dark theme will not pass contrast check.
+          axeCoreRunOptions: {
+            rules: {
+              'color-contrast': { enabled: false }
+            }
+          }
+        }
+      );
+    </script>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('citation in high contrast', () => {
+  test('should work', () => runHTML('citation.highContrast.html'));
+});
@@ -138,7 +138,11 @@ export default function createLinkDefinitionsStyleSet() {
         overflow: 'hidden',
         textDecoration: 'underline',
         textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+
+        [FORCED_COLORS_SELECTOR]: {
+          color: 'LinkText'
+        }
       },
 
       '.webchat__link-definitions__open-in-new-window-icon': {

@@ -43,7 +43,7 @@ export default function initializeCheckAccessibility() {
       try {
         console.log('[TESTHARNESS] Accessibility checks started.');
 
-        const results = await axe.run();
+        const results = await axe.run(window.checkAccessibilityRunOptions);
         const { violations } = results;
 
         if (!violations?.length) {

@@ -26,6 +26,8 @@ export default function () {
 
       document.body.prepend(header);
 
+      window.checkAccessibilityRunOptions = doneOptions.axeCoreRunOptions || {};
+
       window.addEventListener('error', event => host.error(event.error));
 
       // Run the test, signal start by host.ready().