Don't use button element as accordion heading #1042
Replies: 9 comments
-
|
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.
-
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