[Accordion] AccordionSummary button validateDOMNesting warning

[orenBerko]

Steps to reproduce

Steps:

1. Open this link to live example: (required)

Current behavior

the accordion Summary is html button and in my add i add buttons inside the summary and i get this warning:
validateDOMNesting(...): cannot appear as a descendant of . Error Component Stack
after investigation i see that the summary is MuiButtonBase-root and this is the problem button inside buttons
in the previous version did not have this error

Expected behavior

i think you need an option to change the container to be div or something else from button

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Accordion,Summary

[mnajdova]

Can you provide an example of what you are trying to achieve? Codesandbox/Stackblitz example would be great. Are you trying to customze the AccordionSummary button and use a custom one? It is intentional that this component renders a button by default.

[mj12albert]

an option to change the container to be div or something else from button

@orenBerko AccordionSummary is intended to be a button, so placing buttons inside a button seems like a strange UX to begin with?

However to make it render a div instead you can use the component prop for this:

<AccordionSummary component="div" role="button" />

(disclaimer: this is terrible for accessibility, interactive elements should never be nested)

[orenBerko]

@mj12albert the component is not a member of AccordionSummary so you solution not work for me
https://mui.com/material-ui/api/accordion-summary/
add here my need's of the summary with buttons:

@mnajdova FYI

[mj12albert]

the component is not a member of AccordionSummary so you solution not work for me
https://mui.com/material-ui/api/accordion-summary/

@orenBerko Sorry I misread this, the component prop works, the props of ButtonBase are also available on AccordionSummary, see the line/link under this heading: https://mui.com/material-ui/api/accordion-summary/#props

Sandbox: https://codesandbox.io/p/sandbox/goofy-sky-fccdx8-fccdx8?file=%2Fsrc%2FDemo.tsx%3A18%2C29-20%2C24

DISCLAIMER: this may pass html validators but it's terrible for a11y, interactive elements like buttons should never be nested: https://adrianroselli.com/2016/12/be-wary-of-nesting-roles.html

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.