return (
<Accordion open={open} onToggle={() => setIsOpen(!open)}>
<AccordionTrigger heading={{ level: 4 }}>{label}</AccordionTrigger>
<AccordionContent id="accordion-content-id">Here is some content</AccordionContent>
</Accordion>
);
Then the rendered HTML has two elements with the same id, which is invalid HTML:
<div class="Accordion">
<h4>...</h4>
<div class="ExpandCollapse__panel" id="accordion-content-id">
<div class="Accordion__panel" id="accordion-content-id">Here is some content</div>
</div>
</div>
Similarly, if I set any other attributes, such as className on the AccordionContent component, those attributes will be set on both the ExpandCollapse__panel and Accordion__panel elements.
I think what we probably want here is that props get spread onto the .Accordion__panel when they're applied to <AccordionContent> so that there's not a duplication of html attributes.
Then the rendered HTML has two elements with the same id, which is invalid HTML:
Similarly, if I set any other attributes, such as
className
on theAccordionContent
component, those attributes will be set on both theExpandCollapse__panel
andAccordion__panel
elements._Originally posted by @thuey in https://github.com/dequelabs/cauldron/pull/713#discussion_r930402229_