Drop --bs-accordion-btn-focus-border-color and deprecate $accordion-button-focus-border-color (#39560)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

.eslintrc.json

@@ -51,6 +51,7 @@
         "SwitchCase": 1
       }
     ],
+    "logical-assignment-operators": "off",
     "max-params": [
       "warn",
       5
@@ -75,6 +76,7 @@
       "error",
       "after"
     ],
+    "prefer-object-has-own": "off",
     "prefer-template": "error",
     "semi": [
       "error",

.github/workflows/release-notes.yml

@@ -18,6 +18,6 @@ jobs:
     runs-on: ubuntu-latest
     if: github.repository == 'twbs/bootstrap'
     steps:
-      - uses: release-drafter/release-drafter@v5
+      - uses: release-drafter/release-drafter@v6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

js/src/modal.js

@@ -11,7 +11,9 @@ import SelectorEngine from './dom/selector-engine.js'
 import Backdrop from './util/backdrop.js'
 import { enableDismissTrigger } from './util/component-functions.js'
 import FocusTrap from './util/focustrap.js'
-import { defineJQueryPlugin, isRTL, isVisible, reflow } from './util/index.js'
+import {
+  defineJQueryPlugin, isRTL, isVisible, reflow
+} from './util/index.js'
 import ScrollBarHelper from './util/scrollbar.js'
 
 /**

js/src/scrollspy.js

@@ -8,7 +8,9 @@
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import SelectorEngine from './dom/selector-engine.js'
-import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index.js'
+import {
+  defineJQueryPlugin, getElement, isDisabled, isVisible
+} from './util/index.js'
 
 /**
  * Constants

js/src/tooltip.js

@@ -9,7 +9,9 @@ import * as Popper from '@popperjs/core'
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
-import { defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index.js'
+import {
+  defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop
+} from './util/index.js'
 import { DefaultAllowlist } from './util/sanitizer.js'
 import TemplateFactory from './util/template-factory.js'
 

js/src/util/backdrop.js

@@ -7,7 +7,9 @@
 
 import EventHandler from '../dom/event-handler.js'
 import Config from './config.js'
-import { execute, executeAfterTransition, getElement, reflow } from './index.js'
+import {
+  execute, executeAfterTransition, getElement, reflow
+} from './index.js'
 
 /**
  * Constants

js/tests/unit/carousel.spec.js

@@ -2,7 +2,9 @@ import Carousel from '../../src/carousel.js'
 import EventHandler from '../../src/dom/event-handler.js'
 import { isRTL, noop } from '../../src/util/index.js'
 import Swipe from '../../src/util/swipe.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Carousel', () => {
   const { Simulator, PointerEvent } = window

js/tests/unit/dropdown.spec.js

@@ -1,7 +1,9 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import Dropdown from '../../src/dropdown.js'
 import { noop } from '../../src/util/index.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Dropdown', () => {
   let fixtureEl

js/tests/unit/modal.spec.js

@@ -1,7 +1,9 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import Modal from '../../src/modal.js'
 import ScrollBarHelper from '../../src/util/scrollbar.js'
-import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Modal', () => {
   let fixtureEl

js/tests/unit/offcanvas.spec.js

@@ -2,7 +2,9 @@ import EventHandler from '../../src/dom/event-handler.js'
 import Offcanvas from '../../src/offcanvas.js'
 import { isVisible } from '../../src/util/index.js'
 import ScrollBarHelper from '../../src/util/scrollbar.js'
-import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Offcanvas', () => {
   let fixtureEl

js/tests/unit/scrollspy.spec.js

@@ -1,6 +1,8 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import ScrollSpy from '../../src/scrollspy.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('ScrollSpy', () => {
   let fixtureEl

js/tests/unit/tab.spec.js

@@ -1,5 +1,7 @@
 import Tab from '../../src/tab.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Tab', () => {
   let fixtureEl

js/tests/unit/toast.spec.js

@@ -1,5 +1,7 @@
 import Toast from '../../src/toast.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Toast', () => {
   let fixtureEl

js/tests/unit/tooltip.spec.js

@@ -1,7 +1,9 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import Tooltip from '../../src/tooltip.js'
 import { noop } from '../../src/util/index.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Tooltip', () => {
   let fixtureEl

package.json

@@ -116,17 +116,17 @@
     "clean-css-cli": "^5.6.3",
     "cross-env": "^7.0.3",
     "eslint": "^8.56.0",
-    "eslint-config-xo": "^0.43.1",
+    "eslint-config-xo": "^0.44.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-unicorn": "^50.0.1",
+    "eslint-plugin-unicorn": "^51.0.0",
     "find-unused-sass-variables": "^5.0.0",
     "globby": "^11.1.0",
     "hammer-simulator": "0.0.1",
     "hugo-bin": "^0.119.0",
     "ip": "^2.0.0",
-    "jasmine": "^4.6.0",
+    "jasmine": "^5.1.0",
     "jquery": "^3.7.1",
     "karma": "^6.4.2",
     "karma-browserstack-launcher": "1.4.0",
@@ -140,7 +140,7 @@
     "lockfile-lint": "^4.12.1",
     "nodemon": "^3.0.3",
     "npm-run-all2": "^6.1.2",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.34",
     "postcss-cli": "^11.0.0",
     "rollup": "^4.9.6",
     "rollup-plugin-istanbul": "^5.0.0",
@@ -149,7 +149,7 @@
     "sass-true": "^7.0.1",
     "shelljs": "^0.8.5",
     "stylelint": "^16.2.1",
-    "stylelint-config-twbs-bootstrap": "^13.0.0",
+    "stylelint-config-twbs-bootstrap": "^14.0.0",
     "terser": "^5.27.0",
     "vnu-jar": "23.4.11"
   },

scss/_accordion.scss

@@ -20,7 +20,6 @@
   --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
   --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
   --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
-  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
   --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
   --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
   --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
@@ -74,7 +73,6 @@
 
   &:focus {
     z-index: 3;
-    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
     outline: 0;
     box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
   }

scss/_buttons.scss

@@ -100,6 +100,15 @@
     }
   }
 
+  .btn-check:checked:focus-visible + & {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+
   &:disabled,
   &.disabled,
   fieldset:disabled & {

scss/_carousel.scss

@@ -132,19 +132,11 @@
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: escape-svg($carousel-control-prev-icon-bg);
+  background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
 }
 .carousel-control-next-icon {
-  background-image: escape-svg($carousel-control-next-icon-bg);
+  background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
 }
 
 // Optional indicator pips/controls

scss/_variables.scss

@@ -1383,7 +1383,9 @@ $accordion-transition:                    $btn-transition, border-radius .15s ea
 $accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
 $accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis) !default;
 
-$accordion-button-focus-border-color:     $input-focus-border-color !default;
+// fusv-disable
+$accordion-button-focus-border-color:     $input-focus-border-color !default; // Deprecated in v5.3.3
+// fusv-enable
 $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
 
 $accordion-icon-width:                    1.25rem !default;