Passing an ID prop to AccordionItemButton does not change the component ID
angelocordon opened this issue · 2 comments
From the source code, it looks like it may be possible other props to the AccordionItemButton
other than className
. However, when passing in an id
prop, it doesn't change this, instead inherits it from the accordion context.
Example:
<AccordionItem uuid={accordionSection}>
<AccordionItemHeading>
<AccordionItemButton id={`${accordionSection}-heading-button`}>
...
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
...
<AccordionItemButton> Cancel </AccordionItemButton>
</AccordionItemPanel>
</AccordionItem>
Currently, both AccordionItemButtons are inheriting the same generated ID based on the UUID, instead of using a specific ID for the heading item button.
Is there a way around this?
@angelocordon the id on <AccordionItemButton>
cannot be changed for accessibility reasons, it is used by the aria-labelledby
attribute on the <AccordionItemPanel>
which is why it isn't currently available to change.
In the example you have above, I can see you are trying to use an <AccordionItemButton>
inside the panel, which is not the indented use of the button, and I presume where your problem is coming from.
Could you do something like remove the second button from inside the panel and use <AccordionItemState>
to change the content of the <AccordionItemButton>
based on if it is expanded or collapsed:
<AccordionItem uuid={accordionSection}>
<AccordionItemHeading>
<AccordionItemButton>
<span>....</span>
<span>
<AccordionItemState>
{({ expanded }) => ( expanded ? 'Cancel' : 'Open' )}
</AccordionItemState>
</span>
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<p>Some panel content...</p>
</AccordionItemPanel>
</AccordionItem>
Thanks for taking a look @katie-day 🙇🏽