Merge branch 'main' into feat-html-test-accessibility

microsoft · Mar 29, 2023 · 265351a · 265351a
2 parents 16e78a1 + 7c84458
commit 265351a
Show file tree

Hide file tree

Showing 268 changed files with 334 additions and 291 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,7 +26,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  Resolved [#4643](https://github.com/microsoft/BotFramework-WebChat/issues/4643). Decoupling `botframework-directlinejs` from business logic of Web Chat for better tree-shaking, by [@compulim](https://github.com/compulim), in PR [#4645](https://github.com/microsoft/BotFramework-WebChat/pull/4645) and PR [#4648](https://github.com/microsoft/BotFramework-WebChat/pull/4648)
 -  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: using `<main>` for the root container, by [@compulim](https://github.com/compulim), in PR [#4684](https://github.com/microsoft/BotFramework-WebChat/pull/4684)
    -  HTML test: fix accessibility issues on HTML file, by [@compulim](https://github.com/compulim), in PR [#4685](https://github.com/microsoft/BotFramework-WebChat/pull/4685)
+   -  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)
 
 ### Fixed
 

diff --git a/__tests__/html/accessibility.accessibleName.activityStatus.sendFailed.html b/__tests__/html/accessibility.accessibleName.activityStatus.sendFailed.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(
         async function () {

diff --git a/__tests__/html/accessibility.accessibleName.simple.html b/__tests__/html/accessibility.accessibleName.simple.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(
         async function () {

diff --git a/__tests__/html/accessibility.activity.stackedLayoutRole.html b/__tests__/html/accessibility.activity.stackedLayoutRole.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.adaptiveCard.ariaPushed.html b/__tests__/html/accessibility.adaptiveCard.ariaPushed.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       function createActivity(text) {
         return {

diff --git a/__tests__/html/accessibility.adaptiveCard.disabled.focus.html b/__tests__/html/accessibility.adaptiveCard.disabled.focus.html
@@ -8,7 +8,7 @@
     <script crossorigin="anonymous" src="https://unpkg.com/react@18.1.0/umd/react.production.min.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const {

diff --git a/__tests__/html/accessibility.adaptiveCard.disabled.focus.withShowCard.html b/__tests__/html/accessibility.adaptiveCard.disabled.focus.withShowCard.html
@@ -8,7 +8,7 @@
     <script crossorigin="anonymous" src="https://unpkg.com/react@18.1.0/umd/react.production.min.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const {

diff --git a/__tests__/html/accessibility.adaptiveCard.disabled.inputs.html b/__tests__/html/accessibility.adaptiveCard.disabled.inputs.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       const store = testHelpers.createStore();
       let directLine;

diff --git a/__tests__/html/accessibility.adaptiveCard.withTapAction.html b/__tests__/html/accessibility.adaptiveCard.withTapAction.html
@@ -8,12 +8,12 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       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
@@ -8,12 +8,12 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       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.aria-roledescription.html b/__tests__/html/accessibility.aria-roledescription.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.attachment.aria.html b/__tests__/html/accessibility.attachment.aria.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.attachment.carouselLayoutRole.html b/__tests__/html/accessibility.attachment.carouselLayoutRole.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.attachment.stackedLayoutRole.html b/__tests__/html/accessibility.attachment.stackedLayoutRole.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.delayActivity.raceCondition.html b/__tests__/html/accessibility.delayActivity.raceCondition.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       // This test is to make sure we don't regress issue #3431, a race condition:
 

diff --git a/__tests__/html/accessibility.delayActivity.typingActivity.html b/__tests__/html/accessibility.delayActivity.typingActivity.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         WebChat.renderWebChat(

diff --git a/__tests__/html/accessibility.delayActivity.typingActivityWithoutReplyToActivity.html b/__tests__/html/accessibility.delayActivity.typingActivityWithoutReplyToActivity.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const clock = lolex.install();

diff --git a/__tests__/html/accessibility.delayActivity.withReplyToId.html b/__tests__/html/accessibility.delayActivity.withReplyToId.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const clock = lolex.install();

diff --git a/__tests__/html/accessibility.delayActivity.withoutReplyToId.html b/__tests__/html/accessibility.delayActivity.withoutReplyToId.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const clock = lolex.install();

diff --git a/__tests__/html/accessibility.heroCard.heading.html b/__tests__/html/accessibility.heroCard.heading.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.keyboardHelp.ariaLabel.html b/__tests__/html/accessibility.keyboardHelp.ariaLabel.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.keyboardHelp.clickCloseButton.html b/__tests__/html/accessibility.keyboardHelp.clickCloseButton.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.keyboardHelp.clickThru.html b/__tests__/html/accessibility.keyboardHelp.clickThru.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.keyboardHelp.darkTheme.html b/__tests__/html/accessibility.keyboardHelp.darkTheme.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.keyboardHelp.escapeKey.html b/__tests__/html/accessibility.keyboardHelp.escapeKey.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.keyboardHelp.forcedColors.html b/__tests__/html/accessibility.keyboardHelp.forcedColors.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.keyboardHelp.reducedHeight.html b/__tests__/html/accessibility.keyboardHelp.reducedHeight.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         // SETUP: Browser window size with height of 480px.

diff --git a/__tests__/html/accessibility.keyboardHelp.reducedWidth.html b/__tests__/html/accessibility.keyboardHelp.reducedWidth.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         // SETUP: Browser window size with height of 480px.

diff --git a/__tests__/html/accessibility.keyboardHelp.tabKey.html b/__tests__/html/accessibility.keyboardHelp.tabKey.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const store = testHelpers.createStore();

diff --git a/__tests__/html/accessibility.keyboardHelp.zeroHeight.html b/__tests__/html/accessibility.keyboardHelp.zeroHeight.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         // SETUP: Browser window size with height of 42px.

diff --git a/__tests__/html/accessibility.landmarkRole.invalid.html b/__tests__/html/accessibility.landmarkRole.invalid.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(
         async function () {

diff --git a/__tests__/html/accessibility.landmarkRole.valid.html b/__tests__/html/accessibility.landmarkRole.valid.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         WebChat.renderWebChat(

diff --git a/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.contrast.html b/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.contrast.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(
         async function () {

diff --git a/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.event.html b/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.event.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(
         async function () {

diff --git a/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.html b/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(
         async function () {

diff --git a/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.typing.html b/__tests__/html/accessibility.liveRegion.activityStatus.sendFailed.typing.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(
         async function () {

diff --git a/__tests__/html/accessibility.liveRegionActivity.htmlInMarkdown.html b/__tests__/html/accessibility.liveRegionActivity.htmlInMarkdown.html
@@ -8,7 +8,7 @@
     <script crossorigin="anonymous" src="https://unpkg.com/markdown-it@12.0.6/dist/markdown-it.min.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const baseActivity = {

diff --git a/__tests__/html/accessibility.liveRegionActivity.performance.html b/__tests__/html/accessibility.liveRegionActivity.performance.html
@@ -9,7 +9,7 @@
     <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const baseActivity = {

diff --git a/__tests__/html/accessibility.liveRegionActivity.speakOverrideAttachments.html b/__tests__/html/accessibility.liveRegionActivity.speakOverrideAttachments.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const timestamp = new Date(2000, 0, 1, 12, 34, 56, 789).toISOString();

diff --git a/__tests__/html/accessibility.liveRegionActivity.text.html b/__tests__/html/accessibility.liveRegionActivity.text.html
@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         await host.windowSize(360, 800, document.getElementById('webchat'));

diff --git a/__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.html b/__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.html
@@ -11,7 +11,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         React: { useEffect },

diff --git a/__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.speakProperty.html b/__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.speakProperty.html
@@ -11,7 +11,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         React: { useEffect },

diff --git a/__tests__/html/accessibility.liveRegionAttachment.animationCard.html b/__tests__/html/accessibility.liveRegionAttachment.animationCard.html
@@ -11,7 +11,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         React: { useEffect },