Adaptive Cards TextBlock heading should start at level 2 (#4747)

* AC text block heading should be level 2

* Add entry

* Fix tests

* Clean up

* Fix screenshots

* Fix heading-one test

* Fix flaky

* Add entry

Author: compulim

.vscode/settings.json

@@ -3,5 +3,6 @@
     "packages/*/dist": false,
     "packages/*/lib": false
   },
-  "typescript.tsdk": "packages\\component\\node_modules\\typescript\\lib"
+  "typescript.tsdk": "packages\\component\\node_modules\\typescript\\lib",
+  "prettier.prettierPath": "./node_modules/prettier"
 }

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 
 -  Fixes [#4718](https://github.com/microsoft/BotFramework-WebChat/issues/4718). In high contrast mode, Adaptive Card buttons, when pushed, should highlighted properly, by [@compulim](https://github.com/compulim), in PR [#4746](https://github.com/microsoft/BotFramework-WebChat/pull/4746)
+-  Fixes [#4721](https://github.com/microsoft/BotFramework-WebChat/issues/4721) and [#4726](https://github.com/microsoft/BotFramework-WebChat/issues/4726). Adaptive Cards `TextBlock` heading elements should start at level 2, by [@compulim](https://github.com/compulim), in PR [#4747](https://github.com/microsoft/BotFramework-WebChat/issues/4747)
 
 ## [4.15.8] - 2023-06-06
 

__tests__/__image_snapshots__/chrome-docker/style-options-js-style-options-hide-scroll-to-bottom-button-1-snap.png

@@ -39,6 +39,7 @@
         clock.tick(1000);
 
         // We should not delay the first activity, as the first activity always has a "replyToId" pointing to missing activity.
+        await pageConditions.numActivitiesShown(1);
         await host.snapshot();
 
         directLine.activityDeferredObservable.next({

__tests__/__image_snapshots__/chrome-docker/style-options-js-style-options-hide-scroll-to-bottom-button-2-snap.png

@@ -135,7 +135,7 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
       spacing: 8
     },
     textBlock: {
-      headingLevel: 1
+      headingLevel: 2
     }
   };
 }

__tests__/__image_snapshots__/chrome-docker/video-js-video-1-snap.png

@@ -3,6 +3,39 @@
 import 'axe-core';
 
 export default function initializeCheckAccessibility() {
+  axe.configure({
+    checks: [
+      {
+        evaluate: (node, { selector }) => !node.querySelector(selector),
+        id: 'webchat-has-no-heading-one',
+        metadata: {
+          impact: 'moderate',
+          messages: {
+            pass: 'Web Chat has no level-one heading',
+            fail: 'Web Chat must have no level-one heading'
+          }
+        },
+        options: {
+          selector:
+            'h1:not([role], [aria-level]), :is(h1, h2, h3, h4, h5, h6):not([role])[aria-level="1"], [role=heading][aria-level="1"]'
+        }
+      }
+    ],
+    rules: [
+      {
+        all: ['webchat-has-no-heading-one'],
+        id: 'webchat-has-no-heading-one',
+        metadata: {
+          description: 'As a component, ensures Web Chat does not contains any level-one heading.',
+          help: 'No level-one heading is allowed in Web Chat',
+          helpUrl: 'https://github.com/microsoft/BotFramework-WebChat/issues/4721'
+        },
+        selector: '#webchat',
+        tags: ['webchat', 'cat.semantics', 'best-practice']
+      }
+    ]
+  });
+
   window.checkAccessibility ||
     (window.checkAccessibility = async function checkAccessibilityBrowser() {
       const startTime = Date.now();

__tests__/__image_snapshots__/html/scroll-to-end-button-tab-order-js-scroll-to-end-button-should-have-correct-tab-order-1-snap.png

@@ -122,7 +122,7 @@ const customAdaptiveCardsHostConfig = {
     spacing: 8
   },
   textBlock: {
-    headingLevel: 1
+    headingLevel: 2
   }
 };