Bootstrap: Accordion header usability

[Herst]

Apparently since accordion pane headers look like buttons (now more than ever), it has been shown in our user testing that some users are attempting to click the accordion headers first.

Is there any good reason against making the whole header clickable?

Some examples of other web UI frameworks where the whole accordion header is clickable:

• https://jqueryui.com/accordion/
• http://materializecss.com/collapsible.html
• https://getuikit.com/docs/accordion
• https://material.angular.io/components/expansion/examples
• https://www.uplabs.com/posts/material-expansion-panels
• https://b-3po.github.io/angular-material-expansion-panel/#/group
• https://rijulaggarwal16.github.io/material-expansion-panel/

[Ruffio]

That would be so nice.
As I get it, then in v. 4. there is no 'accordion' but a 'collapse', but that doesn't have it either: https://getbootstrap.com/docs/4.0/components/collapse/

[pkozlowski-opensource]

On the other hand people might want to put other clickable elements in a header (one not causing expand / collapse) - ex. a close button.

Somehow it seems like we should have 2 areas in the accordion / tab header.

[morrissey-ingenious]

You can easily do this with the current implementation see codepen example

https://codepen.io/morrissey-ingenious/pen/qXGXGd

[gijsbotje]

imo it has to be an 'a' element due to accessibility reasons
what you can do is add display: block; to the a element and it will stretch accros the header

examples with "icons"
https://codepen.io/gijsbotje/pen/XaoYGY

[morrissey-ingenious]

@gijsbotje you can easily add aria-roll="button" to my example to resolve any accessibility issues. Your idea of adding display:block is also acceptable that would be accomplished with the class d-block in v4.

Either way I think this issue can be closed.

[Herst]

Either way I think this issue can be closed.

It might be worth mentioning in the docs on how to do it.

[XhmikosR]

PR is welcome.

[Herst]

I was about to add a PR but I am still not sure what exactly to mention in the docs. While like @gijsbotje solution with the icons a lot but the code changes needed a are bit too much for the documentation IMHO and I think this would be as a part of bootstrap.

So I guess probably a single line about adding d-block to the link will be enough. BTW, this way it's still not like a button as not the whole space is clickable but in this case it could be combined with @morrissey-ingenious's solution by adding the data-toggle="collapse" and href additionally also to the header <div>, what do you think?

_you can easily add aria-roll="button" to my example to resolve any accessibility issues_

I don't agree. One should also think about handicapped users not using screen readers or other people first and foremost using the keyboard and in this case proper links are still better because they can be Tabed to.

[Herst]

Worth mentioning: Now there is also .stretched-link for making links fill their parents.

[ysds]

Fixed in #29782