HTML tests: fix accessibility issues in HTML files (#4685)

* Fix HTML test accessibility issues

* Fix ESBuild

* Add entry

* Add image alt text

* Fix crypto

Author: compulim

CHANGELOG.md

@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  HTML test: changed contrast ratio in tests that use different background colors, by [@compulim](https://github.com/compulim), in PR [#4686](https://github.com/microsoft/BotFramework-WebChat/pull/4686)
    -  Added `ponyfill` prop to `<ReactWebChat>`/`<Composer>` and `createStoreWithOptions`, by [@compulim](https://github.com/compulim), in PR [#4662](https://github.com/microsoft/BotFramework-WebChat/pull/4662)
       -  This is for development scenarios where fake timer is needed and will only applies to Web Chat only
+   -  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)
 
 ### Fixed
 

__tests__/__image_snapshots__/html/auto-scroll-with-post-back-activity-js-auto-scroll-with-activity-snap-behavior-should-not-pause-on-post-back-activity-1-snap.png

@@ -66,14 +66,10 @@
                         spacing: 'None',
                         wrap: true
                       },
-                      {
-                        type: 'TextBlock',
-                        text: 'Snooze for',
-                        wrap: true
-                      },
                       {
                         type: 'Input.ChoiceSet',
                         id: 'snooze',
+                        label: 'Snooze for',
                         value: '5',
                         choices: [
                           {

__tests__/__image_snapshots__/html/auto-scroll-with-post-back-page-js-auto-scroll-with-page-snap-behavior-should-not-pause-on-post-back-activity-1-snap.png

@@ -66,14 +66,10 @@
                         spacing: 'None',
                         wrap: true
                       },
-                      {
-                        type: 'TextBlock',
-                        text: 'Snooze for',
-                        wrap: true
-                      },
                       {
                         type: 'Input.ChoiceSet',
                         id: 'snooze',
+                        label: 'Snooze for',
                         value: '5',
                         choices: [
                           {

__tests__/html/autoScroll.withPostBack.activity.html

@@ -2,4 +2,6 @@ import { randomFillSync } from 'crypto';
 
 // When microsoft-cognitiveservices-speech-sdk is loaded, it call "uuid" package to create a new GUID.
 // "uuid" package requires crypto.getRandomValues().
-global.crypto = { ...global.crypto, getRandomValues: randomFillSync };
+if (!global.crypto?.getRandomValues) {
+  global.crypto = { ...global.crypto, getRandomValues: randomFillSync };
+}

__tests__/html/autoScroll.withPostBack.page.html

@@ -6,6 +6,26 @@ export default function () {
     (window.run = (fn, doneOptions) => {
       const host = getHost();
 
+      // Accessibility: [document-title] add a page title if not specified.
+      document.title = document.title || location.pathname.split('/').reverse()[0];
+
+      // Accessibility: [page-has-heading-one] artificially inject a page header.
+      const header = document.createElement('header');
+      const headingOne = document.createElement('h1');
+
+      headingOne.textContent = 'Web Chat test';
+
+      header.style.color = 'transparent';
+      header.style.height = '1px';
+      header.style.overflow = 'hidden';
+      header.style.position = 'absolute';
+      header.style.top = '0';
+      header.style.whiteSpace = 'nowrap';
+      header.style.width = '1px';
+      header.append(headingOne);
+
+      document.body.prepend(header);
+
       window.addEventListener('error', event => host.error(event.error));
 
       // Run the test, signal start by host.ready().
@@ -19,6 +39,11 @@ export default function () {
           })
           // Some tests may have changed the time zone, we should unset it.
           .then(() => host.sendDevToolsCommand('Emulation.setTimezoneOverride', { timezoneId: 'Etc/UTC' }))
+          .catch(error =>
+            // Chrome occasionally said timezone already set when we navigate away. Need extra F5 to clear it.
+            // We did set the timezone, but page navigation should undo it.
+            error.message?.includes('"Timezone override is already in effect"') ? undefined : Promise.reject(error)
+          )
           .then(host.ready)
           .then(fn)
           .then(() => host.done(doneOptions))

__tests__/setup/setupCryptoGetRandomValues.js

@@ -79,9 +79,10 @@ function createInputCardActivity(index = 0) {
                   width: 1,
                   items: [
                     {
+                      altText: 'a diver under the sea',
+                      size: 'auto',
                       type: 'Image',
-                      url: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg',
-                      size: 'auto'
+                      url: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg'
                     }
                   ]
                 }