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 <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Patrick H. Lauke <[email protected]>

1 files changed, 23 insertions, 1 deletions

diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js
index 3c862efca..da2fb9748 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', () => {