Fix Adaptive Cards TextBlock element missing aria-level (#4329)

* Add ACHostConfig.textBlock.headingLevel * Add entry
microsoft · Jun 28, 2022 · 9428638 · 9428638
1 parent d972175
commit 9428638
Show file tree

Hide file tree

Showing 17 changed files with 47 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4294](https://github.com/microsoft/BotFramework-WebChat/issues/4294). Screen reader should not read message twice when navigating in the chat history, by [@compulim](https://github.com/compulim), in PR [#4323](https://github.com/microsoft/BotFramework-WebChat/issues/4323)
 -  Fixes [#4295](https://github.com/microsoft/BotFramework-WebChat/issues/4295). Screen reader should not read suggested actions twice when message arrive in live region, by [@compulim](https://github.com/compulim), in PR [#4323](https://github.com/microsoft/BotFramework-WebChat/issues/4323)
 -  Fixes [#4325](https://github.com/microsoft/BotFramework-WebChat/issues/4325). `aria-keyshortcuts` should use modifier keys according to `KeyboardEvent` key values spec, by [@compulim](https://github.com/compulim), in PR [#4323](https://github.com/microsoft/BotFramework-WebChat/issues/4323)
+-  Fixes [#4327](https://github.com/microsoft/BotFramework-WebChat/issues/4327). In Adaptive Cards, `TextBlock` with `style="heading"` should have `aria-level` set, by [@compulim](https://github.com/compulim), in PR [#4329](https://github.com/microsoft/BotFramework-WebChat/issues/4329)
 
 ## [4.15.2] - 2022-05-09
 

diff --git a/__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.html b/__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.html
@@ -54,6 +54,7 @@
         await pageConditions.scrollToBottomCompleted();
         await pageConditions.liveRegionStabilized();
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.speakProperty.html b/__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.speakProperty.html
@@ -54,6 +54,7 @@
         await pageConditions.scrollToBottomCompleted();
         await pageConditions.liveRegionStabilized();
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.animationCard.html b/__tests__/html/accessibility.liveRegionAttachment.animationCard.html
@@ -63,6 +63,7 @@
         await pageConditions.scrollToBottomCompleted();
         await pageConditions.liveRegionStabilized();
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.audio.html b/__tests__/html/accessibility.liveRegionAttachment.audio.html
@@ -60,6 +60,7 @@
 
         audioElement.removeAttribute('controls');
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.audioCard.html b/__tests__/html/accessibility.liveRegionAttachment.audioCard.html
@@ -60,6 +60,7 @@
 
         audioElement.removeAttribute('controls');
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.file.html b/__tests__/html/accessibility.liveRegionAttachment.file.html
@@ -60,6 +60,7 @@
         await pageConditions.scrollToBottomCompleted();
         await pageConditions.liveRegionStabilized();
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.heroCard.html b/__tests__/html/accessibility.liveRegionAttachment.heroCard.html
@@ -54,6 +54,7 @@
         await pageConditions.scrollToBottomCompleted();
         await pageConditions.liveRegionStabilized();
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.image.html b/__tests__/html/accessibility.liveRegionAttachment.image.html
@@ -54,6 +54,7 @@
         await pageConditions.scrollToBottomCompleted();
         await pageConditions.liveRegionStabilized();
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.receiptCard.html b/__tests__/html/accessibility.liveRegionAttachment.receiptCard.html
@@ -56,6 +56,7 @@
         await pageConditions.scrollToBottomCompleted();
         await pageConditions.liveRegionStabilized();
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.signInCard.html b/__tests__/html/accessibility.liveRegionAttachment.signInCard.html
@@ -54,6 +54,7 @@
         await pageConditions.scrollToBottomCompleted();
         await pageConditions.liveRegionStabilized();
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.thumbnailCard.html b/__tests__/html/accessibility.liveRegionAttachment.thumbnailCard.html
@@ -54,6 +54,7 @@
         await pageConditions.scrollToBottomCompleted();
         await pageConditions.liveRegionStabilized();
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.unknownCard.html b/__tests__/html/accessibility.liveRegionAttachment.unknownCard.html
@@ -55,6 +55,7 @@
           await pageConditions.scrollToBottomCompleted();
           await pageConditions.liveRegionStabilized();
 
+          await pageObjects.verifyDOMIntegrity();
           await pageObjects.focusSendBoxTextBox();
 
           await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.video.html b/__tests__/html/accessibility.liveRegionAttachment.video.html
@@ -60,6 +60,7 @@
 
         videoElement.removeAttribute('controls');
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/__tests__/html/accessibility.liveRegionAttachment.videoCard.html b/__tests__/html/accessibility.liveRegionAttachment.videoCard.html
@@ -60,6 +60,7 @@
 
         videoElement.removeAttribute('controls');
 
+        await pageObjects.verifyDOMIntegrity();
         await pageObjects.focusSendBoxTextBox();
 
         await host.sendShiftTab(3);

diff --git a/packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig.ts b/packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig.ts
@@ -133,6 +133,9 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         wrap: true
       },
       spacing: 8
+    },
+    textBlock: {
+      headingLevel: 1
     }
   };
 }
diff --git a/packages/test/page-object/src/globals/pageObjects/verifyDOMIntegrity.js b/packages/test/page-object/src/globals/pageObjects/verifyDOMIntegrity.js
@@ -3,16 +3,22 @@
 export default function verifyDOMIntegrity() {
   // If an element has "aria-labelledby", the label element must be present on the screen.
   [].forEach.call(document.querySelectorAll('[aria-labelledby]'), element => {
-    const labelId = element.getAttribute('aria-labelledby');
-    const labelElement = document.getElementById(labelId);
-
-    if (!labelElement) {
-      const message = `verifyDOMIntegrity: Cannot find element referenced by aria-labelledby attribute with ID "${labelId}".`;
-
-      console.warn(message, element);
-
-      throw new Error(message);
-    }
+    element
+      .getAttribute('aria-labelledby')
+      .split(' ')
+      .map(labelId => labelId.trim())
+      .filter(Boolean)
+      .forEach(labelId => {
+        const labelElement = document.getElementById(labelId);
+
+        if (!labelElement) {
+          const message = `verifyDOMIntegrity: Cannot find element referenced by aria-labelledby attribute with ID "${labelId}".`;
+
+          console.warn(message, element);
+
+          throw new Error(message);
+        }
+      });
   });
 
   // No two elements can have the same ID.
@@ -41,4 +47,17 @@ export default function verifyDOMIntegrity() {
       throw new Error(message);
     }
   });
+
+  // Elements of `role="heading"` must have `aria-level` set
+  [].forEach.call(document.querySelectorAll('[role="heading"]'), element => {
+    const ariaLevel = +element.getAttribute('aria-level');
+
+    if (!(ariaLevel >= 1 && ariaLevel === ~~ariaLevel)) {
+      const message = 'Elements of role="heading" must have aria-level set to an integer equal to or greater than 1.';
+
+      console.warn(message, element);
+
+      throw new Error(message);
+    }
+  });
 }