fix: Make Panel heading optional

[dequejosie]

Needed in https://github.com/dequelabs/walnut/issues/2665

[github-actions]

Preview branch generated at https://panel-heading-optional.d1gko6en628vir.amplifyapp.com

[scurker]

Heading can't be optional, Panel uses a section meaning it's a region and it must have a label.

cauldron/packages/react/src/components/Panel/index.tsx

Lines 35 to 41 in 78d6a74

	<section
	aria-labelledby={headingId}
	className={classNames('Panel', className, {
	['Panel--collapsed']: collapsed
	})}
	{...other}
	>

For context, why is a heading not needed here?

[dequejosie]

@scurker It is for the User Management Table, which does not have a Panel level heading. Can we have a label without a visible heading for the Panel? Like when heading is not there, we require a label.

[scurker]

@scurker It is for the User Management Table, which does not have a Panel level heading. Can we have a label without a visible heading for the Panel? Like when heading is not there, we require a label.

Is Manage Users not a heading in this instance? We can't make this change alone to make the heading optional because that would introduce an A11Y issue where the section has an invalid aria-labelledby.

If we want panel's heading to be optional, there's a couple of options

• Make heading optional if an aria-labelledby attribute is passed into the component

OR

• Make heading optional and only include auto aria-labelledby when the heading is present

Changes made

[scurker]

Just a few small nitpicks, and we need some tests to check for the conditional rendering of the heading.

It would also be nice to update docs.

[github-actions]

Preview branch generated at https://panel-heading-optional.d1gko6en628vir.amplifyapp.com