Change subtle color (#4686)

compulim · web-flow · commit 7c84458953ca · 2023-03-28T16:05:45.000-07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  Fixes [#4557](https://github.com/microsoft/BotFramework-WebChat/issues/4557). Flipper buttons in carousels and suggested actions is now renamed to "next/previous" from "left/right", by [@compulim](https://github.com/compulim), in PR [#4646](https://github.com/microsoft/BotFramework-WebChat/pull/4646)
 -  Fixes [#4652](https://github.com/microsoft/BotFramework-WebChat/issues/4652). Keyboard help screen, activity focus traps, and chat history terminator should not be hidden behind `aria-hidden` because they are focusable, by [@compulim](https://github.com/compulim), in PR [#4659](https://github.com/microsoft/BotFramework-WebChat/pull/4659)
+-  Related to [#4650](https://github.com/microsoft/BotFramework-WebChat/issues/4650). Added automated accessibility check using [`axe-core`](https://npmjs.com/package/axe-core)
+   -  HTML test: changed contrast ratio in tests that use different background colors, by [@compulim](https://github.com/compulim), in PR [#XXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXX)
 
 ### Changed
 
diff --git a/__tests__/html/accessibility.adaptiveCard.withTapAction.html b/__tests__/html/accessibility.adaptiveCard.withTapAction.html
@@ -13,7 +13,7 @@
       run(async function () {
         const store = testHelpers.createStore();
         const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
-        const baseProps = { directLine, store };
+        const baseProps = { directLine, store, styleOptions: { subtle: '#666' } };
         const webChatElement = document.getElementById('webchat');
 
         WebChat.renderWebChat(baseProps, webChatElement);
diff --git a/__tests__/html/accessibility.adaptiveCard.withoutTapAction.html b/__tests__/html/accessibility.adaptiveCard.withoutTapAction.html
@@ -13,7 +13,7 @@
       run(async function () {
         const store = testHelpers.createStore();
         const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
-        const baseProps = { directLine, store };
+        const baseProps = { directLine, store, styleOptions: { subtle: '#666' } };
         const webChatElement = document.getElementById('webchat');
 
         WebChat.renderWebChat(baseProps, webChatElement);
diff --git a/__tests__/html/adaptiveCards.tapAction.html b/__tests__/html/adaptiveCards.tapAction.html
@@ -40,7 +40,8 @@
         WebChat.renderWebChat(
           {
             directLine,
-            store: testHelpers.createStore()
+            store: testHelpers.createStore(),
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
diff --git a/__tests__/html/autoScroll.acknowledgement.html b/__tests__/html/autoScroll.acknowledgement.html
@@ -86,7 +86,10 @@
           {
             directLine,
             store,
-            styleOptions: { autoScrollSnapOnPage: true }
+            styleOptions: {
+              autoScrollSnapOnPage: true,
+              subtle: '#666'
+            }
           },
           webChatElement
         );
diff --git a/__tests__/html/autoScroll.snap.activity.html b/__tests__/html/autoScroll.snap.activity.html
@@ -62,7 +62,8 @@
             store,
             styleOptions: {
               autoScrollSnapOnActivity: 2,
-              autoScrollSnapOnActivityOffset: 100
+              autoScrollSnapOnActivityOffset: 100,
+              subtle: '#666'
             }
           },
           webChatElement
diff --git a/__tests__/html/autoScroll.snap.activityAndPage.html b/__tests__/html/autoScroll.snap.activityAndPage.html
@@ -63,7 +63,8 @@
             styleOptions: {
               autoScrollSnapOnActivity: true,
               autoScrollSnapOnPage: true,
-              autoScrollSnapOnPageOffset: -100
+              autoScrollSnapOnPageOffset: -100,
+              subtle: '#666'
             }
           },
           webChatElement
diff --git a/__tests__/html/autoScroll.snap.default.html b/__tests__/html/autoScroll.snap.default.html
@@ -56,7 +56,14 @@
       run(async function () {
         const webChatElement = document.getElementById('webchat');
 
-        WebChat.renderWebChat({ directLine, store }, webChatElement);
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: { subtle: '#666' }
+          },
+          webChatElement
+        );
 
         await pageConditions.uiConnected();
 
diff --git a/__tests__/html/autoScroll.snap.page.html b/__tests__/html/autoScroll.snap.page.html
@@ -60,7 +60,10 @@
           {
             directLine,
             store,
-            styleOptions: { autoScrollSnapOnPage: 0.2 }
+            styleOptions: {
+              autoScrollSnapOnPage: 0.2,
+              subtle: '#666'
+            }
           },
           webChatElement
         );
diff --git a/__tests__/html/focusManagement.disableAdaptiveCard.manual.html b/__tests__/html/focusManagement.disableAdaptiveCard.manual.html
@@ -13,7 +13,7 @@
       run(async function () {
         const store = testHelpers.createStore();
         const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
-        const baseProps = { directLine, store };
+        const baseProps = { directLine, store, styleOptions: { subtle: '#666' } };
         const webChatElement = document.getElementById('webchat');
 
         WebChat.renderWebChat(baseProps, webChatElement);
diff --git a/__tests__/html/focusManagement.disableHeroCard.obsolete.html b/__tests__/html/focusManagement.disableHeroCard.obsolete.html
@@ -47,7 +47,8 @@
                 return next(...args);
               },
             directLine,
-            store
+            store,
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
diff --git a/__tests__/html/focusManagement.disableUI.html b/__tests__/html/focusManagement.disableUI.html
@@ -13,7 +13,7 @@
       run(async function () {
         const store = testHelpers.createStore();
         const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
-        const baseProps = { directLine, store };
+        const baseProps = { directLine, store, styleOptions: { subtle: '#666' } };
         const webChatElement = document.getElementById('webchat');
 
         WebChat.renderWebChat(baseProps, webChatElement);
diff --git a/__tests__/html/focusManagement.scrollToEndButton.receiveHeroCard.html b/__tests__/html/focusManagement.scrollToEndButton.receiveHeroCard.html
@@ -17,7 +17,8 @@
         WebChat.renderWebChat(
           {
             directLine,
-            store
+            store,
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
diff --git a/__tests__/html/focusManagement.scrollToEndButton.receiveMessage.html b/__tests__/html/focusManagement.scrollToEndButton.receiveMessage.html
@@ -17,7 +17,8 @@
         WebChat.renderWebChat(
           {
             directLine,
-            store
+            store,
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
diff --git a/__tests__/html/focusManagement.sendBoxTextBoxSubmit.html b/__tests__/html/focusManagement.sendBoxTextBoxSubmit.html
@@ -17,7 +17,8 @@
         WebChat.renderWebChat(
           {
             directLine,
-            store
+            store,
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
diff --git a/__tests__/html/focusManagement.sendFailedRetry.html b/__tests__/html/focusManagement.sendFailedRetry.html
@@ -31,7 +31,8 @@
           window.WebChat.renderWebChat(
             {
               directLine: hackedDirectLine,
-              store
+              store,
+              styleOptions: { subtle: '#666' }
             },
             document.getElementById('webchat')
           );
diff --git a/__tests__/html/focusManagement.suggestedActions.html b/__tests__/html/focusManagement.suggestedActions.html
@@ -17,7 +17,8 @@
         WebChat.renderWebChat(
           {
             directLine,
-            store
+            store,
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
diff --git a/__tests__/html/transcript.navigation.behavior.proactive.adaptiveCard.html b/__tests__/html/transcript.navigation.behavior.proactive.adaptiveCard.html
@@ -42,7 +42,14 @@
         ]);
         const store = testHelpers.createStore();
 
-        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: { subtle: '#666' }
+          },
+          document.getElementById('webchat')
+        );
 
         await pageConditions.uiConnected();
         await pageConditions.numActivitiesShown(1);
diff --git a/__tests__/html/transcript.navigation.behavior.proactive.message.html b/__tests__/html/transcript.navigation.behavior.proactive.message.html
@@ -36,7 +36,14 @@
         ]);
         const store = testHelpers.createStore();
 
-        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: { subtle: '#666' }
+          },
+          document.getElementById('webchat')
+        );
 
         await pageConditions.uiConnected();
         await pageConditions.numActivitiesShown(3);
diff --git a/__tests__/html/transcript.navigation.scrollIntoView.keyboard.html b/__tests__/html/transcript.navigation.scrollIntoView.keyboard.html
@@ -43,7 +43,8 @@
         WebChat.renderWebChat(
           {
             directLine,
-            store
+            store,
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
diff --git a/__tests__/html/transcript.navigation.scrollIntoView.mouse.html b/__tests__/html/transcript.navigation.scrollIntoView.mouse.html
@@ -43,7 +43,8 @@
         WebChat.renderWebChat(
           {
             directLine,
-            store
+            store,
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
diff --git a/__tests__/html/useTextBoxSubmit.main.html b/__tests__/html/useTextBoxSubmit.main.html
@@ -20,7 +20,8 @@
         const renderWebChatWithHook = testHelpers.createRenderWebChatWithHook(
           {
             directLine: WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() }),
-            store: testHelpers.createStore()
+            store: testHelpers.createStore(),
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
diff --git a/__tests__/html/useTextBoxSubmit.sendBox.html b/__tests__/html/useTextBoxSubmit.sendBox.html
@@ -23,7 +23,8 @@
           {
             activityMiddleware: testHelpers.createRunHookActivityMiddleware(),
             directLine,
-            store
+            store,
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
diff --git a/__tests__/html/useTextBoxSubmit.sendBoxWithoutKeyboard.html b/__tests__/html/useTextBoxSubmit.sendBoxWithoutKeyboard.html
@@ -23,7 +23,8 @@
           {
             activityMiddleware: testHelpers.createRunHookActivityMiddleware(),
             directLine,
-            store
+            store,
+            styleOptions: { subtle: '#666' }
           },
           document.getElementById('webchat')
         );
