Offcanvas: activate focustrap when backdrop is enabled (#36717)

* fix(offcanvas): activate focustrap when backdrop is enabled
* Adding tabindex='-1' for both offcanvases in the docs
* Remove useless aria-expanded='false' in togglers
* Update js/tests/unit/offcanvas.spec.js

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>

2 files changed, 24 insertions, 2 deletions

diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
index 34616eb37a..30a9a45136 100644
--- a/js/src/offcanvas.js
+++ b/js/src/offcanvas.js
@@ -114,7 +114,7 @@ class Offcanvas extends BaseComponent {
     this._element.classList.add(CLASS_NAME_SHOWING)
 
     const completeCallBack = () => {
-      if (!this._config.scroll) {
+      if (!this._config.scroll || this._config.backdrop) {
         this._focustrap.activate()
       }
 
diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js
index 3c862efca9..da2fb97480 100644
--- a/js/tests/unit/offcanvas.spec.js
+++ b/js/tests/unit/offcanvas.spec.js
@@ -293,7 +293,8 @@ describe('Offcanvas', () => {
 
         const offCanvasEl = fixtureEl.querySelector('.offcanvas')
         const offCanvas = new Offcanvas(offCanvasEl, {
-          scroll: true
+          scroll: true,
+          backdrop: false
         })
 
         const spy = spyOn(offCanvas._focustrap, 'activate').and.callThrough()
@@ -306,6 +307,27 @@ describe('Offcanvas', () => {
         offCanvas.show()
       })
     })
+
+    it('should trap focus if scroll is allowed OR backdrop is enabled', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+        const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+        const offCanvas = new Offcanvas(offCanvasEl, {
+          scroll: true,
+          backdrop: true
+        })
+
+        const spy = spyOn(offCanvas._focustrap, 'activate').and.callThrough()
+
+        offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+          expect(spy).toHaveBeenCalled()
+          resolve()
+        })
+
+        offCanvas.show()
+      })
+    })
   })
 
   describe('toggle', () => {