[Feature Request] Greater control of click events and icon location in expansion panels

[flpehr0]

Problem to solve

• Currently you are unable to choose what side the icon/button is on

• There is no way to control if you only want the icon to be clickable (a button) or leave the default functionality where the entire row/header is clickable. This is very undesirable if you have buttons in the header because if a user clicks in just the right place they might accidentally expand the panel unintentionally.

Proposed solution

• add a prop for the icon of left/right
• allow the icon to be a button you can access in a slot for greater customization like adding tooltips and accessibility features.
• allow the click on the header/panel to be disabled in favor of the solo button.

If there is something I am missing and this is actually possible, I think adding that example to the documentation would be very helpful and/or providing guidance on how I might accomplish this. Thank you as always for your help!

[flpehr0]

I would also like to note that the end result in both functionality and appearance of the expansion panel vs an expandable table row are very different. I think that the ability to make both of these expansion panels look and behave similarly should exist so that developers can improve their users experience and consistency.

• For the expandable table row, there is a button with a noticeable hover that controls the expand behavior. The entire row is also not clickable. My team was also easily able to move this to the left of the table.
• The expansion panels do not have this type of flexibility and for more advanced implementations of the panels they would be greatly desired. I think that the normal expansion panels should have a similar set of features available as it's expandable table row cousin.

[Glandos]

Did you have a look at #9698?

[flpehr0]

Hi there,
thank you for bringing 9698 to my attention as I had not seen it, however, that ticket does not address my second bullet point which is being able to control the click area. Not being able to control the clickable area in an expansion panel has meant we have not been able to use more advanced uses of the expansion panel, as this causes significant issues with the screen reader as well as with tabbing.

We are very aware of the "order" class, as that is what we have used ourselves to force the icon, but I still stand by a prop for "left" and "right" is a much cleaner end solution. There are many instances in vuetify where something simple like a directional prop has been implemented in a situation that developers could hypothetically have overridden the native behavior, but that then tends to get a bit hacky and it would be much more intuitive and user friendly to have a prop. Additionally, there are effectively two versions of the expansion panels when you consider the expandable table row as well as the expansion panels. It should be a goal to make the functionality and appearance of these components behave similarly since they are similar.

Thank you for getting back to me and I hope this helps

[johnleider]

Thank you for the Feature Request and interest in improving Vuetify. After careful consideration, the team has decided that this is not functionality that we are looking to implement at this time.

If you have any questions, please reach out to us in our Discord community.