search

dequelabs / cauldron

https://cauldron.dequelabs.com/
Mozilla Public License 2.0
86 stars 20 forks source link

Accordion content props gets spread to multiple elements #714

Open scurker opened 2 years ago

scurker commented 2 years ago 
  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.

_Originally posted by @thuey in https://github.com/dequelabs/cauldron/pull/713#discussion_r930402229_

scurker commented 2 years ago

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.