[Rendering] [Accessibility] `aria-level` is not specified for TextBlock with `style="heading"`

Target Platforms

NodeJS

SDK Version

2.10.0

Application Name

Web app

Problem Description

This is reported by a customer.

When rendering the card below, it render the TextBlock without aria-level set. This is violating WCAG 4.1.2 (aria-required-attr): for elements with role="heading", the aria-level attribute must be set.

When the hostConfig.textBlock.headingLevel is set, it will not violate WCAG. However, this option is optional. That means, the default behavior of renderer is emitting a DOM tree which is violating WCAG.

There are a few potential fixes:

• Marking hostConfig.textBlock.headingLevel as a required field
• Default hostConfig.textBlock.headingLevel to 1
• Do not apply role="heading" attribute if hostConfig.textBlock.headingLevel is not set

Screenshots

<div
  class="ac-textBlock"
  role="heading"
  style="overflow: hidden; font-family: &quot;Segoe UI&quot;, Tahoma, Geneva, Verdana, sans-serif; font-size: 21px; color: rgb(51, 51, 51); font-weight: 600; text-align: start; line-height: 27.93px; overflow-wrap: break-word; box-sizing: border-box; flex: 0 0 auto;"
>
  A header with role="heading"
</div>

Card JSON

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "style": "heading",
      "type": "TextBlock",
      "text": "A header with role=\"heading\"",
      "wrap": true,
      "weight": "bolder"
    }
  ]
}

Sample Code Language

No response

Sample Code

No response

Start with the NodeJS renderer's TextBlock handling for style="heading" and the hostConfig.textBlock.headingLevel option. Compare the generated DOM when headingLevel is absent and configured, then verify that the chosen behavior no longer produces a role="heading" without aria-level while preserving valid heading rendering.