fix(a11y): use H2 header for dialog title

[MariaSolOs]

Changes proposed in this pull request:

Headings should reflect their visual level on the page. <h6> isn't appropriate for a dialog title.

Screenshot

I changed the font size to preserve the current appearance of the title.

Today:

With this change:

[changelog-app]

Generate changelog in packages/core/changelog/@unreleased

Type (Select exactly one)

• Feature (Adding new functionality)
• Improvement (Improving existing functionality)
• Fix (Fixing an issue with existing functionality)
• Break (Creating a new major version by breaking public APIs)
• Deprecation (Removing functionality in a non-breaking way)
• Migration (Automatically moving data/functionality to a new system)

Description

fix(a11y): use H2 header for dialog title

Check the box to generate changelog(s)

• Generate changelog entry

[MariaSolOs]

Not sure if there's a special variable I can use here to reference the font size of h4 titles.

[gluxon]

You could do something like this, but it might be worth just hard-coding 14px since we may not want this font-size to change if the default h6 font size changes.

Suggested change

	font-size: 14px;
	font-size: list.nth(map.get($headings, "h6"), 1);

@use "sass:map";
@use "sass:list";
@import "../../common/typography";

[MariaSolOs]

Yeah that's what I thought as well...

[svc-palantir-github]

fix(a11y): use `H2` header for dialog title

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[gluxon]

This looks good to me! Let's wait for @ggdouglas on the final approval.

[mm-wang]

Ah, I was actually thinking to have a prop on dialog that would allow a user to specify which heading level that they would want, rather than a specific heading. See #7405 and #6757 for more details.

[MariaSolOs]

Ah, I was actually thinking to have a prop on dialog that would allow a user to specify which heading level that they would want, rather than a specific heading. See #7405 and #6757 for more details.

Instead of adding a new prop, here's another proposal: Let's change the type of title in

blueprint/packages/core/src/components/dialog/dialog.tsx

Line 84 in 8e63db5

title?: React.ReactNode;

to string | React.Node. If it's a string then we render it inside an H2 header, else we use the provided node as is. That would keep a reasonable default while still allowing for further title customization.

WDYT @mm-wang?