Docs: use <button> for dropdown/popover examples, explain preference over <a> for dropdowns, tweak collapse prose

[patrickhlauke]

Description

• Expand dropdowns prose to explain that <button> is recommended/preferred. Change subsequent example to use <button>
• Remove unnecessary role="button" from <button> elements in collapse unit tests
• Tweak modal examples to use <button> for popovers inside modal, and for the modal trigger itself
• Tweak the prose/explanation for the collapse component

Motivation & Context

Closes #37426

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-37432--twbs-bootstrap.netlify.app/docs/5.2/components/dropdowns/
• https://deploy-preview-37432--twbs-bootstrap.netlify.app/docs/5.2/components/modal/

[julien-deramond]

The changes LGTM and make this part of the documentation clearer.

However I'm wondering it we shouldn't also modify the following things:

• There are two <a class="dropdown-toggle"s in js/tests/unit/dropdown.spec.js that are not here especially IMO to test the behavior of links.
• There are some <a class="dropdown-toggle"s in site/content/docs/5.2/examples/headers/index.html and in site/content/docs/5.2/examples/sidebars/index.html
• There are tons of <a class="dropdown-toggle" used in combination with .nav-link. Don't we need to change them as <button>s and tweak the style? That's how we use them in our own doc header.

[patrickhlauke]

@julien-deramond sorry, wasn't quite finished with this. was just too tired last night, but wanted to at least make a start - hence the draft ;)

[julien-deramond]

@julien-deramond sorry, wasn't quite finished with this. was just too tired last night, but wanted to at least make a start - hence the draft ;)

My bad. Hadn't seen the draft 😇

[patrickhlauke]

the dropdowns with .nav-link are currently stylistically problematic, yes.

taking https://getbootstrap.com/docs/5.2/components/navbar/#supported-content as an example, changing the control to <button class="btn btn-link nav-link dropdown-toggle">...</button> gets us close, but the vertical text alignment is off

that is, i think, one of the main reasons why for some components/patterns, authors still use an <a href="..." role="button"> at the moment...because the alternative just doesn't work out of the box.

I think that's something to consider for v6 ... reviewing all the styles to make it possible to seamlessly mix and match links and real <button> elements and have them line up vertically correctly

EDIT: filed #37433

[mdo]

Nicely done!