fix: Typography.PaneHeader should render as an h2

[adamint]

🐛 Bug Report

In fluent dialog headers with a title, said title is rendered with Typography.PaneHeader, which is converted into an h4. This heading level seems too small for the importance of a dialog. As a 'main section' of the page, PaneHeader should render as an h2, both leaving space for many additional sub-header levels and avoiding confusion from skipping levels.

💻 Repro or Code Sample

fluentui-blazor/src/Core/Components/Dialog/FluentDialogHeader.razor

Line 14 in fb1221b

<FluentLabel Typo="Typography.PaneHeader">@Dialog.Instance?.Parameters?.Title</FluentLabel>

fluentui-blazor/src/Core/Components/Label/FluentLabel.razor

Line 15 in 77c456a

case Typography.PaneHeader:

🤔 Expected Behavior

PaneHeader should be rendered as an h2, or if it needs to stay as an h2 to avoid breaking existing code, dialog headers should render an h2 title.

🔦 Context

We ended up getting bit by a related bug in Aspire, where we were rendering h3 in the dialog body. As h3>h4, an accessibility defect was filed against us. While fixable by changing our h3 to h5, rendering dialog titles as h4 is still too low of a heading level.

[dvoituron]

To avoid breaking changes in the v4, I don't think we can update that now. But you can apply a CSS to define a correct text size.

We can change that for the v5.

[vnbaaij]

We could add a parameter for v4 to specify a header size (which defaults to the current h4)

[dvoituron]

We could add a parameter for v4 to specify a header size (which defaults to the current h4)

Yeah. Good idea