Collapsible Panel assigns button role to the whole header

[dogayuksel]

Describe the bug
Collapsible Panel Component assigns button role to the whole header. This creates an ambiguity when there are other interactive elements inside the header.

Expected behavior
Header as a whole should be interactive when there are no elements inside, or the button role should be assigned to the rotating caret icon only.

Screenshots

[emmenko]

Thanks for reporting this. It might be a regression introduced here #2262

@ddouglasz Can you check? Thanks

[emmenko]

The <HeaderContainer> is an <AccessibleButton>. Not sure why to be honest. Maybe we need to refactor it to not use the <AccessibleButton> but only keep the accessibility features? 🤔

ui-kit/packages/components/collapsible-panel/src/collapsible-panel.tsx

Lines 197 to 210 in aa185a1

	<HeaderContainer
	as="div"
	css={[
	getHeaderContainerStyles(props, isOpen),
	getThemeStyle(props.theme),
	]}
	id={panelButtonId}
	label=""
	onClick={props.isDisabled ? undefined : toggle}
	isDisabled={props.isDisabled}
	buttonAttributes={dataProps}
	aria-controls={panelContentId}
	aria-expanded={isOpen ? 'true' : 'false'}
	>

[tdeekens]

...or can it somehow have another label at least?

[ddouglasz]

Thanks for reporting this. It might be a regression introduced here #2262

@ddouglasz Can you check? Thanks
Looking into it