<b-collapse> Accordion causes page to scroll

[Hiws]

Describe the bug

Since Chromium 84, the page scrolls with the toggle button of an accordion (might be other scenarios), because the browser tries to keep the button in the same position in the viewport.

This has been fixed in Bootstrap 4.5.1 via this PR: twbs/bootstrap#31347
However, because Bootstrap-Vue doesn't follow the same structure for accordions it doesn't apply here.

The fix is to add the style overflow-anchor: none to either the toggle button or a parent of the button.

We could solve this by adding a overflow-anchor-none and overflow-anchor-visible utility classes, and have overflow-anchor-none applied by default via v-b-toggle, and for users toggling accordion's another way could still utilize the helper class to turn off the behavior if they want.

Maybe have a setting to decide whether v-b-toggle should turn off this behavior or not.

Steps to reproduce the bug

1. Go to https://bootstrap-vue.org/docs/components/collapse#accordion-support
2. Open a accordion under an accordion which is already open
3. The browser should scroll the window up, keeping the clicked button in the same position in the viewport

Versions

Libraries:

• BootstrapVue: 2.16.0
• Bootstrap: 4.5.2
• Vue: 2.6.11

Environment:

• OS: Windows
• Browser: Chromium (Chrome, Edge..)
• Version: 84+

[jacobmllr95]

@Hiws Another option would be to introduce a <b-accordion> helper component that renders a element (tag defaults to div) which has the accordion class and role="tablist" applied.

The helper component could also provide bvAccordion data which we could inject into the <b-collapse> component to set the accordion prop automatically when detected.