HTML tests: use <main> for container (#4684)

* Using <main> for container * Update PR number * Update PR number
microsoft · Mar 28, 2023 · 2c853c8 · 2c853c8
1 parent 573cfb7
commit 2c853c8
Show file tree

Hide file tree

Showing 268 changed files with 270 additions and 268 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 -  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)
 
 ### 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,7 +8,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.withoutTapAction.html b/__tests__/html/accessibility.adaptiveCard.withoutTapAction.html
@@ -8,7 +8,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.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 },

diff --git a/__tests__/html/accessibility.liveRegionAttachment.audio.html b/__tests__/html/accessibility.liveRegionAttachment.audio.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 },