Markdown: reorder H1 -> H2, H2 -> H3, etc.

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

As Web Chat is a web component, <h1> is not expected as the web app probably already have <h1> mounted somewhere in the page.

In our previous PR, we enabled heading level reordering for Adaptive Cards. We should enable this for renderMarkdown too.

What browsers and screen readers do this issue affect?

Windows: Edge with Windows Narrator, Windows: Chrome with NVDA, Windows: Chrome/Firefox with JAWS, macOS: Safari with VoiceOver, iOS/iPadOS: Safari with VoiceOver, Android: Chrome with TalkBack

Are there any code-based customization done to Web Chat?

No, I am using Web Chat without any customizations except "styleOptions".

What version of Web Chat are you using?

Development build

Which area does this issue affect?

Others or unrelated

What is the public URL for the website?

https://compulim.github.io/webchat-loader/

How to reproduce the issue?

1. Type "echo # abc" to MockBot

What do you expect?

In HTML:

<h2>abc</h2>

What actually happened?

In HTML:

<h1>abc</h1>

Do you have any screenshots or recordings to repro the issue?

Did you find any DOM elements that might have caused the issue?

<div class="webchat__text-content__markdown webchat__render-markdown webchat--css-shzit-bafhim"> 
 <h1>abc</h1>
</div>

MAS reference

https://aka.ms/MAS1.3.1

WCAG reference

Understanding SC 1.3.1: Info and Relationships (Level A)

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

Should heading level reorder enable by default?

It should be same as how AC works.

Will it conflict with the AC heading level reorder?

Yes, maybe we need to deprecate AC one in favor of this one.

How about <h6>?

When reordering is enabled, we should tell the web developers that <h6> will become <div aria-level="7" role="heading">. This could be included in our JSDoc.

Markdown-It does not support AC heading level reorder, how to work on it?

Write a Markdown-It plugin for heading level reorder. Write it cleanly, potentially, we might move to micromark/mdast later.

How many levels should we allow heading level reordering?

Zeroes and any positive integer numbers. We should allow web developers to choose the starting heading level.

Should we reorder using aria-level rather than changing HTML tag?

No. W3C recommendation is to use <h1> wherever we could.

Why <h1> appears to be smaller than <h2> in chat bubble?

This is by-design of W3C HTML stylesheet: <h1> in <section> et al., should appear smaller, while <h2> will keep its size.

The issue names renderMarkdown, Markdown-It, and prior PR #4747 but no files or tests. Start by locating renderMarkdown and the existing Adaptive Cards heading-reorder implementation; done means Markdown headings reorder from the configured starting level, including the documented h6 behavior, without conflicting with Adaptive Cards.