Accordion button border color is changed on focus but its width is always 0

[SalimBensiali]

The accordion button border color is change on focus https://github.com/twbs/bootstrap/blob/main/scss/_accordion.scss#L77, but its border with is always equal to 0 https://github.com/twbs/bootstrap/blob/main/scss/_accordion.scss#L42.

Is this expected?

[julien-deramond]

Hey @SalimBensiali
It is expected to be a borderless button so that the border can be handled more easily when collapsed or not collapsed. The bottom border comes from a box-shadow (when not collapsed) and the global border is set on the .accordion-item.

[SalimBensiali]

Thanks @julien-deramond. Is it then necessary to set a border color on button hover if the border is always 0?

[julien-deramond]

I don't think so. I haven't checked really in detail but --bs-accordion-btn-focus-border-color and border-color: var(--#{$prefix}accordion-btn-focus-border-color) (in &:focus) now seem to be useless because the rendering of the focus state is handled by the box shadow and the border width is always 0 anyway (without any way to override it for customization from the outside of the component).

[julien-deramond]

Thanks for reporting that @SalimBensiali
I've created #39560 to tackle this issue and deprecate the CSS and Sass variables.

[SalimBensiali]

Thanks @julien-deramond and for the prompt PR to address this. 👏