[core] feat(Section): a11y improvements, titleRenderer prop

[bvandercar-vt]

Improve a11y on the Section component by adding various aria props.

• Includes tests

[adidahiya]

can we limit this to only HTMLHeadingElement function components, so that users are encouraged to use Blueprint's heading components? also I think the JSDoc needs to be improved

Suggested change

	/**
	* @default H6
	*/
	titleTagName?: keyof JSX.IntrinsicElements | React.FC<React.AllHTMLAttributes<HTMLElement>>;
	/**
	* The heading component to use when rendering the title, typically one of `H1`, `H2,
	* `H3`, `H4`, `H5`, or `H6` from `@blueprintjs/core`.
	*
	* @default H6
	*/
	titleHeadingComponent?: React.FC<React.AllHTMLAttributes<HTMLHeadingElement>>;

[bvandercar-vt]

Actually, the purpose for this change, for our application at least, is specifically to not have it be inside of a heading element. This is so that we can pass an element to the title prop that has a heading element within it. In our case, here is our goal:

title={
      <div>
        <H2 id={titleId}>{title}</H2>
        {titleRightElement}
      </div>
    }

in which case we'd want to set titleTagName to div, since it will contain the H2.

So I see 3 options for us to achieve our goal above:

1. We implement titleHeadingComponent the way you said, and then add a prop titleRightElement.
2. We implement titleHeadingComponent the way you said, and on our end we just add a ts ignore so that we can pass a div component instead of a heading component.
3. We scrap this change and add a titleProps prop which gets spread to the H6 so that we can pass our div component to title and set titleProps={{ role: 'presentation'}}

[adidahiya]

Ok, how about a render prop API instead?

type SectionTitleProps = Pick<React.HTMLAttributes<HTMLElement>, "className" | "id">;

/**
 * Optional title renderer function. It is recommended to render a Blueprint `<H6>` element as part of the title.
 *
 * @default H6
 */
renderTitle?: React.FC<SectionTitleProps>;

Note: this type is informed by a recent fix we had to make for a similar render prop API in #6521

[bvandercar-vt]

Alright I take back my last comment, your first solution would work. Kept that solution. Renamed to renderTitle instead of titleHeadingComponent though. Up for whatever you want.

[adidahiya]

upon further review, I decided that titleRenderer is a better name. I pushed a commit with that update

[adidahiya]

Suggested change

	const sectionTitleId = title ? uniqueId("section-title") : undefined;
	const sectionTitleId = title != null ? uniqueId("section-title") : undefined;

[bvandercar-vt]

Line 174 has logic

 {title && (
                <div

so we would want this logic to be the same.

[bvandercar-vt]

We could change that to title != null too though. Depends whether you want empty string to create the title element.

[adidahiya]

ok, good point, let's keep what you have

[adidahiya]

Sorry about the unrelated lint job error in CI; I will fix that on develop.

Your docs preview build looks good