Merge pull request #96 from Cognigy/feature/adaptive-card-heading-a11y

Feature/adaptive card heading a11y
Cognigy · Sep 30, 2024 · 2050457 · 2050457
2 parents 1f094c1 + 21dd725
commit 2050457
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/messages/AdaptiveCards/components/Adaptivecard.tsx b/src/messages/AdaptiveCards/components/Adaptivecard.tsx
@@ -64,6 +64,12 @@ const AdaptiveCard: FC<IAdaptiveCardProps> = props => {
 			if (result) {
 				targetRef.current.innerHTML = "";
 				targetRef.current.appendChild(result);
+				// Add aria-level attribute to heading elements
+				const headings = targetRef.current.querySelectorAll("[role='heading']");
+				headings.forEach(heading => {
+					if (heading.getAttribute("aria-level") === null)
+						heading.setAttribute("aria-level", "2");
+				});
 			}
 		} catch (error) {
 			console.error("Unable to render Adaptive Card: ", error);

diff --git a/src/messages/Video/Video.tsx b/src/messages/Video/Video.tsx
@@ -71,7 +71,7 @@ const Video: FC = () => {
 				kind: "subtitles",
 				src: captionsUrl as string,
 				srcLang: "en-US", // TODO: Get language from Say node in the future
-				label: "English",
+				label: "On",
 			},
 		],
 	};

diff --git a/test/fixtures/adaptiveCards.json b/test/fixtures/adaptiveCards.json
@@ -12,7 +12,8 @@
 								"type": "TextBlock",
 								"size": "Medium",
 								"weight": "Bolder",
-								"text": "I eat only ><_>"
+								"text": "I eat only ><_>",
+								"style": "heading"
 							},
 							{
 								"type": "ColumnSet",
@@ -116,7 +117,8 @@
 								"type": "TextBlock",
 								"size": "large",
 								"weight": "bolder",
-								"text": "Large header"
+								"text": "Large header",
+								"style": "heading"
 							},
 							{
 								"type": "Input.Text",