springload/react-accessible-accordion

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 🙇🏽