diff options
author | GeoSot <geo.sotis@gmail.com> | 2022-07-14 12:06:06 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-14 12:06:06 +0300 |
commit | 713d7140f18514c916f75be34e809ebe00c1691c (patch) | |
tree | 4b381784545f22a61f9c88ef15b52d32b515e029 | |
parent | 8bb68b04b35765c30038923bd620ee28b21553c8 (diff) |
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>
-rw-r--r-- | js/src/offcanvas.js | 2 | ||||
-rw-r--r-- | js/tests/unit/offcanvas.spec.js | 24 | ||||
-rw-r--r-- | site/layouts/_default/docs.html | 2 | ||||
-rw-r--r-- | site/layouts/partials/docs-navbar.html | 6 |
4 files changed, 28 insertions, 6 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', () => { diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 5046d72607..d7fcf23c8a 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -1,7 +1,7 @@ {{ define "main" }} <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout"> <aside class="bd-sidebar"> - <div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel"> + <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel"> <div class="offcanvas-header border-bottom"> <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button> diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index c728d0bd39..e4f6eaaa7d 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -1,7 +1,7 @@ <header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top"> <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation"> {{- if eq .Layout "docs" }} - <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation"> + <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation"> {{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }} <span class="d-none fs-6 pe-1">Browse</span> </button> @@ -13,11 +13,11 @@ {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }} </a> - <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation"> <svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg> </button> - <div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true"> + <div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true"> <div class="offcanvas-header px-4 pb-0"> <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button> |