Revamp accordion borders to fix pixel jumping

[mdo]

This should fix the issue once and for all—this takes a simpler approach to the borders and seems to fix all the movement I could see (which was actually visible without even zooming in, at least in Safari).

• Pushes the borders to the .accordion-item instead of the .accordion-button
• Simplifies the .accordion-flush's border resets
• Recreates the .accordion-button's border-bottom with an inset box-shadow
• Moves the border-radius to the parent, which necessitated the new $accordion-inner-border-radius variable

Fixes #32250, closes #32251.

Preview: https://deploy-preview-33149--twbs-bootstrap.netlify.app/docs/5.0/components/accordion/

[XhmikosR]

Definitely better from a quick look!

Using Firefox on Windows 10 with 175% DPI: it seems there's some new issues, like double border in the first item, missing border-bottom is the other items, and a slight border-radius issue in the last item

[mdo]

Pushed an update that I hope will address the FF zoom issue.

[mdo]

@ffoodd Any chance you could give me a quick review here? <3

[ffoodd]

I still see a little glitch but it's better.

FF zoom issue persists (I start to see weirdness from 110% to 170%, either a missing border or doubled ones).

I guess our main issue relates more to animating height than to borders. Shouldn't we try something based on visibility & max-height instead? My main reference on the topic is this van11y hide/show plugin (check the "Animation" section in "Bonuses").

Not quite sure this is the way to go, though…

[mdo]

@ffoodd I think we merge this as-is and then look at revamping the animations separately. Thoughts?

[ffoodd]

Agreed,

Should probably open a new issue dedicated to animation though.

[ffoodd]

Only left a question. Simpler and better solution IMHO, let's do this.