Show a border around Fluent starter prompt cards in forced colors

.changelog/5954-fix-fluent-starter-prompt-forced-colors.md

@@ -0,0 +1,3 @@
+### Fixed
+
+- Fixed Fluent starter prompt cards having no visible border in forced colors, in PR [#5954](https://github.com/microsoft/BotFramework-WebChat/pull/5954), by [@OEvgeny](https://github.com/OEvgeny)

__tests__/html2/fluentTheme/starterPrompts.forcedColors.dark.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './starterPrompts.forcedColors?fluent-theme=dark';
+    </script>
+  </head>
+  <body></body>
+</html>

__tests__/html2/fluentTheme/starterPrompts.forcedColors.html

@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <style>
+      .fui-FluentProvider {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@fluentui/react-provider": "/__dist__/packages/test/test-assets/out/@fluentui/react-provider.js",
+          "@fluentui/tokens": "/__dist__/packages/test/test-assets/out/@fluentui/tokens.js",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/": "/__dist__/packages/bundle/static/botframework-webchat/",
+          "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js",
+          "react-dom/client": "/__dist__/packages/bundle/static/react-dom/client.js",
+          "react-jsx-runtime": "/__dist__/packages/bundle/static/react/jsx-runtime.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { FluentProvider } from '@fluentui/react-provider';
+      import { webDarkTheme } from '@fluentui/tokens';
+      import { createStoreWithOptions, ReactWebChat } from 'botframework-webchat';
+      import { FluentThemeProvider, testIds } from 'botframework-webchat-fluent-theme';
+      import { createElement } from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+      window.WebChat = { createStoreWithOptions };
+
+      run(async function () {
+        const colorScheme = new URLSearchParams(location.search).get('fluent-theme') === 'dark' ? 'dark' : 'light';
+
+        // GIVEN: A light or dark high contrast theme (such as "Desert" or "Aquatic" on Windows) is active before Web Chat renders.
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [
+            { name: 'forced-colors', value: 'active' },
+            { name: 'prefers-color-scheme', value: colorScheme },
+            { name: 'prefers-reduced-motion', value: 'reduce' }
+          ]
+        });
+
+        expect(window.matchMedia(`(forced-colors: active) and (prefers-color-scheme: ${colorScheme})`).matches).toBe(
+          true
+        );
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const webChatElement = createElement(
+          FluentThemeProvider,
+          { variant: 'fluent' },
+          createElement(ReactWebChat, { directLine, store, styleOptions: { hideSendBox: true } })
+        );
+
+        // GIVEN: With a dark color scheme, the page uses the dark Fluent UI theme.
+        createRoot(document.getElementById('webchat')).render(
+          colorScheme === 'dark'
+            ? createElement(FluentProvider, { theme: webDarkTheme }, webChatElement)
+            : webChatElement
+        );
+
+        await pageConditions.uiConnected();
+
+        // WHEN: The bot sends a pre-chat message with 2 starter prompts.
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': '',
+              '@type': 'Message',
+              author: {
+                '@context': 'https://schema.org',
+                '@type': 'Person',
+                description: 'Select one of the suggestions below to get started.',
+                image: '/assets/bot-avatar.jpg',
+                name: 'Onboarding Buddy',
+                type: 'https://schema.org/Person'
+              },
+              keywords: ['PreChatMessage'],
+              type: 'https://schema.org/Message'
+            }
+          ],
+          suggestedActions: {
+            actions: [
+              { text: 'Track new hire tasks.', title: 'Checklist', type: 'messageBack' },
+              { text: 'Set up your laptop.', title: 'Equipment', type: 'messageBack' }
+            ],
+            to: []
+          },
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+        await pageConditions.allImagesLoaded();
+
+        // THEN: Both starter prompts should be shown as buttons.
+        await expect(
+          Promise.all(
+            Array.from(
+              document.querySelectorAll(`[data-testid="${testIds.preChatMessageActivityStarterPromptsCardAction}"]`)
+            ).map(element => testHelpers.getAccessibleName(element))
+          )
+        ).resolves.toEqual(['Checklist Track new hire tasks.', 'Equipment Set up your laptop.']);
+
+        // THEN: Both starter prompts should have a visible border around them.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>

packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css

@@ -48,6 +48,11 @@
     outline-offset: -2px;
   }
 
+  /* Forced colors remove the card shadow and fill, so draw a border as a native button does. */
+  @media (forced-colors: active) {
+    border: var(--webchat-strokeWidthThin) solid ButtonText;
+  }
+
   &:empty::after,
   &:empty::before {
     animation: blueprintAnimation 3s linear infinite;