Don't use button element as accordion heading #1042
Replies: 10 comments 2 replies
-
|
Note: I was able to get around the button limitation for now by using the flux icon directly, but it still feels like this should be changed to not use a button as the header item <flux:accordion.heading>
<div class="flex justify-between items-center">
<div>{{$item['import_data']['name'] ?? '(no name)'}}</div>
<div class="flex">
<flux:switch
wire:model="form.items.{{ $loop->index }}.is_approved"
label="Is Approved"
type="switch"
/>
<flux:icon.trash class="size-5 ml-2"
wire:click.stop="removeItem({{ $loop->index }})"
/>
</div>
</div>
</flux:accordion.heading> |
Beta Was this translation helpful? Give feedback.
-
|
@ruskiyos thanks for reporting! The accordion heading is a button for accessibility reasons. I've just looked at ShadCN and RadixUI and they both have accordion heading/ triggers as buttons. Do you have any examples of other UI libraries where they haven't used a button? |
Beta Was this translation helpful? Give feedback.
-
|
Hi! Just leaving my two cents here! According (no pun intended) to ARIA Accordion it is ARIA compatible to have a button adjacent to the header.
Later they explain this.
Hope this might help you guys! ❤️ EDIT: With that said i guess it's possible to do already. I just don't know exactly how. 🤔 |
Beta Was this translation helpful? Give feedback.
-
|
@ruskiyos Had a thought... Have you tried adding That way, you get the same visual as a button but the markup will be |
Beta Was this translation helpful? Give feedback.
-
|
@ruskiyos FYI I just tested my thought/suggestion re: using a |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @dennisfransen! At this stage, I don't think this is a bug and instead more of a feature request, so I've converted this to a feature request. |
Beta Was this translation helpful? Give feedback.
-
|
@jeffchown yep, that works as well For some reason I didn't get a notification of activity on the ticket so I haven't checked until now... I'm fine with it being a feature request, but it would be helpful to add another example in the accordion documentation to clarify this scenario. |
Beta Was this translation helpful? Give feedback.
-
|
If I may add, I came across this limitation as well but with checkboxes. I have accordions to accompany many groups of categories of different portals with each of them having checkboxes. In the current implementation it would not be possible (or at the very least behave unexpectedly) if I were to put a select all on the header of the accordion. |
Beta Was this translation helpful? Give feedback.
-
|
While I've run into something similar when putting input controls in an accordion header, at some point, I have to ask myself if I'm asking too much of the accordion and that maybe I need to create a custom component to get the exact result I want. This makes it possible for the accordion to stay true to its design (#1042 (comment)) while I still have the flexibility to create what I need using Alpine JS . |
Beta Was this translation helpful? Give feedback.
-
|
I've been trying for a couple of days to work out why I can't simply add class="truncate" to the accordion-header. My use case is for a collapsible row in a table, that has a truncated 'header' of the full content. I'm sure it's something face palmingly simple but I've yet to work it out :) <flux:accordion>
<flux:accordion.item>
<flux:accordion.heading class="truncate">
Isis in dolor eu tempus. Curabitur at feugiat neque. Suspendisse dictum gravida iaculis. Nulla imperdiet risus nec nisl hendrerit cursus. Nunc bibendum tellus sed nunc sagittis, non scelerisque nibh auctor. Nunc a porta mauris. Praesent mollis felis lacus, at iaculis ex pharetra ac. Morbi viverra varius nisl ut iaculis.
</flux:accordion.heading>
<flux:accordion.content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at mollis massa. Nullam pretium tincidunt magna at lobortis. Maecenas sit amet ligula vel sapien dignissim imperdiet nec nec magna. Quisque leo nunc, luctus ac efficitur a, cursus at ligula. Ut a lacinia tortor, molestie blandit tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum erat lacinia lorem porta euismod.
</flux:accordion.content>
</flux:accordion.item>
</flux:accordion> |
Beta Was this translation helpful? Give feedback.
-
|
@CitizenZed This question/issue is different than the original post and should be posted as its own new issue (and not a discussion) to help keep things clear and separate. That said, have you tried adding an internal div to your heading?: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks Jeff for your time, In the following code, the div is responsive, and the button isn't, nor are its children. <div class="max-w-6xl truncate" >
Isis in dolor eu tempus. Curabitur at feugiat neque. Suspendisse dictum gravida iaculis. Nulla imperdiet risus nec nisl hendrerit cursus. Nunc bibendum tellus sed nunc sagittis, non scelerisque nibh auctor. Nunc a porta mauris. Praesent mollis felis lacus, at iaculis ex pharetra ac. Morbi viverra varius nisl ut iaculis.
</div>
<button class="max-w-6xl truncate" >
Isis in dolor eu tempus. Curabitur at feugiat neque. Suspendisse dictum gravida iaculis. Nulla imperdiet risus nec nisl hendrerit cursus. Nunc bibendum tellus sed nunc sagittis, non scelerisque nibh auctor. Nunc a porta mauris. Praesent mollis felis lacus, at iaculis ex pharetra ac. Morbi viverra varius nisl ut iaculis.
</button>
<button>
<div class="max-w-6xl truncate" >
Isis in dolor eu tempus. Curabitur at feugiat neque. Suspendisse dictum gravida iaculis. Nulla imperdiet risus nec nisl hendrerit cursus. Nunc bibendum tellus sed nunc sagittis, non scelerisque nibh auctor. Nunc a porta mauris. Praesent mollis felis lacus, at iaculis ex pharetra ac. Morbi viverra varius nisl ut iaculis.
</div>
</button>
I am new to tailwind and fluxui. I can often hack my way through things, but this one has me stumped .. |
Beta Was this translation helpful? Give feedback.
-
Flux (pro) version
v1.1.2
Livewire version
v3.5.18
What is the problem?
The accordion uses a
<button>element for the heading of the accordion item.That becomes a problem if I want to add a button into the accordion header.
My use case is that I'm displaying a list of items. To save space, I use the accordion to display the
nameand someactionsin the header. If the user wants more details, they can expand the accordion item to see/modify the contents.I would like it add a
deletebutton into the header to allow the user to remove an item from the list. However, as soon as I add a button, it breaks the HTML as it is invalid to have a<button>element inside a<button>element.Note: I'm not sure if using a table would be more suitable for this, but flux table doesn't have collapsible rows.
// Before adding button
// After adding button
Code snippets
// flux code
// rendered code (without button)
How do you expect it to work?
I expect to be able to add any component/element into the accordion heading, or to have collapsible rows in tables.
I figured the accordion would be an easier fix than adding extra functionality to tables.
Please confirm (incomplete submissions will not be addressed)
Beta Was this translation helpful? Give feedback.
All reactions